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">
  .chart {
    height: 70px;
    width: 300px;
    border-bottom: 1px solid #ccc;
    display: block;
    margin: 1em;
  .chart .bar {
    fill: #ccc;
<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=""></script>
<script src=""></script>

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

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

    var y = d3.scale.linear()
              .domain([0, d3.max(data)])
              .range([0, chartHeight]);
        .attr("class", "bar")
        .attr("width", barWidth)
        .attr("x", function (d, i) { return barWidth*i + barSpace*i; })
        .attr("y", chartHeight)
        .attr("height", 0)
        .delay(function (d, i) { return i*100; })
        .attr("y", function (d, i) { return chartHeight-y(d); })
        .attr("height", function (d) { return y(d); });



Now read this

Storing nested objects in Redis

Since Redis supports the usage of a Hash Tables, one dimensional JavaScript-like objects can be modeled it quite easily. The problem though is that hash tables can’t be nested - at least in Redis. Assume we have the following JavaScript... Continue →