Creating a bar chart

A bar chart is a visualization that uses either horizontal (row charts) or vertical (column charts) rectangular bars with length proportional to the values that they represent. In this recipe, we will implement a column chart using D3. A column chart is capable of visually representing two variables at the same time with its y axis; in other words, the bar height and its x axis. The x axis values can be either discrete or continuous (for example, a histogram). In our example, we choose to visualize continuous values on the x axis. However, the same technique can be applied when you work with discrete values.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter8/bar-chart.html

How to do it...

The following code example shows the important implementation aspects of a histogram, omitting the accessors and peripheral graphic implementation details:

... 
 
var _chart = {};...