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: "Getting set up"
description: "We're going to breeze through the first four steps: accessing our data, creating our dimensions, drawing our canvas, and creating our scales."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/g9bkl4dmkc
codeFolder: course/module_06/lesson_06.01/protected/code/11-radar-weather-chart/end
---

## Getting set up

We've already done a few of the steps, since they should be really familiar by now: we've grabbed our data, created square dimensions, and drawn our canvas.

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

### Accessing the data

To start, let's create our data accessors. Doing this up front will remind us of the structure of our data, and let us focus on drawing our chart later.

Let's look at the first data point by logging it out to our console after we fetch our data:

```javascript
const dataset = await d3.json("./data/my_weather_data.json")
console.table(dataset[0])
```

![Our dataset](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.01/public/images/1-making-your-first-chart/dataset.png)

Since we already know what our final chart will look like, we can pull out all of the metrics we'll need. Let's create an accessor for each of the metrics we'll plot (_min temperature_, _max temperature_, _precipitation_, _cloud cover_, _uv_, and _date_).

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=544 endLine=16 startChar=142 startLine=9 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.01/protected/code/11-radar-weather-chart/completed/chart.js#L9 }
const temperatureMinAccessor = d => d.temperatureMin
const temperatureMaxAccessor = d => d.temperatureMax
const uvAccessor = d => d.uvIndex
const precipitationProbabilityAccessor = d => d.precipProbability
const precipitationTypeAccessor = d => d.precipType
const cloudAccessor = d => d.cloudCover
const dateParser = d3.timeParse("%Y-%m-%d")
const dateAccessor = d => dateParser(d.date)
```

We're going to breeze through the first four steps: accessing our data, creating our dimensions, drawing our canvas, and creating our scales.