Making Your First Chart
We dig in right away, starting with a timeline of temperature over time. First, we need to get our bearings.
Many courses begin by talking about theory and abstract concepts. This is not one of those courses!
We'll dig in and create real charts right away! Once you're comfortable making your own charts, we'll discuss how to add animations & interactions, data visualization fundamentals, and practical tips for chart design, along with other goodies.
Course Downloads - Code and Book PDFs#
This course has Codepens embedded throughout, so you don't need to download any files to go through it. However, if you want to download offline resources, you will find the links for these here:
👩💻 Download the complete set of code for this course here
🎳 Join us over at the
#d3channel in our Discord server - here.
To start, let's make a line chart. Line charts are a great starting place because of their popularity, but also because of their simplicity.
In this module, we'll create a line chart that plots the daily temperature. Here's what our line chart will look like when we're finished:
In the tutorial below, don't worry too much about the details! We're just going to get our hands dirty and write the code to build this line chart. This will give us a good foundation to dive deeper into each concept in Modules 2 and 3, in which we'll create more complex charts.
The dataset we'll be analyzing contains 365 days of daily weather metrics. To make it easy, we've provided a JSON file with this data which includes 2018 data for New York City.
Let's dig in!
The page should be blank except for one
div with an
wrapper — this is where our chart will live.
Let's open up the
chart.js file in a code editor and dig in.
We don't have much text in here to start with.
The only thing happening so far is that we're defining a function named
drawLineChart() and running it..