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

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
-————————————————————————————————————-

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!

[StoryTime_Shorts_Official]

4 years later, and this video is still the BEST out of all the tutorials. I like how you explain so well and also keep repeating important concepts to remind us. I find the fact amusing that you sound monotonous, yet we can clearly hear the nervousness and relief every time you turn in the challenge and then complete it successfully.

[HuyenNguyen-bbcg]

Thank you so much for the great series! It helped me to get through the struggles of finishing the projects and know how to apply all the small pieces in the data visualization tutorial in FCC to create a real-world project. Highly appreciate!

[ainzahirah]

You explained it so well and your tutorials are great, thank you! I just want to share that I have issues with User Story #6 and #12 because of my y-axis was showing 7:00 and so on instead of 37:00. After reading a forum on Github, I found out that my system's timezone affected the axis since I'm living in Asia. I've changed my system's time zone to PT and now I've passed the test. I'm still quite not understand it but it works. Hope it helps to others!

[danutzz]

finally a proper video in VS with d3--- great stuff --- cheers!

[peterson]

Thank you for putting this video together - This is the best freecodecamp tutorial I've seen!

[BeansanBling]

The tute is great! Thank you! Just got one question, I followed each step but when hovering over the point, mine shows "undefined - undefined - undefined - undefined", rather than the format of "Year - Name - Time - Doping/No Allegation". Do you know why that is? Thanks!

[TrungLe-kptg]

iIreally like your video. This is the best freecodecamp tutorial

[auroraaurora]

It was well explained. You made me understand D3. Thanks a lot.

[Jack-rdve]

Hi, i am facing a problem. I followed every code in tutorial. but in my yaxis, instead of showing 37:00, 37:15, my browser is showing 07:00, 07:15.
I even copy the source code and added to my editor But it keeps showing 07:00 and so on. Please help me, how can i fix it?

[samuellewis]

I was having this problem with the tooltip displaying undefined, undefined etc. I fixed it by changing the CDN from the latest (7.8.5) to the CDN you use in this video. I don't quite understand why downgrading the D3 version is necessary here, is there there some part of the code that is only part of the older versions of D3? Perhaps the .on() method?

[forenzik]

Thank you mate!
Great explanation.

I've noticed your tooltip method only works with d3 v5.
Using .on('mouseover', d => function) with the current d3 version, the "d" its inspecting is not the data point, but something else !

Also, we are showing the tooltip as a div that is seperate from the chart itself.
How can we make a tooltip whose position depends on the position of the data point itself?
This will make the tooltip hover near the relevant data point instead of at the bottom of the chart.

Even a link to documentation would be appreciated. :) thanks!

[xavierpierre]

I subscribe to your channel to be honnest your way to explain d3 is the best way i have found so far for the moment so it's really well deserve. Thanks to you, I think I will success to understand this js librairies even if after that I will take a look on the long video on fcc channel about d3. In all cases your explaination are awesome. Also i have added for practice a embed when I click to a dot with dopping allegation so the article are display on the pages too. I think d3 is made to be really highly interactif so adding some extra is nice to practice

[lrnzhaa]

This is very useful. Thanks for the concise approach. Very informative and clearly explanatory.
I found that if I used d3 V6 or v7 script instead of v5 used in the video, the tooltip fails to access the data via the callback function(items). Had to revert to v5. This does not happen in previous data callbacks.

[derekthesec]

Very useful tutorial, similar to the bar chart. While not part of the user story, it is good to know about string concatenation in the text part of the tooltip. Can also include additional fields (e.g. Nationality). Can apply stroke styles when hovering over the dots, while still keeping the fill color (e.g. green). The color styles for the dots reminds me of conditional formatting in Excel.
If the URL was blank, apply green, otherwise apply orange.

[JL-fnmk]

I wonder if there is a way to have the tooltips showing up on the graph, right next to the spots rather than in a div at the bottom. I will do some digging. Great tutorial. Much appreciated. Cheers

[adnanibnemannan]

Number 15 is not solved yet. I find the data-year defined in the code in as ' Year' but when i test in code pen it shows an error. can you please brief a little on this? I am talking about your code.
thanks

[tanyadiedericks]

Thank you for the videos it is a great help.
I need help please. My y-axis is not moving to the left. I followed your code and I can not find the issue.

[zawmintun]

I got a problem in User Story#6. new Date() method doesn't work. how to fix it.plz

[MrGros]

Nice Tutorial. I've a questions: My tooltip is undefined - undefined - undefined - undefined. The story#2 of Tooltip doesn't work

[introvertedperson]

I love your videos - the only thing is that bothers me is that the sounds of your keyboard is way too loud and is really annoying. but again, the content is great !