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: "Drawing our chart"
description: "To set up our chart environment, we learn why we need two containers: wrapper and bounds."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/uh4m3itqg6
code: https://gitlab.com/fullstackio/books/newline-course-apps/amelia-wattenberger-fullstack-d3-masterclass-app/-/tree/main/code/module_00/lesson_00.03/protected/code/01-making-your-first-chart?ref_type=heads
---

# Drawing our chart

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

When drawing a chart, there are two containers whose dimensions we need to define: the wrapper and the bounds.

![Chart dimensions](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_00/lesson_00.03/public/images/1-making-your-first-chart/terminology.png)

The **wrapper** contains the entire chart: the data elements, the axes, the labels, etc. Every SVG element will be contained inside here.

The **bounds** contain all of our data elements: in this case, our line.

This distinction will help us separate the amount of space we need for extraneous elements (axes, labels), and let us focus on our main task: plotting our data. One reason this is so important to define up front is the inconsistent and unfamiliar way SVG elements are sized.

When adding a chart to a webpage, we start with the amount of space we have available for the chart. Then we decide how much space we need for the margins, which will accommodate the chart axes and labels. What's left is how much space we have for our data elements.

To set up our chart environment, we learn why we need two containers: wrapper and bounds.