https://www.youtube.com/watch?v=w5vxVj8g3cs

This is a walkthrough for the 'Visualize Data with a Bar Chart' project on freeCodeCamp, from start to finish. We first create a skeleton project, then import the data using an XMLHTTPRequest and then create a graph from this data with d3.js.

Notes

0:00 - Project Setup

Looking at what we need to create and talking through the structure of the task.

• Create Skeleton Page, set title
• Import D3 and Test Suite
• Create and Link Script Page
• Create and Link Stylesheet
• Create SVG Canvas with id
• Set body display and svg bg

6:00 - Creating Variables and Functions

• URL points to JSON File
• req is XMLHTTPRequest Used for Importing
• data will store response
• values will store array of data
• heightScale will be a scale used to determine the height of the bars
• xScale will be a scale used to determine where the bars are placed on the canvas horizontally
• XAxisScale is used to create the xAxis