fcc-datavis-treemap-diagram's Introduction

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.

Additional features include:

The ability to switch between the three datasets using the selector box added to the page.

Possible improvements include the following:

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.

Recommend Projects