Homicide vs life satisfaction by jonolave

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content=type" content="text/html"; charset="utf-8">
		<title>Homicide vs life satisfaction</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.js" charset="utf-8"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				color: #65c8d0;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle:hover {
				fill: #ba9bc9;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: #666666;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 12px;
			}

		</style>
	</head>
	<body>
		<h1>Homicide rate vs life satisfaction score in OECD countries </h1>
		<p>Homicide rate on the horizontal axis, life satisfaction score on the vertical axis. Data from <a href="//www.oecdbetterlifeindex.org/about/better-life-initiative/">OECD</a>.</p>

		<script type="text/javascript">	

			// Define height and width of SVG box
			var w = 600;
			var h = 500;
			var padding = [ 30, 20, 40, 40 ];  // Paading 0 top, 1 right, 2 bottom, 3 left

			// Create scale pixel range for width
			var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] ]);

			// Create scale pixel range for height, and percentage gap
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2]
									]);

			// Create x axis at the bottom
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(12);

			// Create y axis to the left
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.ticks(8)
							.orient("left");

			// Create SVG with right height and width
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			// Import data from file
			d3.csv("oecd.csv", function(data) {

				// Sort data
				data.sort(function(a, b) {
					return d3.descending(+a.homicide, +b.homicide);
				});	

				// Set domain (input range) for x scale 
				xScale.domain([ 0, d3.max(data, function(d) 
						{return +d.homicide;})
					]);

				// Set domain (input range) for y scale 
				yScale.domain([ d3.max(data, function(d) {return +d.satisfaction;}), 
					d3.min(data, function(d) {return +d.satisfaction;}) 
				]);

				// create circles
				var circles = svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")

				// Set attributes for circles, initial state
				circles.attr("cx", padding[3])
					.attr("cy", h - padding[2])
					.attr("r", 5)
					.attr("fill", "#ffffff")
					.append("title")
					.text(function(d) {
						return d.country + "'s satisfaction rate: " + d.satisfaction + " % and homicide rate: " + d.homicide ;
					});

				// Set new attributes for transition
				circles.sort(function(a, b) {
						return d3.ascending(+a.homicide, +b.homicide);
					})
					.transition()
					// Delay in ms pr item
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("fill", "#65c8d0")
					.attr("cx", function(d){
						return xScale(d.homicide);
					})
					.attr("cy", function(d) {
						return yScale(d.satisfaction);
					})
					;


				// Append x axis as group, translate
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0" + "," + (h - padding[2]) + ")")
					.call(xAxis);

				// Append y axis as group, translate
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
			});
		</script>
	</body>
</html>

oecd.csv

country,employment,satisfaction,assault,homicide
Australia,72,7.4,2.1,0.8
Austria,73,7.5,3.4,0.5
Belgium,62,7.1,6.6,1.2
Canada,72,7.6,1.3,1.7
Chile,62,6.6,6.9,5.2
Czech Republic,67,6.7,2.8,0.8
Denmark,73,7.6,3.9,0.8
Estonia,67,5.4,5.5,4.7
Finland,70,7.4,2.4,1.8
France,64,6.7,5,0.8
Germany,73,7,3.6,0.5
Greece,51,4.7,3.7,1.4
Hungary,57,4.9,3.6,1.5
Iceland,80,7.5,2.7,1.3
Ireland,59,6.8,2.6,0.8
Israel,67,7.1,6.4,2.2
Italy,58,6,4.7,0.7
Japan,71,6,1.4,0.3
Korea,64,6,2.1,1.1
Luxembourg,66,7.1,4.3,2.1
Mexico,61,7.4,12.8,23.4
Netherlands,75,7.4,4.9,0.9
New Zealand,72,7.3,2.2,1.9
Norway,76,7.7,3.3,2.3
Poland,60,5.7,1.4,1
Portugal,62,5.2,5.7,0.9
Slovak Republic,60,5.9,3,1.2
Slovenia,64,6,3.9,0.4
Spain,56,6.2,4.2,0.7
Sweden,74,7.4,5.1,1
Switzerland,79,7.8,4.2,0.5
Turkey,49,4.9,5,3.3
United Kingdom,71,6.9,1.9,0.3
United States,67,7,1.5,5.2