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: "Draw canvas"
description: "Creating our wrapper and bounds elements."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/oimhqb4yl3
codeFolder: course/module_02/lesson_02.03/protected/code/03-making-a-bar-chart/end
---

# Draw canvas

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

Let's create our **wrapper** element. Try to write this code without looking first. Like we've done before, we want to select the existing element, add a new `<svg>` element, and set its **width** and **height**.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=789 endLine=36 startChar=651 startLine=33 statedFilename=code/03-making-a-bar-chart/completed/draw-bars.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_02/lesson_02.03/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L33 }
const wrapper = d3.select("#wrapper")
  .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height)
```

Creating our wrapper and bounds elements.