Learn D3.js

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. We will use the object array containing planetary distances from the last example. First, let's create a style sheet with classes for the bar-chart and each individual bar:

<style>    .bar-chart {        border: solid 1px gray; /* a gray border around the container */        position: relative;    }    .bar {        height: 20px;        background-color: orange;        position: absolute;    }</style>

The bars are positioned absolutely. Since each bar has an equal height (20px), we need to position each bar slightly below the previous one. This can be achieved by setting ...