CODEXE

D3 Scale Bar Chart


	var w = 500;
	var h = 200;//maxHeight*10 + 50;
	var dataset = [4,2,6,13,4,8,32,19,10,12,2,15];
	var maxHeight=d3.max(dataset,function(d){return d});
	var minHeight=d3.min(dataset,function(d){return d})
	var hScale = d3.scaleLinear()
		.domain([0,maxHeight])//input range
		.range([0,h]);//ouput range

	var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
	
	var barpadding = 2;
	var bars = svg.selectAll("rect").data(dataset).enter().append("rect");
	bars.attr("x",function(d,i){
			  return i*(w/dataset.length);
			  })
	.attr("y",function(d){
		return h-hScale(d);
	})//for bottom to top
	.attr("width", w/dataset.length-barpadding)
	.attr("height", function(d){
		return hScale(d);
	});
	bars.attr("fill",function(d){
		return "rgb(0,"+d*10+",0)"
	});
	
	//add tag to every bar
	var tags = svg.selectAll("text").data(dataset).enter().append("text").text(function(d){
		return d;
	});
	tags.attr("x",function(d,i){
			  return i*(w/dataset.length)+13;
			  })
	.attr("y",function(d){
		return h-hScale(d)+15;
	})//for bottom to top
	.attr("fill","white");