Bar Chart with dynamic bar widths

For http://stackoverflow.com/questions/21142194/d3-bar-chart-with-autosize

by kyuhyun kim

HTML

<div id="chart"/>

JavaScript

var data = [
  {key:1, value:5},
  {key:2, value:10},
  {key:3, value:15},
  {key:4, value:26},
  {key:5, value:33},
  {key:6, value:33},
  {key:7, value:33},
  {key:8, value:33},
  {key:9, value:33},
  {key:10, value:33},
  {key:11, value:33},
  {key:12, value:33},
  {key:13, value:3},
  {key:14, value:33},
  {key:15, value:33},
  {key:16, value:33}
];

var margin = {
 top: 30,
 right: 10,
 bottom: 30,
 left: 30
},

width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
  .domain(data.map(function(d) {
    return d.key;
}))
.rangeRoundBands([margin.left, width], 0.05);

var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
    return d.value;
})])
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var key = function(d) {
return d.key;
 };

 var svg = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right + 10)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .text("Your tooltip info")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(-30," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width)
.attr("dy", 30)
.attr("text-anchor", "end")
.text("Number of nodes");

 svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -30)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Log(Number Sts)");


var barWidth = Math.max(1, 0.9 * x.rangeBand());
var halfGap = Math.max(0, x.rangeBand() - barWidth) / 2;

var bars = svg.selectAll("rect")
 .data(data, key)
 .enter().append("rect")
 .attr("x", function(d) {
    return x(d.key) + halfGap - 30 ;
  })
 .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", barWidth)
  .attr("height", function(d) {
    return height - y(d.value);
  })
...