SimpleBarChart

by thmain

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg class="chart">
</svg>

CSS

.chart rect {
    fill: steelblue;
  }

JavaScript

var scale = {
  y: d3.scale.linear()
};

var totalWidth = 500;
var totalHeight = 200;

scale.y.domain([0, 100]);
scale.y.range([totalHeight, 0]);

var ages = [30, 22, 33, 45];
var barWidth = 20;

var chart = d3.select('.chart')
    .attr({
        'width': totalWidth,
        'height': totalHeight
    });

var bars = chart
    .selectAll('g')
    .data(ages)
    .enter()
    .append('g');

bars.append('rect')
    .attr({
        'x': function (d, i) {
            return i * barWidth;
        },
        'y': scale.y,
        'height': function (d) {
            return totalHeight - scale.y(d);
        },
        'width': barWidth - 1
    });