carlos-i-martinez / codepen-d3treemap

A CodePen.io App that functions as a Treemap Diagram showing Movie Sales data. Using Data-Driven Document(D3.js) JavaScript library.

D3 Treemap Diagram

A CodePen.io App that functions as a Treemap Diagram showing Movie Sales data. Using Data-Driven Document(D3.js) JavaScript library.

Project 5 of 5 for freeCodeCamp's Data Visualization Developer Certification.

Public Webpage: Treemap Diagram.

A Pen created at CodePen.io. You can find this one at https://codepen.io/carlos-i-martinez/pen/YMpRgJ

Completed Data Visualization Certification: Certificate.

FreeCodeCamp Public Profile: Carlos Martinez FreeCodeCamp

Technologies Used:

• HTML, JavaScript, CSS and D3.

Some requirements to complete project:

• Movie sales JSON dataset used to create Map Diagram: Movie Sales Data

• Diagram should have rect elements to represent data.

• Minimum of 2 different colors used to fill rect elements.

• Each tile(rect) element should have its correct value for name, category and sales according to the data.

• The area of each tile should correspond to the sales value amoun. Tiles with a larger sales should have a bigger area.

• When mousing over a Map area a tooltip displays more information about the area(Movie Name, Category and Sales for that tile).