Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Setting up our line chart"
description: We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/taf0vyoe49
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_00/lesson_00.02/protected/code/01-making-your-first-chart?ref_type=heads
---

# Setting up our line chart

<CodeSandboxEmbed
  src="//codesandbox.io/s/diszw?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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.

A>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 `dataset` array: 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:

```javascript { actualFilename=./protected/code/01-making-your-first-chart/completed/chart.js endChar=186 endLine=8 startChar=145 startLine=8 statedFilename=code/01-making-your-first-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_00/lesson_00.02/protected/code/01-making-your-first-chart/completed/chart.js#L8 }
const yAccessor = d => d.temperatureMax
```

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.

We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.