Scatterplot: FelonyOffensesVSArrests-2000-2011 In NYC

<!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: white;
			}
			
			h1 {
				font-size: 29px;
				margin: 0;
				font-family: arial;
			}

p {
				font-family: arial;
				font-size: 20px;
				margin: 10px 0 0 0;
			}
			p2 {
				font-family: arial;
				font-size: 20px;
				margin: 10px 0 0 0;
			}

svg {
				background-color: white;
			}
			
			circle:hover {
				fill: DodgerBlue ;
			}
			
			
			.axis path,
			.axis line {
				fill: none;
				stroke: Gainsboro ;
				shape-rendering: roundEdges;
			}
			
			.axis text {
				font-family: arial;
				font-size: 10px;
				color: Gainsboro 
			}
			
			//.y.axis path,
			//.y.axis line {
				//opacity: 0;
			//}

</style>
	</head>
	<body>

<h1>TOTAL FELONIES ON NEW YORK FROM 2000 TO 2011</h1>
			
			<p>Major an Minor crimes Index &ldquo;Total Felonies&rdquo; by year. Source: <a href="https://data.cityofnewyork.us/Public-Safety/Historical-New-York-City-Crime-Data/hqhv-9zeg">NYC open Data</a>, 2011</p>
	
		<script type="text/javascript">

var w = 800;
			var h = 600;
			var barPadding = 1;
			
			var padding = [ 10, 60, 40, 50 ];
			
			
			var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] ]);
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);
			
			var dataset = [ 269755, 268753, 265513, 237986, 208286, 197710, 191967, 186914, 170490, 28970,
							26676, 25610 ];
			
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10);
							
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(10);

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);

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

yScale.domain([ d3.max(data, function(d) {
						return +d.TOTALARRESTS;
					}),
					d3.min(data, function(d) {
						return +d.TOTALARRESTS;
					})
				]);
				
						
				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 circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");
								
					circles.attr("cx", function(d) {
						return xScale(d.TOTALFELONYOFFENSES);
					})
					.attr("fill", "DimGray")
					.attr("cy", function(d) {
						return yScale(+d.TOTALARRESTS);
					})
				 	.attr("r", 0.1)
			  		 //.attr("height", 18)
			   		.append("title")
			   		.style("fill", "white")
					.text(function(d) {
						return " In " + +d.YEAR + " took place " + +d.TOTALFELONYOFFENSES + " felonies on NYC, and " + +d.TOTALARRESTS + " total arrests ";
					});
					
					
					circles.sort(function(a, b) {
						return d3.ascending(+a.TOTALFELONYOFFENSES, +b.TOTALFELONYOFFENSES);
					})
					.transition()
					.delay(function(d, i) {
						return i * 100;
					})
					.duration(1500)
					.attr("r", 6);
				
				
			   
			  // 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;
			   
			   })
			   
			   svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);
					
					svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);
			    
			 });
	
		</script>

</body>
</html>

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

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