Creating a bar chart with D3 and HTML

Now that you have had a quick introduction to D3's basic data-binding mechanisms, let's create some full data visualization examples that will demonstrate the power of D3. You should know HTML very well, so we will start with a simple bar chart using HTML and CSS. Later, we will repeat the exact same procedure using SVG, the main standard used by D3 to create visualizations.

All the code for these examples is available in the GitHub repository for this chapter.

Binding data to HTML

In this example, we will draw a horizontal bar chart using HTML <div> elements. The colors and length of each bar are controlled by CSS, which we can configure using the selection.style() command...