Last Updated: February 25, 2016

Simple animated bar charts using D3 and data-attributes

D3 is incredible powerful, but sometimes all you need is a bar chart. This snippet allows you to define one in a very declarative way.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .chart {
    height: 70px;
    width: 300px;
    border-bottom: 1px solid #ccc;
    display: block;
    margin: 1em;
  }
  .chart .bar {
    fill: #ccc;
  }
</style>
<svg class="chart" data-bar-chart data-data="23,43,10,13,10,20,30,23,43,10,13,10,20,30" data-bar-width="15"></svg>
<svg class="chart" data-bar-chart data-data="19,65,23,31,32,44,5,32,23,23,54,65" data-bar-width="15"></svg>
<svg class="chart" data-bar-chart data-data="34,43,65,21,5,43,43,32,32,12,31,32,12,32,23,12" data-bar-width="15"></svg>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

  $('[data-bar-chart]').each(function (i, svg) {
    var $svg = $(svg);
    var data = $svg.data('data').split(',').map(function (datum) {
      return parseFloat(datum);
    });

    var barWidth = parseFloat($svg.data('bar-width')) || 15;
    var barSpace = parseFloat($svg.data('bar-space')) || 0.5;
    var chartHeight = $svg.outerHeight();

    var y = d3.scale.linear()
              .domain([0, d3.max(data)])
              .range([0, chartHeight]);

    d3.select(svg)
      .selectAll("rect")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("width", barWidth)
        .attr("x", function (d, i) { return barWidth*i + barSpace*i; })
        .attr("y", chartHeight)
        .attr("height", 0)
        .transition()
        .delay(function (d, i) { return i*100; })
        .attr("y", function (d, i) { return chartHeight-y(d); })
        .attr("height", function (d) { return y(d); });
  });
</script>

http://bl.ocks.org/ link