Visualize Data with a Heat Map - freeCodeCamp Data Visualization Project Tutorial
Channel: Ganesh H
Date: 2020-06-24

This is a walkthrough for the freeCodeCamp Heat Map project from start to finish. We import some JSON data about global temperatures and render a heat map using d3.js.
Written Guide and Source Code : https://www.notion.so/ganeshh123/Visualize-Data-with-a-Heat-Map-12660e493bd940ea95625aa641db574b
Timestamps:
0:00 - Project Setup
02:00 - Creating Variables and Functions
04:18 - Fetching JSON Data
08:30 - User Story #1: My heat map should have a title with a corresponding id="title"
09:26 - User Story #2: My heat map should have a description with a corresponding id="description"
10:30 - User Story #3: My heat map should have an x-axis with a corresponding id="x-axis"
15:54 - User Story #4: My heat map should have a y-axis with a corresponding id="y-axis"
20:20 - User Story #5: My heat map should have rect elements with a class="cell" that represent the data
21:58 - User Story #6: There should be at least 4 different fill colors used for the cells
25:02 - User Story #7: Each cell will have the properties data-month, data-year, data-temp containing their corresponding month, year, and temperature values
26:34 - User Story #8: The data-month, data-year of each cell should be within the range of the data
28:56 - User Story #9: My heat map should have cells that align with the corresponding month on the y-axis
36:10 - User Story #10: My heat map should have cells that align with the corresponding year on the x-axis
44:18 - User Story #11: My heat map should have multiple tick labels on the y-axis with the full month name
45:35 - User Story #12: My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015
46:38 - User Story #13: My heat map should have a legend with a corresponding id="legend"
47:30 - User Story #14: My legend should contain rect elements
48:08 - User Story #15: The rect elements in the legend should use at least 4 different fill colors
49:34 - User Story #16: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area
55:00 - User Story #17: My tooltip should have a data-year property that corresponds to the data-year of the active area
56:22 - 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!