jonolave/index.html

## 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="http://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="http://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
	<!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="http://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="http://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>
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