Setting up our line chart
We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.
Setting up our line chart#
Let's dig in by looking at
temperatureMax over time. Our timeline will have two axes:
a y axis (vertical) on the left comprised of max temperature values
an x axis (horizontal) on the bottom comprised of dates
To grab the correct metrics from each data point, we'll need accessor functions. Accessor functions convert a single data point into the metric value.
Lets try it out by creating a
yAccessor function that will take a data point and return the max temperature.
If you think of a dataset as a table, a data point would be a row in that table. In this case, a data point represents an item in our
datasetarray: an object that holds the weather data for one day.
We will use
yAccessor for plotting points on the y axis.
Looking at the data point in our console, we can see that a day's max temperature is located on the object's
temperatureMax key. To access this value, our
yAccessor function looks like this:
Next, we'll need an
xAccessor function that will return a point's date, which we will use for plotting points on the x axis.
But look closer at the data point
date value - notice that it is a string (eg.
"2018-12-25"). Unfortunately, this string won't make sense on our x axis. How could we know how far
"2018-12-25" is from
takes a string specifying a date format, and
outputs a function that will parse dates of that format.
d3.timeParse("%Y") will parse a string with just a year (eg.
Let's create a date parser function and use it to transform our date strings into date objects:
Great! Now when we call
xAccessor(dataset), we'll get the first day's date.
If you look up d3 examples, you won't necessarily see accessor functions used. When I first started learning d3, I never thought about using them. Since then, I've learned my lesson and paid the price of painstakingly picking through old code and updating individual lines. I want to save you that time so you can spend it making even more wonderful charts.
Defining accessor functions might seem like unnecessary overhead right now, especially with this simple example. However, creating a separate function to read the values from our data points helps us in a few ways.
Easy changes: every chart is likely to change at least once — whether that change is due to business requirements, design, or data structure. These changing requirements are especially prevalent when creating dashboards with dynamic data, where you might need to handle a new edge case two months later. Having the accessor functions in one place at the top of a chart file makes them easy to update throughout the chart.
Documentation: having these functions at the top of a file can give you a quick reminder of what metrics the chart is plotting and the structure of the data.
Framing: sitting down with the data and planning what metrics we'll need to access is a great way to start making a chart. It's tempting to rush in, then two hours later realize that another type of chart would be better suited to the data.
Now that we know how to access our dataset, we need to prepare to draw our chart.