Visualize Data with a Bar Chart - freeCodeCamp Data Visualization Project Tutorial

This is a walkthrough for the 'Visualize Data with a Bar Chart' project on freeCodeCamp, from start to finish. We import the data using an XMLHTTPRequest and then create a graph from this data with d3.js.
Source Code : https://www.notion.so/ganeshh123/Visualize-Data-with-a-Bar-Chart-9e5ef4f33375409580a80f659cd8aa93
Timestamps:
0:00 - Project Setup
6:00 - Creating Variables and Functions
10:56 - Fetching JSON Data
14:46 - User Story #1: My chart should have a title with a corresponding id="title"
17:00 - Creating a Scale for Bar Height
20:14 - Creating a Scale for Horizontally Placing Bars
22:23 - Creating a Scale for the x-axis of Dates
27:13 - Creating a Scale for the y-axis of GDP
29:42 - User Story #2: My chart should have a g element x-axis with a corresponding id="x-axis"
34:40 - User Story #3: My chart should have a g element y-axis with a corresponding id="y-axis"
37:39 - User Story #4: Both axes should contain multiple tick labels, each with the corresponding class="tick"
38:12 - User Story #5: My chart should have a rect element for each data point with a corresponding class="bar" displaying the data
41:43 - User Story #6: Each bar should have the properties data-date and data-gdp containing date and GDP values. User Story #6: Each bar should have the properties data-date and data-gdp containing date and GDP values. User Story #8: The bar elements' data-gdp properties should match the order of the provided data.
44:41 - User Story #9: Each bar element's height should accurately represent the data's corresponding GDP.
46:42 - User Story #10: The data-date attribute and its corresponding bar element should align with the corresponding value on the x-axis.
48:29 - User Story #11: The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
51:24 - User Story #12: I can mouse over an area and see a tooltip with a corresponding id="tooltip" which displays more information about the area.
57:37 - User Story #13: My tooltip should have a data-date property that corresponds to the data-date of the active area.
1:00:13 - 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!