Tree Map D3 Project with testable user stories - Guinea Pigs needed 🐹

[QuincyLarson]

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.

This is a brand-new project that should be a ton of fun to build: a drum kit! 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!
Tree Map D3 Project

Example Project:

FCC: D3 Tree Map

Boilerplate to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

User Stories:

• My tree map should have a title with a corresponding id=“title”
• My tree map should have a description with a corresponding id=“description”
• My tree map should have elements with a corresponding class=“tile” that represent the data
• There should be at least 2 different fill colors used for the tiles
• Each tile should have the properties “data-name”, “data-category”, and “data-value” containing their corresponding name, category, and value
• The area of each tile should correspond to the data-value amount
• My tree map should have a legend with corresponding id=“legend”
• My legend should have legend items with corresponding class=“legend-item”
• The legend items should use at least 2 different fill colors
• I can mouse over an area and see a tooltip with a corresponding id=“tooltip” which displays more information about the area
• My tooltip should have a “data-value” property that corresponds to the given value of the active tile.

Datasets (can use any of the three):

Video Game Sales:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
Movie Sales:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
Kickstarter Pledges:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json

[leonfeng]

This one made my head hurt https://codepen.io/leonfeng/pen/xgdqGR

Personally I felt it was quite a leap from the D3 challenges to this treemap project. The D3 docs only helped a little. In the end I had to “borrow” code from a (GPL-licensed) tutorial, and to be honest I still don’t understand half of the code.

In addition, I used a 3rd-party library to render the legend. And it fails the legend colours test (#9) even though each legend item has a unique colour. Are we expected to manually code the legend items? The user stories aren’t clear on that

[no-stack-dub-sack]

@leonfeng Hey Leon, sorry I missed this! I’m tying in @QuincyLarson here so he can see your feedback, curious to see what he thinks.

Also maybe @paycoguy or @Christian-Paul have some insight as they developed both the project and the tests.

In the future, I recently added a “report bug” link to the test suite projects, so the best place to report issues will now be there

[Christian-Paul]

@leonfeng Thanks for the feedback!

Test #9 states: “The legend items should use at least 2 different fill colors”

It expects the elements that have the different fill colors to have the class “legend-item”

In your project, only one element has the class of legend-item; if you made the path elements with class=“swatch” also have the class of “legend-item” it should pass. We’ve tried to make the tests as general as possible so campers can employ whatever strategy they see fit, so using a library is fine, insofar as you can label the classes.

As for how we can improve the tests, @no-stack-dub-sack, @QuincyLarson, @paycoguy, I think making test #8 check for the presence of more than one element with class=“legend-item” would make it more clear that there should be multiple elements with this class.

If popular legend libraries do not allow campers to assign class names, we’ll need a different solution: perhaps we could iterate through the children of the top level legend element, and collect fill color information that way.

[QuincyLarson]

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!

[no-stack-dub-sack]

@Christian-Paul you up for making this change?