This is my implementation of Free Code Camp's Visualize Data with a Treemap Diagram.
Built an app that is functionally similar to this. Fulfill the below user stories. Give it your own personal style. You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library.
Datasets provided by freeCodeCamp can be found here.
User stories:
- User Story #1: My tree map should have a title with a corresponding
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, anddata-valuecontaining 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
rectelements with a correspondingclass="legend-item". - User Story #9: The
rectelements 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-valueproperty that corresponds to thedata-valueof the active area.
Web browser: Google Chrome (recommended)