simple bar chart with d3.js

var width = 500;
	height = 500;
	widthScale = d3.scale.linear()
		.domain([0,60])
		.range([0,height]);
	heightScale = d3.scale.linear()
		.domain([60,0])
		.range([0,height]);
	axis = d3.svg.axis()
		.ticks(5)
		.scale(heightScale);
				
	color = d3.scale.linear()
		.domain([0,60])
		.range(["red","blue"]);
				
var canvas = d3.select(".main-data")
		.append("svg")
		.attr('width',width)
		.attr('height',width)
		.append("g")
		.attr("transform","translate(50,50)");


				
var dataArray = [20,40,50,60];

var bars = canvas.selectAll("rect")
		.data(dataArray)
		.enter()
			.append("rect")
			.attr("height",function(d){
				return widthScale(d);
			})
			.attr("width",50)
			.attr("fill",function(d){
				return color(d);
			})
			.attr("x",function(d,i){
				return i * 100;
			})
			.attr("y",function(d){
				return height - widthScale(d);
			})
				
	canvas.append("g")
		.attr("transform","translate(0,500)")
		.attr("transform","rotate(90)")

		.call(axis);