Visualize Data with a Scatterplot Graph - freeCodeCamp Data Visualization Project Tutorial

This is a guided walkthrough for the 'Visualize Data with a Scatterplot Graph' challenge on freeCodeCamp. We import some data about doping in bicycle racing, and use d3.js to produce a scatterplot diagram with it. Written Notes and Source Code : https://www.notion.so/ganeshh123/Visualize-Data-with-a-Scatterplot-Graph-f3b277dc35294accb4d42a0358b92009 Timestamps: 0:00 - Project Setup 05:10 - Creating Variables and Functions 08:33 - Fetching JSON Data 12:23 - User Story #1: I can see a title element that has a corresponding id="title" 13:54 - User Story #2: I can see an x-axis that has a corresponding id="x-axis" 18:12 - User Story #3: I can see a y-axis that has a corresponding id="y-axis" 22:47 - User Story #4: I can see dots, that each have a class of dot, which represent the data being plotted 25:00 - User Story #5: Each dot should have the properties data-xvalue and data-yvalue containing their corresponding x and y values 26:38 - User Story #6: The data-xvalue and data-yvalue of each dot should be within the range of the actual data and in the correct data format. For data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects 29:10 - User Story #7: The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis 33:46 - User Story #8: The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis 39:50 - User Story #9: I can see multiple tick labels on the y-axis with %M:%S time format 40:26 - User Story #10: I can see multiple tick labels on the x-axis that show the year 41:07 - User Story #11: I can see that the range of the x-axis labels are within the range of the actual x-axis data 42:40 - User Story #12: I can see that the range of the y-axis labels are within the range of the actual y-axis data 43:37 - Changing the dot colors 46:17 - User Story #13: I can see a legend containing descriptive text that has id="legend" 48:14 - User Story #14: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area 54:50 - User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area 54:50 - User Story #15: My tooltip should have a data-year property that corresponds to the data-xvalue of the active area 56:00 - Final Touches and Styling -————————————————————————————————————- 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) standar ... https://www.youtube.com/watch?v=OvtT4X2L9Fo