D3 - Bar Chart

About

Data Visualization - Bar Chart in D3

Articles Related

Example

Html

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

var data= [ 4, 8, 15, 16, 23, 42 ];
d3.select("body")  // We need to get an element
  .append("div").classed("chart", true) // We add the chart graph container element (The div .chart element)
  .selectAll("div") // We select all div but we will get a null selection because their is no div element
  .data(data) // We join the empty selection with the data
  .enter() // Their is no data, therefore only the enter set of the data join contains nodes without element
  .append("div") // We append for each data a div element with the below style
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });