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: "Digging in"
description: "We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data"
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/ay9cbnrdvs
codeFolder: course/module_07/lesson_07.02/code/draft
---

# Digging in

Our code for this chapter is a very bare bones React app. You should see an empty dashboard with three placeholders — one for a timeline, one for a scatter plot, and one for a histogram.

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

When we're finished, our dashboard will look like this:

![Finished dashboard](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_07/lesson_07.02/public/images/13-using-d3-with-react-js/finished-dashboard.png)

Within the `src` folder, we have an `App` component that is loading random data and updating it every four seconds — this will help us design our chart transitions.

Our chart-making plan has four levels of components:

1.  **App**, which will decide what our dataset is and how to access values for our axes (accessors),
2.  **Timeline**, **ScatterPlot**, or **Histogram** which will be re-useable components that decide how a specific type of chart is laid out and what goes in it,
3.  **Chart**, which will pass down chart dimensions, and
4.  **Axis**, **Line**, **Bars**, etc., which will create individual components within our charts.

We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data