freeCodeCamp Front End Development Libraries Projects - Project 5 - Visualize Data with a Treemap Diagram
See the result here: https://laurentlabine.github.io/fcc-datavis-treemap-diagram/
Thumbnail available here : https://user-images.githubusercontent.com/20836468/118495801-d8903580-b723-11eb-97b4-527b262b26dd.png
I built this project as part of freeCodeCamp's curriculum to learn and practice Data Visualization using D3.js library.
The three sets of data used for this project have been made available via freeCodeCampe at the following URLs:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json
And respectively represent the following :
Top 100 highest funded projects on Kickstarter grouped by category
Top 100 highest grossing movies grouped by genre
Top 100 best-selling video games grouped by platform
The project answers the technical requirements as stated in the challenge located here: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram with the tests that can be run from the page itself.
- The ability to switch between the three datasets using the selector box added to the page.
- Structural re-design of the the app to make every component self contained within its own and put togeter in a app.js or something equivalent
- Fix the mouseover effect that isn't triggered when hovering over the text on the tiles
- Fix my clip paths that aren't working properly preventing me to diminish the opacity of the tiles fill colors
- Implement a smooth transition as demonstrated on D3JS website in their own applications.