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 dollars= [54,35,67,47,83];

		var categories = ['inconvenient location/shipping',
							'price too high',
							'brand offered',
							'more competitive products or bundles',
							'timeliness of offer'];

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

		var data = [''];

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

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

		var yscale = d3.scale.linear()
						.domain([100,0])
						.range([0,450]);

		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,50)')
						  .selectAll('line')
						  .data(grid)
						  .enter()
						  .append('line')
						  .attr({'x1':function(d){ return d.x1; },
								 'y1':function(d,i){ return i*50; },
								 'x2':function(d){ return d.x2; },
								 'y2':function(d,i){ return i*50; },
							})
						  .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([0,10,20,30,40,50,60,70,80,90,100]);

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

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

		var chart = canvas.append('g')
							.attr("transform", "translate(100,50)")
							.attr('id','bars')
							.selectAll('rect')
							.data(dollars)
							.enter()
							.append('rect')
							.attr('height',function(d){ return 0; })
							.attr({'x':function(d,i){ if(i>0){	return xscale(i); } },'y':function(d){ return 450-yscale(d); } })
							.style('fill',function(d,i){ return colorScale(i); })
							.attr('width',function(d){ return 100; });


		var transit = d3.select("svg").selectAll("rect")
						    .data(dollars)
						    .transition()
						    .duration(1000)
						    .attr("height", function(d) {return yscale(d); });

	</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 dollars= [54,35,67,47,83];

	var categories = ['inconvenient location/shipping',
	'price too high',
	'brand offered',
	'more competitive products or bundles',
	'timeliness of offer'];

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

	var data = [''];

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

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

	var yscale = d3.scale.linear()
	.domain([100,0])
	.range([0,450]);

	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,50)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({'x1':function(d){ return d.x1; },
	'y1':function(d,i){ return i*50; },
	'x2':function(d){ return d.x2; },
	'y2':function(d,i){ return i*50; },
	})
	.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([0,10,20,30,40,50,60,70,80,90,100]);

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

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

	var chart = canvas.append('g')
	.attr("transform", "translate(100,50)")
	.attr('id','bars')
	.selectAll('rect')
	.data(dollars)
	.enter()
	.append('rect')
	.attr('height',function(d){ return 0; })
	.attr({'x':function(d,i){ if(i>0){ return xscale(i); } },'y':function(d){ return 450-yscale(d); } })
	.style('fill',function(d,i){ return colorScale(i); })
	.attr('width',function(d){ return 100; });


	var transit = d3.select("svg").selectAll("rect")
	.data(dollars)
	.transition()
	.duration(1000)
	.attr("height", function(d) {return yscale(d); });

	</script>
	</body>
	</html>