Heat Map Data Visualization Project with testable user stories - Guinea Pigs needed 🐹

1

As you may have heard, @no-stack-dub-sack, @paycoguy, and @Christian-Paul have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

Note that the test suite may not yet work in browsers other than Chrome.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.

If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

Here is the sample project: http://codepen.io/freeCodeCamp/pen/JEXgeY

Intro

For this project, we will be visualizing the data that is found in this dataset: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json. Good luck and happy coding!

User Stories

  1. My heat map should have a title with a corresponding id="title".
  2. My heat map should have a description with a corresponding id="description".
  3. My heat map should have an x-axis with a corresponding id="x-axis".
  4. My heat map should have a y-axis with a corresponding id="y-axis".
  5. My heat map should have cells with a corresponding class="cell" that represent the data.
  6. There should be at least 4 different fill colors used for the cells.
  7. Each cell will have the properties "data-month", "data-year", and "data-temp" containing their corresponding month, year, and temperature values.
  8. The "data-month" and "data-year" of each cell should be within the range of the data.
  9. My heat map should have cells that align with the corresponding month on the y-axis.
  10. My heat map should have cells that align with the corresponding year on the x-axis.
  11. My heat map should have multiple tick labels on the y-axis with the full month name.
  12. My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
  13. My heat map should have a legend with corresponding id="legend".
  14. I can mouse over a cell and see a tooltip with a corresponding id="tooltip" which displays more information about the cell.
  15. My tooltip should have a "data-year" property that corresponds to the given year of the active cell.
2

For anyone who wanted to attempt this - apologies - the test suite was not available in the link originally provided in the OP. I’ve fixed this and the test suite is now available in the blank pen provided above which has our new test suite UI. This should hopefully make for a clearer and better user experience.

Click on the hamburger menu in the top left corner to get started! Any feedback on how this new menu works would also be much appreciated! Thanks all!

3

Thanks for your feedback so far, everyone!

I’m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

I’m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QA’ing! :slight_smile: