Animated stacked bar charts with D3.js




Size and margins

_chartMargin={left:40, top:25, bottom:45, right:0};;
_chartSize.width=880-_chartMargin.left-_chartMargin.right;"svg#chart").append('g').attr("transform", "translate(" + _chartMargin.left + "," + + ")");

Scales and Axis

.rangeRoundBands([0, _chartSize.width],0);

_xAxis = d3.svg.axis()
.tickFormat(function(i) {
return _data[i].label;
_y=d3.scale.linear().domain([0,d3.max(_data, function(d){ return d.ritardo+d.attesa+d.pagate })])           

_yAxis = d3.svg.axis()

Selections and data binding

//create a placeholder for
var g=_chartD3.append("g").attr(“class”, “placeholder”);

//join data with selection
var bars=g.selectAll("") .data(_data);

//create elements if not exists
.attr("class", "bar")
.attr("transform", function(d, i) { return "translate(" + (_x(i) + 40) + ","+_chartSize.height+")"; })

Update and animation

// change the y axis'y.axis').transition()

Consideration and tips




Software engineer. Head of tech @everli

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Massimiliano Pesente

Massimiliano Pesente

Software engineer. Head of tech @everli

More from Medium

Create Sparkline Charts with JavaScript

Visualizing Audio Features of Spotify Tracks using D3.js

Tailwind.css basics

Create Dynamic HTML Tables