Making Your First Chart

We dig in right away, starting with a timeline of temperature over time. First, we need to get our bearings.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

  • |

Lesson Transcript

  • [00:00 - 00:09] So a lot of courses start by talking about theory and abstract concepts. This is not one of those courses we're going to dig in right away and start making our first chart right now.

  • [00:10 - 00:21] So for our first chart we're going to make a timeline. Timelines are really good because line charts are really popular and they're fairly simple as far as charts go.

  • [00:22 - 00:30] So in this module we're going to create a line chart that plots the daily temperature over time. It's going to look something like this when we're finished.

  • [00:31 - 00:45] Don't worry too much about the details. We're just going to get our hands dirty and write the code to get us started and build our first chart. This will give us a good foundation and then we'll dive in deeper to each concept in the next two modules.

  • [00:46 - 00:59] The data set will be analyzing contains 365 days of daily weather metrics to make it easy. We provide the JSON file with this data and it has data for 2018 in New York City.

  • [01:00 - 01:12] Alright, so first find the index dot HTML file. This is going to be a very simple web page. Let's close that sidebar so we can focus on the code.

  • [01:13 - 01:22] And you can see in here really simple we have a title. We have the body. We have a div with an ID of wrapper.

  • [01:23 - 01:32] And we'll see why later and we're also importing this chart dot JS file. So if we look at this JavaScript file right here.

  • [01:33 - 01:41] It's also really simple. We're just importing D3 and then we have this draw line chart function that we're going to be filling out throughout this module.