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: "Loading the weather dataset"
description: First things first, we learn how to load our dataset and look at the structure.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/r3nibf0dgh
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_00/lesson_00.01/protected/code/01-making-your-first-chart?ref_type=heads
---

# Loading the weather dataset

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

**The first step to visualizing any dataset is understanding its structure.** To get a good look at our data, we need to import it into our webpage. To do this, we will load the JSON file that holds our data.

D3.js has methods for fetching and parsing files of different formats in the [**d3-fetch**](https://github.com/d3/d3-fetch) module, for example, `d3.csv()`, `d3.json()`, and `d3.xml()`. Since we're working with a JSON file, we want to pass our file path to `d3.json()`.

Let's create a new variable named `dataset` and load it up with the contents of our JSON file.

```javascript { actualFilename=./protected/code/01-making-your-first-chart/completed/chart.js endChar=143 endLine=6 startChar=81 startLine=6 statedFilename=code/01-making-your-first-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_00/lesson_00.01/protected/code/01-making-your-first-chart/completed/chart.js#L6 }
const dataset = await d3.json("./data/my_weather_data.json")
```

First things first, we learn how to load our dataset and look at the structure.