D3.JS Animating the bars in a bar chart - d3.js

Question

I am trying to create a bar char which animates the bars to load one after the other. I have got this far(shown in JSFiddle), but the transitions are not smooth. Please let me know what changes are to be done to make the animations more smooth.
CSS:
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: #41a2d3;
}
.x.axis path {
display: none;
}
.tipsy-inner {
text-align: left;
}
.tipsy-inner a {
color: white;
}
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
SCRIPT:
var jsonData = [{"dist":"NE_BLR1","bscore":93.707634,"cscore":88.206},{"dist":"NE_BLR2","bscore":2.9553592,"cscore":28.037703},{"dist":"NE_BLR3","bscore":6.6249013,"cscore":60.771496},{"dist":"NE_BLR4","bscore":90.87391,"cscore":86.42939},{"dist":"NE_BLR5","bscore":81.874275,"cscore":1.5155494},{"dist":"NE_BLR6","bscore":11.794424,"cscore":11.316788},{"dist":"NE_BLR7","bscore":42.103214,"cscore":42.328335},{"dist":"NE_BLR8","bscore":96.59683,"cscore":2.5692165},{"dist":"NE_BLR9","bscore":80.03519,"cscore":34.86772},{"dist":"NE_BLR10","bscore":67.834175,"cscore":39.31076},{"dist":"NE_BLR11","bscore":26.525862,"cscore":18.048836},{"dist":"NE_BLR12","bscore":14.0657425,"cscore":29.272057},{"dist":"NE_BLR13","bscore":20.054913,"cscore":53.572613},{"dist":"NE_BLR14","bscore":11.77302,"cscore":66.45609},{"dist":"NE_BLR15","bscore":81.25657,"cscore":77.80638},{"dist":"NE_BLR16","bscore":47.63029,"cscore":1.1937499},{"dist":"NE_BLR17","bscore":79.54459,"cscore":81.614},{"dist":"NE_BLR18","bscore":94.08074,"cscore":80.3455},{"dist":"NE_BLR19","bscore":55.68032,"cscore":89.06907},{"dist":"NE_BLR20","bscore":45.28445,"cscore":45.069145},{"dist":"NE_BLR21","bscore":82.41166,"cscore":59.125107},{"dist":"NE_BLR22","bscore":33.733047,"cscore":93.37988},{"dist":"NE_BLR23","bscore":98.53198,"cscore":18.078703},{"dist":"NE_BLR24","bscore":83.15471,"cscore":40.400578},{"dist":"NE_BLR25","bscore":3.6420703,"cscore":45.9239},{"dist":"NE_BLR26","bscore":56.563927,"cscore":83.02267},{"dist":"NE_BLR27","bscore":10.62563,"cscore":76.39983},{"dist":"NE_BLR28","bscore":83.05605,"cscore":91.5188},{"dist":"NE_BLR29","bscore":99.7658,"cscore":32.68316},{"dist":"NE_BLR30","bscore":79.63283,"cscore":78.877335},{"dist":"NE_BLR31","bscore":27.242237,"cscore":51.338135},{"dist":"NE_BLR32","bscore":69.210144,"cscore":11.239213},{"dist":"NE_BLR33","bscore":6.4760566,"cscore":53.43964},{"dist":"NE_BLR34","bscore":60.054676,"cscore":18.344189},{"dist":"NE_BLR35","bscore":93.7649,"cscore":99.91859},{"dist":"NE_BLR36","bscore":30.083233,"cscore":91.4337},{"dist":"NE_BLR37","bscore":80.51691,"cscore":28.400452},{"dist":"NE_BLR38","bscore":19.416237,"cscore":44.272415},{"dist":"NE_BLR39","bscore":79.10841,"cscore":60.43038},{"dist":"NE_BLR40","bscore":1.789844,"cscore":89.061325},{"dist":"NE_BLR41","bscore":14.223904,"cscore":4.383576},{"dist":"NE_BLR42","bscore":88.20337,"cscore":97.80883},{"dist":"NE_BLR43","bscore":18.071491,"cscore":62.987053},{"dist":"NE_BLR44","bscore":30.62138,"cscore":87.54846},{"dist":"NE_BLR45","bscore":17.996502,"cscore":1.733619},{"dist":"NE_BLR46","bscore":88.58935,"cscore":67.55461},{"dist":"NE_BLR47","bscore":85.947365,"cscore":1.1164486},{"dist":"NE_BLR48","bscore":3.997153,"cscore":2.8819382},{"dist":"NE_BLR49","bscore":48.500816,"cscore":21.182537},{"dist":"NE_BLR50","bscore":88.485214,"cscore":92.17681}];
var results,
data = [],
chart,
bars,
tip,
margin = 100,
w = 15,
h = 500,
count= 0,
x, y,
xAxis, yAxis;
results = d3.map( jsonData );
results.forEach( function( key, val ) {
var result = {};
count = count+1;
result.count = parseInt(count);
result.bscore = parseFloat( val.bscore );
result.cscore = parseFloat( val.cscore );
result.dist = val.dist;
data.push( result );
} );
chart = d3.select("body").append( 'svg:svg' )
.attr( 'class', 'chart' )
.attr( 'width', 1300 )
.attr( 'height', h )
.append('g');
d3.select('svg g')
.attr('transform', 'translate(50, 50)');
x = d3.scale.linear()
.domain( [0, data.length] )
.range( [0, 960] );
y = d3.scale.linear()
.domain( [0, d3.max( data, function( d ) { return d.bscore; } )] )
.rangeRound( [h - margin, 0] );
chart.append("g")
.attr("class", "grid")
.call(d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
.tickSize(-1000, 0, 0)
.tickFormat("")
)
.attr("stroke-width", "0.2px");
// Bars
bars = chart.append('g')
.attr('class', 'bars');
// Axis
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
yAxis = d3.svg.axis()
.scale(y)
.orient("left");
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + (h) + ')')
.call(xAxis);
chart.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + x.range()[0] + ')')
.call(yAxis);
bars.selectAll( 'rect' )
.data( data )
.enter()
.append( 'svg:rect' )
.attr('class', 'bar')
.attr( 'x', function( d ) { return x( d.count );} )
.attr( 'width', w )
.transition()
.delay(function (d,i){ return i * 300;})
.duration(250)
.attr("y", function(d) { return y( d.bscore ); })
.attr( 'height', function( d ) { return (h - margin) - y( d.bscore ); } );
JSFiddle: http://jsfiddle.net/pg77k/8/
TYIA

Answer 1

You need to initialise the values of y and height to what you want them to be at the start of the transition:
.attr( 'height', 0 )
.attr("y", h - margin)
Complete demo here.