Chapter 2. Creating a Bar Chart Using D3.js and SVG

In this chapter, you will learn how to create a bar chart, including proper axis and scales—this requires some basic knowledge in D3, which will also be covered here. You will learn the following:

• How to select and transform DOM elements using D3

• How to use D3 with SVG elements

• How to use a data-driven approach to create visualizations

• How to use data binding and data joins

• How to use dynamic properties

• How to draw lines, areas, and arcs

• How to use scales

• How to draw axis

• How to create a bar chart

First, we will start with some simple DOM selections and transformations of HTML elements and continue creating SVG elements using D3. We will also see how to bind data to the DOM and apply data-driven transformations using data joins and dynamic properties.

In the second section, we will see one of the built-in SVG abstractions in D3—the so-called generator functions—especially line, area, and arc generators. These abstractions facilitate working with shapes...

Getting started with D3.js

In this chapter, we will create our first bar chart using D3.js and SVG; however, to get there, we will have to go through some basics. These basic concepts are very important because they will give you the freedom to create visualizations for almost everything that you have in your mind. The more of them you know and understand, the more crazy things you can do with D3.

D3.js is a powerful JavaScript library for data-driven DOM manipulations and includes predefined abstractions, transformations, and helpers to work with SVG elements. This makes it an excellent library to write interactive data visualization components using web standards and the complete capabilities of modern web browsers.

Don't worry if you think that this definition is full of fancy buzzwords because in this section, we will walk through all of them. You will understand exactly what they mean and why this makes D3 and SVG a great combination to create visualizations.

Selecting and manipulating...

Drawing shapes with D3

D3 is a great library to create web visualizations because it includes a lot of useful abstractions when working with SVG elements. In this section, we will look at some of these SVG abstractions to draw shapes. These abstractions for drawing shapes are called generators in D3; we will mainly use the line-, area-, and arc-generators when creating visualizations.

Note

All SVG shape abstractions can be found in the D3 Github page at https://github.com/mbostock/d3/wiki/API-Reference#d3svg-svg.

Drawing Lines and Curves

If you've ever used the SVG path element and the d attribute to create custom shapes or Bézier curves, you already know that this is not as easy as it should be. Those who have never used the SVG path element only need to know that you would have to learn a special syntax to define and concatenate control points for a Bézier curve.

Note

You can find more information about the d attribute on MDN at https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d.

Thankfully...

Creating Scales and Axis

D3 is often mistaken for a charting library, which is not really correct. D3 provides loads of built-in functions to easily create interactive charts; however, it is not a charting library. One of these typical built-in charting helpers are the closely related Scales and axis generators. You will learn about them in this section.

At the end of this section, we want to be able to draw a simple axis as the one in the following figure. Therefore, we need to scale our dataset to a specific pixel range (using Scales) and create all the SVG elements for the axis (using axis generators):

Axis in D3

Mapping data values to a Pixel Range with scales

The concept of scales is very important when we deal with graphics and visualization. It is a common task to scale values from a certain domain to a certain range of pixels. We need them to create tick values on axes, and we need them to scale our data points to the area of the chart.

The following figure explains the problem a little...

A simple bar chart

Congratulations, you've gathered all the knowledge to build your first bar chart; and this is exactly what we will do in this section. In the following figure, we will create a bar chart that has axis, scales, bars, and labels.

A simple bar chart

Let's start with a simple setup—a blank HTML page that loads the D3 library from the bower components directory. In addition, we define the crispEdges rendering for path elements in the header:

<!doctype HTML>
<html>
<head>
<title>Bar Chart</title>
<script src="bower_components/d3/d3.min.js"></script>

<style>
      .axis path, .axis line {
        fill: none;
        stroke: #999;
        shape-rendering: crispEdges;
      }
      .data rect {
        stroke: red;
        fill: rgba(255, 0, 0, 0.5);
      }
</style>

</head>
<body>
<script>
    // Our code goes here
</script>
</body>
</html>

Now, we can start to write JavaScript inside the script...

Summary

In this chapter, you learned how to select DOM elements and do data-driven transformations using data joins and dynamic properties. We also saw how to use shape and axis generator functions to quickly create common shapes such as lines or areas.

In the end of this chapter, we built our first simple (almost) responsive bar chart. The bar chart already adapts to the width of the browser window on the page load, but it doesn't get recomputed when we change the browser dimensions.

In the next chapter, we will take a look at loading, filtering, and grouping data. This is very important because almost always we will have to load remote data in a certain format (such as CSV) and then process, filter, or group it afterwards in order to visualize it.