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 : [ Ссылка ]
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) 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!

свернуть