D3.js tween & interpolate
HTML
<div id="bar"></div>
CSS
#bar {
height: 20px;
width: 20px;
background: #2394F5;
margin: 15px;
}
JavaScript
d3.select("#bar").transition()
.duration(1000)
.tween("width", function() {
var i = d3.interpolate(20, 400);
var ci = d3.interpolate('#2394F5', '#BDF436');
return function(t) {
console.log(t);
this.style.width = i(t) + 'px';
this.style.background = ci(t);
};
});