maaquib/index.html

## index.html
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .bar.positive {
	  fill: steelblue;
	}

	.bar.negative {
	  fill: brown;
	}

	.axis text {
	  font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}
  </style>


<script type="text/javascript">
window.onload=function(){
	var data = [-15, 20, -22, 18, -2, 6, -26, 18];
	var dataNew = [-25, 30, -32, 28, -12, 16, -36, 29];

	var margin = {top: 30, right: 10, bottom: 10, left: 30},
	    width = 320 - margin.left - margin.right,
	    height = 250 - margin.top - margin.bottom;

	var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));
	y0 = Math.max(y0, Math.max(Math.abs(d3.min(dataNew)), Math.abs(d3.max(dataNew))));
	var y = d3.scale.linear()
	    .domain([-y0, y0])
	    .range([height,0])
	    .nice();

	var x = d3.scale.ordinal()
	    .domain(d3.range(data.length * 2))
	    .rangeRoundBands([0, width], .1);

	var yAxis = d3.svg.axis()
	    .scale(y)
	    .orient("left");

	var svg = d3.select("body").append("svg")
	    .attr("width", width + margin.left + margin.right)
	    .attr("height", height + margin.top + margin.bottom)
	    .append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.selectAll("rect")
	    .data(data)
	    .enter().append("rect")
	    .attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
	    .attr("y", function(d) { return y(0); })
	    .attr("x", function(d, i) {
	        if (d < 0) { return x(i)/2; }
	        else { return x(i-1)/2; }
	    })
	    .attr("width", x.rangeBand())
	    .attr("height", 0)
	    .transition().delay(function (d,i){
	        if (d < 0) { return i * 300 + data.length * 300; }
	        else {return i * 300;}
	    })
	    .duration(700)
	    .attr("height", function(d) { return Math.abs(y(d) - y(0)); })
	    .attr("y", function(d) { return y(Math.max(0, d)); });

	var bars = svg.selectAll("rect")
	    .data(dataNew, function(d) {return d;}).enter().append("rect")
	    .attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
	    .attr("y", function(d) { return y(0); })
	    .attr("x", function(d, i) {
	        if (d < 0) { return x(i)/2 + x(data.length-1)/2 + margin.left; }
	        else { return x(i-1)/2 + x(data.length-1)/2 + margin.left; }
	    })
	    .attr("width", x.rangeBand())
	    .attr("height", 0)
	    .transition().delay(function (d,i){
	        if (d < 0) { return i * 300 + 3 * data.length * 300; }
	        else {return i * 300 + 2 * data.length * 300;}
	    })
	    .duration(500)
	    .attr("height", function(d) { return Math.abs(y(d) - y(0)); })
	    .attr("y", function(d) { return y(Math.max(0, d)); });

	svg.append("g")
	    .attr("class", "y axis")
	    .call(yAxis);

	svg.append("g")
	    .attr("class", "x axis")
	    .append("line")
	    .attr("y1", y(0))
	    .attr("y2", y(0))
	    .attr("x1", 0)
	    .attr("x2", width);
}
</script>
</head>
<body></body>
	<html><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	.bar.positive {
	fill: steelblue;
	}

	.bar.negative {
	fill: brown;
	}

	.axis text {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>



	<script type="text/javascript">
	window.onload=function(){
	var data = [-15, 20, -22, 18, -2, 6, -26, 18];
	var dataNew = [-25, 30, -32, 28, -12, 16, -36, 29];

	var margin = {top: 30, right: 10, bottom: 10, left: 30},
	width = 320 - margin.left - margin.right,
	height = 250 - margin.top - margin.bottom;

	var y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data)));
	y0 = Math.max(y0, Math.max(Math.abs(d3.min(dataNew)), Math.abs(d3.max(dataNew))));
	var y = d3.scale.linear()
	.domain([-y0, y0])
	.range([height,0])
	.nice();

	var x = d3.scale.ordinal()
	.domain(d3.range(data.length * 2))
	.rangeRoundBands([0, width], .1);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
	.attr("y", function(d) { return y(0); })
	.attr("x", function(d, i) {
	if (d < 0) { return x(i)/2; }
	else { return x(i-1)/2; }
	})
	.attr("width", x.rangeBand())
	.attr("height", 0)
	.transition().delay(function (d,i){
	if (d < 0) { return i * 300 + data.length * 300; }
	else {return i * 300;}
	})
	.duration(700)
	.attr("height", function(d) { return Math.abs(y(d) - y(0)); })
	.attr("y", function(d) { return y(Math.max(0, d)); });

	var bars = svg.selectAll("rect")
	.data(dataNew, function(d) {return d;}).enter().append("rect")
	.attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
	.attr("y", function(d) { return y(0); })
	.attr("x", function(d, i) {
	if (d < 0) { return x(i)/2 + x(data.length-1)/2 + margin.left; }
	else { return x(i-1)/2 + x(data.length-1)/2 + margin.left; }
	})
	.attr("width", x.rangeBand())
	.attr("height", 0)
	.transition().delay(function (d,i){
	if (d < 0) { return i * 300 + 3 * data.length * 300; }
	else {return i * 300 + 2 * data.length * 300;}
	})
	.duration(500)
	.attr("height", function(d) { return Math.abs(y(d) - y(0)); })
	.attr("y", function(d) { return y(Math.max(0, d)); });

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("g")
	.attr("class", "x axis")
	.append("line")
	.attr("y1", y(0))
	.attr("y2", y(0))
	.attr("x1", 0)
	.attr("x2", width);
	}
	</script>
	</head>
	<body></body>