Vijesh2 · December 22, 2015 16:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 
 .axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
 }
 
 .axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
 }
 
 .axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
 }
 
 .slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  pointer-events: none;
 }
 
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

    var dataArray = [10, 30, 50, 60];
    	
    var width = 500;
    var height = 500;
    	
    var hScale = d3.scale.linear()
                   .domain([0, 60])
    				           .range([0, height]);
    	
    var color = d3.scale.linear()
    				          .domain([0, 60])
    				          .range(["red","blue"]);
    					
    var axis = d3.svg.axis()
    				         .ticks(5)
    				         .orient("left")
   				          .scale(hScale);
    	
    var canvas = d3.select("body")
        			        .append("svg")
        			        .attr("width", width)
        			        .attr("height", height)
        			        .append("g")
        			        .attr("transform", "translate(20, 0)");
        				
    var bars = canvas.selectAll("rect")
        			          .data(dataArray)
        			          .enter()
        			          .append("rect")
        			          .attr("height", function(d) { return hScale(d); } )
        			          .attr("width", 50)
        			          .attr("fill", function(d) {return color(d);})
        			          .attr("y", function(d) {return height - hScale(d);} )
        			          .attr("x", function(d, i) {return i * 100;} );
        				
 //    canvas.append("g")
 //        	 .attr("transform", "translate(" + padding + ", 	0)")
 //        	 .call(axis);
        	        	                			        				      	
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.axis {
	font: 10px sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	}

	.axis .domain {
	fill: none;
	stroke: #000;
	stroke-opacity: .3;
	stroke-width: 10px;
	stroke-linecap: round;
	}

	.axis .halo {
	fill: none;
	stroke: #ddd;
	stroke-width: 8px;
	stroke-linecap: round;
	}

	.slider .handle {
	fill: #fff;
	stroke: #000;
	stroke-opacity: .5;
	stroke-width: 1.25px;
	pointer-events: none;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var dataArray = [10, 30, 50, 60];

	var width = 500;
	var height = 500;

	var hScale = d3.scale.linear()
	.domain([0, 60])
	.range([0, height]);

	var color = d3.scale.linear()
	.domain([0, 60])
	.range(["red","blue"]);

	var axis = d3.svg.axis()
	.ticks(5)
	.orient("left")
	.scale(hScale);

	var canvas = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(20, 0)");

	var bars = canvas.selectAll("rect")
	.data(dataArray)
	.enter()
	.append("rect")
	.attr("height", function(d) { return hScale(d); } )
	.attr("width", 50)
	.attr("fill", function(d) {return color(d);})
	.attr("y", function(d) {return height - hScale(d);} )
	.attr("x", function(d, i) {return i * 100;} );

	// canvas.append("g")
	// .attr("transform", "translate(" + padding + ", 0)")
	// .call(axis);

	</script>