kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
		fill:none;
		stroke:#000;
	}
	#xaxis text, #yaxis text {
		font-size: 12px;
	}
	#xaxis .domain{
		display:none;
	}
	</style>
</head>
<body>
	<div id="wrapper">
	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var canvas = d3.select('#wrapper')
						.append('svg')
						.attr({'width':1100,'height':650});
		var area = d3.svg.area()
						.interpolate('linear-closed')
						.x1(function(d){ return d.x; })
						.y1(function(d){ return d.y; });
		var max1 = 454, max2 = 70, may = 200;
		var colors = d3.scale.category10();
		var yx = d3.scale.linear()
						.domain([0,may])
						.range([0,(may*1.15)]);
		var px = function(d,i){ return d+(10*i); };
		var nx = function(d,i){ return d-(10*i); };
		var layers = d3.range(8).map(function(val,ind){
		  return {"values":[
		    {'x':px(max2,val),'y':yx(may)},
		    {'x':nx(max1,val),'y':yx(may)},
		    {'x':nx(px(max1,1),val),'y':may},
		    {'x':px(nx(max2,1),val),'y':may}
		  ]};
		});
		var layerTrans = d3.range(8).map(function(val,ind){
		  return {"values":[
		    {'x':px(0,val),'y':yx(0)},
		    {'x':nx(0,val),'y':yx(0)},
		    {'x':nx(px(0,1),val),'y':0},
		    {'x':px(nx(0,1),val),'y':0}
		  ]};
		});
		var stack = d3.layout.stack()
						.offset('wiggle')
						.values(function(d){ return d.values; });
		var group = canvas.append('g')
						.attr('transform','translate(38,-191)');

		var path = group.selectAll('path')
						.data(stack(layers))
						.enter()
						.append('path')
						.attr('transform',function(d,i){ return 'translate(33,'+(i*72)+')'; })
						.attr('d',function(d){ return area(d.values); })
						.style({'fill':function(d,i){ return colors(i); },'stroke':'#000','stroke-width':2});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 12px;
	}
	#xaxis .domain{
	display:none;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':1100,'height':650});
	var area = d3.svg.area()
	.interpolate('linear-closed')
	.x1(function(d){ return d.x; })
	.y1(function(d){ return d.y; });
	var max1 = 454, max2 = 70, may = 200;
	var colors = d3.scale.category10();
	var yx = d3.scale.linear()
	.domain([0,may])
	.range([0,(may*1.15)]);
	var px = function(d,i){ return d+(10*i); };
	var nx = function(d,i){ return d-(10*i); };
	var layers = d3.range(8).map(function(val,ind){
	return {"values":[
	{'x':px(max2,val),'y':yx(may)},
	{'x':nx(max1,val),'y':yx(may)},
	{'x':nx(px(max1,1),val),'y':may},
	{'x':px(nx(max2,1),val),'y':may}
	]};
	});
	var layerTrans = d3.range(8).map(function(val,ind){
	return {"values":[
	{'x':px(0,val),'y':yx(0)},
	{'x':nx(0,val),'y':yx(0)},
	{'x':nx(px(0,1),val),'y':0},
	{'x':px(nx(0,1),val),'y':0}
	]};
	});
	var stack = d3.layout.stack()
	.offset('wiggle')
	.values(function(d){ return d.values; });
	var group = canvas.append('g')
	.attr('transform','translate(38,-191)');

	var path = group.selectAll('path')
	.data(stack(layers))
	.enter()
	.append('path')
	.attr('transform',function(d,i){ return 'translate(33,'+(i*72)+')'; })
	.attr('d',function(d){ return area(d.values); })
	.style({'fill':function(d,i){ return colors(i); },'stroke':'#000','stroke-width':2});
	</script>
	</body>
	</html>