4.2 KiB
4.2 KiB
id | title | isRequired | challengeType |
---|---|---|---|
587d7fa6367417b2b2512bc0 | Visualize Data with a Treemap Diagram | true | 3 |
Description
id="title"
.
User Story #2: My tree map should have a description with a corresponding id="description"
.
User Story #3: My tree map should have rect
elements with a corresponding class="tile"
that represent the data.
User Story #4: There should be at least 2 different fill colors used for the tiles.
User Story #5: Each tile should have the properties data-name
, data-category
, and data-value
containing their corresponding name, category, and value.
User Story #6: The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.
User Story #7: My tree map should have a legend with corresponding id="legend"
.
User Story #8: My legend should have rect
elements with a corresponding class="legend-item"
.
User Story #9: The rect
elements in the legend should use at least 2 different fill colors.
User Story #10: I can mouse over an area and see a tooltip with a corresponding id="tooltip"
which displays more information about the area.
User Story #11: My tooltip should have a data-value
property that corresponds to the data-value
of the active area.
For this project you can use any of the following datasets:- Kickstarter Pledges:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
- Movie Sales:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
- Video Game Sales:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Once you're done, submit the URL to your working project with all its tests passing.
Remember to use the Read-Search-Ask method if you get stuck.
Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required