Visualize Data with a Treemap Diagram
This project was created for "Data Visualization" certification on freeCodeCamp.
Live URL: https://ahmetcankaratas.github.io/visualize-data-treemap/
📷 Screenshots
Main Page
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, 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.