D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
veltman
Full window
Github gist
styleTween for percentages
<!DOCTYPE html> <meta charset="utf-8"> <style> div { height: 10px; background-color: steelblue; } div div { background-color: tomato; } </style> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var data = [ [70,30], [30,70] ]; var bars = d3.selectAll("div") .data(data) .enter() .append("div") .append("div") .style("width",function(d){ return d[0]+"%"; }); bars.transition() .duration(1000) .ease("exp-out") .styleTween("width",function(d){ return function(t) { return (d[0] * (1 - t) + d[1] * t)+"%"; }; }); </script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js