Skip to content

Instantly share code, notes, and snippets.

Created July 10, 2014 05:44
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Simple animated bar charts using D3 and data-attributes
<!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); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment