Exercise 3, Bar chart

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar chart</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: DimGray;
			}

svg {
				background-color: DimGray;
			}

</style>
	</head>
	<body>

var w = 800;
			var h = 600;
			var barPadding = 1;
			
			var padding = [ 40, 60, 20, 50 ];
			
			
			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);
			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.5);
			
			var dataset = [ 269755, 268753, 265513, 237986, 208286, 197710, 191967, 186914, 170490, 28970,
							26676, 25610 ];
			
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
		
		
						
			d3.csv("FelonyOffensesVSArrests-2000-2011.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(+a.TOTALFELONYOFFENSES, +b.TOTALFELONYOFFENSES);

});
				
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.TOTALFELONYOFFENSES;
				}) ]);

heightScale.domain(d3.range(data.length));
				
						
				var lines = svg.selectAll("line")
								.data(data)
								.enter()
								.append("line")
								
				lines.style("stroke", "darkgrey")
					.style("stroke-with", 2);
				lines.attr("x1", 5)
					.attr("y1", 5)
					.attr("x2",	800)
					.attr("y2", 5)
						
										
				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");
								
						
				rects.style("fill", "white");
				rects.attr("x", 20)
					.attr("y", function(d, i) {
						return heightScale(i);
					})
				 
			   .attr("width", function(d) {
						return widthScale(d.TOTALFELONYOFFENSES);
					})
			   .attr("height", 18)
			   		.append("title")
			   		.style("fill", "white")
					.text(function(d) {
					return +d.YEAR + " , year in which take place " + +d.TOTALFELONYOFFENSES + " felonies on NYC ";
					});
			   
			   var texts = svg.selectAll("text")
								.data(data)
								.enter()
								.append("text");
								
								texts.style("fill", "DarkGray");
								texts.attr("x", 20)
								.attr("y",35)
								.attr("font-size", 29)
								.attr("font-family", "Arial")
								.attr("font-weight", "normal")
								.text(function(d) {
					return "TOTAL FELONIES ON NEW YORK FROM 2000 TO 2011"
					});
								
			 var things = svg.selectAll("p")
			   .data(data)
			   .enter()
			   .append("p")
			   
			   things.style ("fill", "black");
			   things.attr("x", 20) 
			   .attr("y", 5)
			   .attr("font-family", "arial")
			   .attr("font-size", "11px")
			   .text(function(d) {
			   		return +d.TOTALFELONYOFFENSES;
			   
			   })
			    
			 });
	
		</script>

</body>
</html>

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

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