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: 10px;
	}
	#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 dollars= [{'x':10,'y':40},{'x':10,'y':50},{'x':10,'y':80},{'x':10,'y':90},{'x':10,'y':100},{'x':10,'y':50},{'x':10,'y':60},{'x':10,'y':80},{'x':10,'y':80},{'x':10,'y':90}];

	var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec'];

	var colors = ['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964','#405F83','#416545','#4D7069','#6E9985','#7EBC89','#0283AF','#79BCBF','#99C19E'];

	var grid = d3.range(30).map(function(i){
		return {'x1':0,'y1':0,'x2':1000,'y2':0};
	});

	var xscale = d3.scale.linear()
					.domain([0,12])
					.range([0,1000]);

	var yscale = d3.scale.linear()
					.domain([300,10])
					.range([0,420]);

	var colorScale = d3.scale.quantize()
					.domain([0,categories.length])
					.range(colors);

	var canvas = d3.select('#wrapper')
					.append('svg')
					.attr({'width':1100,'height':550});

	var grids = canvas.append('g')
					  .attr('id','grid')
					  .attr('transform','translate(50,35)')
					  .selectAll('line')
					  .data(grid)
					  .enter()
					  .append('line')
					  .attr({'x1':function(d){ return d.x1; },
							 'y1':function(d,i){ return yscale(i*10); },
							 'x2':function(d){ return d.x2; },
							 'y2':function(d,i){ return yscale(i*10); },
						})
					  .style({'stroke':'#adadad','stroke-width':'1px'});

	var	xAxis = d3.svg.axis();
		xAxis
			.orient('bottom')
			.scale(xscale)
			.tickFormat(function(d,i){ return categories[i]; })
			.tickValues(d3.range(21));

	var	yAxis = d3.svg.axis();
		yAxis
			.orient('left')
			.scale(yscale)
			.tickSize(2)
			.tickFormat(function(d,i){ console.log(d); return "$"+d+"K"; })
			.tickValues([20,40,60,80,100,120,140,160,180,200,220,240,260,280,300]);

	var y_xis = canvas.append('g')
					  .attr("transform", "translate(50,50)")
					  .attr('id','yaxis')
					  .call(yAxis);

	var x_xis = canvas.append('g')
					  .attr("transform", "translate(75,466)")
					  .attr('id','xaxis')
					  .call(xAxis);

	var line = d3.svg.line()
					.interpolate('linear')
					.x(function(d,i){return xscale(i); })
					.y(function(d){ return yscale(d.y); });

	var path  = canvas.append('g')
					.attr('id','linepath')
					.attr('transform','translate(80,50)')
					.append('path')
					.attr('d',line(dollars))
					.style({'fill':'none','stroke':'#0000ff','stroke-width':'2px'});

	var text = canvas.selectAll('#linepath')
						.selectAll('text')
						.data(dollars)
						.enter()
						.append('text')
						.attr({'x':function(d,i){ return xscale(i)-15; },'y':function(d){ return yscale(d.y)-15; }})
						.text(function(d){ return "$"+d.y+"K";});


	var cir = canvas.selectAll('#linepath')
						.selectAll('circle')
						.data(dollars)
						.enter()
						.append('circle')
						.attr({'r':'5','cx':function(d,i){ return xscale(i); },'cy':function(d){ return yscale(d.y); }})
						.style({'fill':'#fff','stroke-width':'2px','stroke':'#0000ff'});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 10px;
	}
	#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 dollars= [{'x':10,'y':40},{'x':10,'y':50},{'x':10,'y':80},{'x':10,'y':90},{'x':10,'y':100},{'x':10,'y':50},{'x':10,'y':60},{'x':10,'y':80},{'x':10,'y':80},{'x':10,'y':90}];

	var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec'];

	var colors = ['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964','#405F83','#416545','#4D7069','#6E9985','#7EBC89','#0283AF','#79BCBF','#99C19E'];

	var grid = d3.range(30).map(function(i){
	return {'x1':0,'y1':0,'x2':1000,'y2':0};
	});

	var xscale = d3.scale.linear()
	.domain([0,12])
	.range([0,1000]);

	var yscale = d3.scale.linear()
	.domain([300,10])
	.range([0,420]);

	var colorScale = d3.scale.quantize()
	.domain([0,categories.length])
	.range(colors);

	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':1100,'height':550});

	var grids = canvas.append('g')
	.attr('id','grid')
	.attr('transform','translate(50,35)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({'x1':function(d){ return d.x1; },
	'y1':function(d,i){ return yscale(i*10); },
	'x2':function(d){ return d.x2; },
	'y2':function(d,i){ return yscale(i*10); },
	})
	.style({'stroke':'#adadad','stroke-width':'1px'});

	var xAxis = d3.svg.axis();
	xAxis
	.orient('bottom')
	.scale(xscale)
	.tickFormat(function(d,i){ return categories[i]; })
	.tickValues(d3.range(21));

	var yAxis = d3.svg.axis();
	yAxis
	.orient('left')
	.scale(yscale)
	.tickSize(2)
	.tickFormat(function(d,i){ console.log(d); return "$"+d+"K"; })
	.tickValues([20,40,60,80,100,120,140,160,180,200,220,240,260,280,300]);

	var y_xis = canvas.append('g')
	.attr("transform", "translate(50,50)")
	.attr('id','yaxis')
	.call(yAxis);

	var x_xis = canvas.append('g')
	.attr("transform", "translate(75,466)")
	.attr('id','xaxis')
	.call(xAxis);

	var line = d3.svg.line()
	.interpolate('linear')
	.x(function(d,i){return xscale(i); })
	.y(function(d){ return yscale(d.y); });

	var path = canvas.append('g')
	.attr('id','linepath')
	.attr('transform','translate(80,50)')
	.append('path')
	.attr('d',line(dollars))
	.style({'fill':'none','stroke':'#0000ff','stroke-width':'2px'});

	var text = canvas.selectAll('#linepath')
	.selectAll('text')
	.data(dollars)
	.enter()
	.append('text')
	.attr({'x':function(d,i){ return xscale(i)-15; },'y':function(d){ return yscale(d.y)-15; }})
	.text(function(d){ return "$"+d.y+"K";});


	var cir = canvas.selectAll('#linepath')
	.selectAll('circle')
	.data(dollars)
	.enter()
	.append('circle')
	.attr({'r':'5','cx':function(d,i){ return xscale(i); },'cy':function(d){ return yscale(d.y); }})
	.style({'fill':'#fff','stroke-width':'2px','stroke':'#0000ff'});
	</script>
	</body>
	</html>