D3 Tutorial #5

by Johnny Lee

HTML

<div class="chart"></div>

CSS

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

JavaScript

var data = [50, 10, 100, 40, 80, 20];
var maxWidth = 
	document.getElementsByClassName('chart')[0].offsetWidth - 10;
var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([10, maxWidth]);
d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append('div')
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });