Visualize Data with a Treemap Diagram - freeCodeCamp Data Visualization Project Tutorial

This is a full walkthrough for the Treemap Diagram Data Visualization project.We import some data on the movies, create a hierarchy and visualize them with a treemap diagram where the area of the tile is proportional to the revenue. Written Guide and Source Code : https://www.notion.so/ganeshh123/WIP-Visualize-Data-with-a-Treemap-Diagram-1192d4ebd1164277b769f74eaf7a5d26 Timestamps: 0:00 - Project Setup 01:28 - Creating Variables and Functions 02:20 - Fetching the Data 04:43 - User Story #1: My tree map should have a title with a corresponding id="title" 05:24 - User Story #2: My tree map should have a description with a corresponding id="description" 06:14 - User Story #3: My tree map should have rect elements with a corresponding class="tile" that represent the data 18:14 - User Story #4: There should be at least 2 different fill colors used for the tiles 20:48 - User Story #5: Each tile should have the properties data-name, data-category, and data-value containing their corresponding name, category, and value 23:16 - 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 29:52 - User Story #7: My tree map should have a legend with corresponding id="legend" 30:42 - User Story #8: My legend should have rect elements with a corresponding class="legend-item" 31:16 - User Story #9: The rect elements in the legend should use at least 2 different fill colors 32:55 - 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 37:38 - User Story #11: My tooltip should have a data-value property that corresponds to the data-value of the active area 38:47 - Styling and Final Touches -————————————————————————————————————- D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.

JSON (JavaScript Object Notation) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types.

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.

freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community ... https://www.youtube.com/watch?v=wvfBn7GCCHk