D3.js: Cutting-edge Data Visualization

Chapter 4. Creating a Bar Graph

Now that we have examined binding data and generating SVG visuals with D3, we will turn our attention to creating a bar graph using SVG in this chapter. The examples in this chapter will utilize an array static of integers, and use that data to calculate the height of bars, their positions, add labels to the bars, and add margins and axes to the graph to assist the user in understanding the relationships in the data.

In this chapter, we will cover the following topics:

• Creating a series of bars that are bound to data
• Calculating the position and height of the bars
• Using a group to uniformly position multiple elements representing a bar
• Adding margins to the graph
• Creating and manipulating the style and labels in an axis ...