Visualize Data with a Heat Map - freeCodeCamp Data Visualization Project Tutorial скачать в хорошем качестве

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/Visu... 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!