Learn D3.js

More labels, formatting, and colors

Each object in our data array also contains a name property that can be used to label each bar. To position text outside the bar, we will need to refactor the code so that each data entry contains a container <div>, which will be bound to the data values. This entry <div> will then contain three other <div> elements: a category label (the name of the planet), the bar, and a value label (the distance). Classes will be used to identify each <div>. The following style sheet contains the static properties for these elements:

<style>    .bar-chart {         /* The container <div> for the entire chart /        border: solid 1px gray;        position: relative;        width: 800px;    }    .entry {             /* a container <div> for each data entry / position: ...