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 forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.
Thanks for Watching!