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: "Extra credit"
description: "We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/le1279eeax
codeFolder: course/module_02/lesson_02.08/protected/code/03-making-a-bar-chart/end
---

# Extra credit

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

Let's generalize our histogram drawing function and create a chart for each weather metric we have access to! This will make sure that we understand what every line of code is doing.

Generalizing our code will also help us to start thinking about handling dynamic data — a core concept when building a dashboard. Drawing a graph with a specific dataset can be difficult, but you get to rely on values being the same every time your code runs. When handling data from an API, your charting functions need to be more robust and able to handle very different datasets.

![Finished histogram](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_02/lesson_02.08/public/images/3-making-a-bar-chart/histogram-finished.png)

Here's the good news: we won't need to rewrite the majority of our code! The main difference is that we'll wrap most of the chart drawing into a new function called `drawHistogram()`.

Which steps do we need to repeat for every chart? Let's look at our checklist again.

1.  **Access data**
2.  **Create dimensions**
3.  **Draw canvas**
4.  **Create scales**
5.  **Draw data**
6.  **Draw peripherals**
7.  **Set up interactions**

All of the histograms will use the same dataset, so we can skip step **1**. And every chart will be the same size, so we don't need to repeat step **2** either. However, we want each chart to have its own **svg** element, so we'll need to wrap everything after step **2** .

A>In the next section, we'll cover ways to make our chart more accessible. We'll be working on the current version of our histogram - make a copy of your current finished histogram in order to come back to it later.

Let's do that — we'll create a new function called `drawHistogram()` that contains all of our code, starting at the point we create our svg. Note that the finished code for this step is in the `/code/03-making-a-bar-chart/completed-multiple/draw-bars.js` file if you're unsure about any of these steps.

We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics.