Visualize Data with a Heat Map - freeCodeCamp Data Visualization Project Tutorial

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 type ... https://www.youtube.com/watch?v=6uM_wLOayYI