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 data"
description: "We finally get to draw our bars! We draw them in groups, so we can position them as well as labels."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/n2blzuzuvd
codeFolder: course/module_02/lesson_02.05/protected/code/03-making-a-bar-chart/end
---

# Draw data

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

Here comes the fun part! Our plan is to create one bar for each bin, with a label on top of each bar.

We'll need one bar for each item in our `bins` array — this is a sign that we'll want to use the **data bind** concept we learned in **Module 2**.

Let's first create a `<g>` element to contain our bins. This will help keep our code organized and isolate our bars in the DOM.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1443 endLine=66 startChar=1405 startLine=66 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.05/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L66 }
const binsGroup = bounds.append("g")
```

Because we have more than one element, we'll bind each data point to a `<g>` SVG element. This will let us group each bin's **bar** and **label**.

To start, we'll select all existing `<g>` elements within our `binsGroup` (_there aren't any yet, but we're creating a selection object that points to the right place_). Then we'll use `.data()` to bind our `bins` to the selection.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1505 endLine=69 startChar=1445 startLine=68 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.05/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L68 }
const binGroups = binsGroup.selectAll("g")
  .data(bins)
```

Next, we'll create our `<g>` elements, using `.join()` to target all of our bins.

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1520 endLine=70 startChar=1445 startLine=68 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.05/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L68 }
const binGroups = binsGroup.selectAll("g")
  .data(bins)
  .join("g")
```

The above code will create one new `<g>` element for each bin. We're going to place our bars within this group.

Next up we'll draw our bars, but first we should calculate any constants that we'll need. Like a warrior going into battle, we want to prepare our weapons before things heat up.

In this case, the only constant that we can set ahead of time is **the padding between bars**. Giving them some space helps distinguish individual bars, but we don't want them too far apart - that will make them hard to compare and take away from the overall shape of the distribution.

T> **Chart design tip:** putting a space between bars helps distinguish individual bars

```javascript { actualFilename=./protected/code/03-making-a-bar-chart/completed/draw-bars.js endChar=1544 endLine=72 startChar=1522 startLine=72 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.05/protected/code/03-making-a-bar-chart/completed/draw-bars.js#L72 }
const barPadding = 1
```

Now we are armed warriors and are ready to charge into battle! Each bar is a rectangle, so we'll append a `<rect>` to each of our `<g>` elements.

We finally get to draw our bars! We draw them in groups, so we can position them as well as labels.