D3 : Animated Bar Chart

D3 Animated Bar Chart

<!DOCTYPE html>
<html>
<head>
	<title>D3 : Animated Bar Chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style type="text/css">
		#chartarea {
			height: 400px;
			width: 600px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<svg id="chartarea"></svg>
	
	<script type="text/javascript">
		var data = d3.range(256).map(function () {
			return Math.random();
		});

var height = 400;
		var width = 600;
		var barPadding = 2;
		var barWidth = (width / data.length) - barPadding;

var yScale = d3.scale.linear()
			.domain([0, d3.max(data)])
			.range([0, height]);

var xScale = d3.scale.ordinal()
			.domain(data)
			.rangeBands([0, width], 0.1, 0.3);

var svg = d3.select("#chartarea")
			.style('width', width + 'px')
			.style('height', height + 'px');

svg.selectAll('rect')
			.data(data)
			.enter()
			.append('rect')
			.attr('class', 'bar')
			.attr("x", function (d, i) {
				return xScale(d);
			})
			.attr("y", function (d, i) {
				return height;
			})
			.attr("width", function (d, i) {
				return xScale.rangeBand()
			})
			.attr("fill", function (d, i) {
				return 'rgb(256, ' + Math.round(i / 2) + ', ' + i + ')'
			})
			.attr("height", 0)
			.transition()
			.duration(200)
			.delay(function (d, i) {
				return i * 50;
			})
			.attr("y", function (d, i) {
				return height - yScale(d);
			})
			.attr("height", function (d, i) {
				return yScale(d);
			});
	</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js