Homework1.1

<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
		fill:none;
		stroke:#000;
	}
	#xaxis text, #yaxis text {
		font-size: 12px;
	}
	</style>
</head>
<body>
	<div id="wrapper">
	</div>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
    
    
    
		var hour= [, 0,1,2,3,5,6,8,9,10,11,13,14,15,16,17,18,19,20,21,22,23];

var numRecords = [9,5,4,3,1,2,1,2,2,1,3,2,8,7,5,5,2,5,3,7,7];

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

var tickVals = grid.map(function(d,i){
			if(i>0){ return i; }
			else if(i===0){ return "100";}
		});

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

var yscale = d3.scale.linear()
						.domain([0,hour.length])
						.range([0,480]);

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

var	xAxis = d3.svg.axis();
			xAxis
				.orient('bottom')
				.scale(xscale)
				.tickValues(tickVals)
      ;

var	yAxis = d3.svg.axis();
			yAxis
				.orient('left')
				.scale(yscale)
				.tickSize(2)
				.tickFormat(function(d,i){ return hour[i]; })
				.tickValues(d3.range(25));

var y_edit = canvas.append('g')
						  .attr("transform", "translate(150,0)")
						  .attr('id','yaxis')
						  .call(yAxis)
				;
		var x_edit = canvas.append('g')
						  .attr("transform", "translate(150,480)")
						  .attr('id','xaxis')
						  .call(xAxis);

var transit = d3.select("svg").selectAll("rect")
						    .data(numRecords)
						    .transition()
						    .duration(1000) 
						    .attr("width", function(d) {return xscale(d); })
    
    
     x_edit.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", 450)
    .attr("y", 40)
    .text("Number of Records (thousands)");
    
    y_edit.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("x", -20)
    .attr("y", 0)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-0)")
    .text("Hour of Time");     
    ;

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js