peripherie/GDPandLIFESATISFACTION.csv

## GDPandLIFESATISFACTION.csv

          
            country
            GDPperHourWorked
            LifeSatisfaction

            
              Australia
              45.77
              7.2

            
              Austria
              45.70
              7.4

            
              Belgium
              52.50
              6.9

            
              Canada
              42.74
              7.4

            
              Chile
              19.86
              6.5

            
              Czech Republic
              28.75
              6.3

            
              Denmark
              46.88
              7.5

            
              Estonia
              22.71
              5.4

            
              Finland
              42.60
              7.4

            
              France
              50.86
              6.6

            
              Germany
              50.91
              6.7

            
              Greece
              28.35
              5.1

            
              Hungary
              22.82
              4.7

            
              Iceland
              40.79
              7.6

            
              Ireland
              50.63
              7

            
              Israel
              33.21
              7.1

            
              Italy
              38.38
              5.8

            
              Japan
              36.07
              6

            
              Korea
              29.89
              6

            
              Luxembourg
              68.99
              7

            
              Mexico
              15.10
              7.3

            
              Netherlands
              52.30
              7.5

            
              New Zealand
              30.17
              7.2

            
              Norway
              62.63
              7.7

            
              Poland
              22.85
              5.9

            
              Portugal
              26.70
              5

            
              Russia
              15.59
              5.6

            
              Slovak Republic
              30.44
              5.9

            
              Slovenia
              35.25
              6.1

            
              Spain
              40.42
              6.3

            
              Sweden
              46.30
              7.6

            
              Switzerland
              44.49
              7.8

            
              Turkey
              23.41
              5.3

            
              United Kingdom
              44.49
              6.8

            
              United States
              56.88
              7

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 module 5 project</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

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

			h1 {
				font-size: 36px;
				margin: 0;
			}

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

			svg {
				background-color: white;
			}

			circle:hover {
				fill: blue;
				transition: fill 1s;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 16px;
			}

		</style>
	</head>
	<body>

		<h1>Productivity and Happiness</h1>

		<p>GDP per hour worked vs. Better Life Index &ldquo;Life Satisfaction&rdquo; scores in 2013. Source: <a href="https://data.oecd.org/lprdty/gdp-per-hour-worked.htm">GDP per hour worked, OECD</a>, and <a href="http://www.oecdbetterlifeindex.org/">Life Satisfaction, OECD</a></p>

		<script type="text/javascript">


			var w = 800;
			var h = 600;
			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left


			var xScale = d3.scale.linear()
								.range([ padding[3] + 50, w - padding[1] - padding[3] ]);

			var yScale = d3.scale.linear()
								.range([ padding[0] + 20, h - padding[2] ]);


			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.tickFormat(function(d) {
								return d + "US$";
                            });

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(15);

			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

                d3.csv("GDPandLIFESATISFACTION.csv", function(data) {

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

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

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

				circles.attr("cx", function(d) {
						return xScale(d.GDPperHourWorked);
					})
					.attr("cy", function(d) {
						return yScale(d.LifeSatisfaction);
					})
					.attr("r", 0.1)
					.attr("fill", "skyblue")
					.attr("opacity",0.5)
					.append("title")
					.text(function(d) {
						return d.country + "'s life satisfaction score is " + d.LifeSatisfaction + ", and GDP per hour worked is " + d.GDPperHourWorked + " US$";
					});

				circles.sort(function(a, b) {
						return d3.ascending(+a.LifeSatisfaction, +b.LifeSatisfaction);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("r", 15);

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis)
					.append("text")
					.attr({
						"class": "labels",
						x: w/2-30,
						y: 40,
					})
					.text("GDP per hour worked");

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] + 40) + ",0)")
					.call(yAxis)
					.append("text")
					.attr({
                        "class": "labels",
						"transform": "rotate(-90)",
						x: -h/2-10,
						y: -40,
					})
					.text("Life Satisfaction")
                ;

			});


		</script>

	</body>
</html>
country	GDPperHourWorked	LifeSatisfaction
Australia	45.77	7.2
Austria	45.70	7.4
Belgium	52.50	6.9
Canada	42.74	7.4
Chile	19.86	6.5
Czech Republic	28.75	6.3
Denmark	46.88	7.5
Estonia	22.71	5.4
Finland	42.60	7.4
France	50.86	6.6
Germany	50.91	6.7
Greece	28.35	5.1
Hungary	22.82	4.7
Iceland	40.79	7.6
Ireland	50.63	7
Israel	33.21	7.1
Italy	38.38	5.8
Japan	36.07	6
Korea	29.89	6
Luxembourg	68.99	7
Mexico	15.10	7.3
Netherlands	52.30	7.5
New Zealand	30.17	7.2
Norway	62.63	7.7
Poland	22.85	5.9
Portugal	26.70	5
Russia	15.59	5.6
Slovak Republic	30.44	5.9
Slovenia	35.25	6.1
Spain	40.42	6.3
Sweden	46.30	7.6
Switzerland	44.49	7.8
Turkey	23.41	5.3
United Kingdom	44.49	6.8
United States	56.88	7
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 module 5 project</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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

	h1 {
	font-size: 36px;
	margin: 0;
	}

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

	svg {
	background-color: white;
	}

	circle:hover {
	fill: blue;
	transition: fill 1s;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 16px;
	}

	</style>
	</head>
	<body>

	<h1>Productivity and Happiness</h1>

	<p>GDP per hour worked vs. Better Life Index “Life Satisfaction” scores in 2013. Source: <a href="https://data.oecd.org/lprdty/gdp-per-hour-worked.htm">GDP per hour worked, OECD</a>, and <a href="http://www.oecdbetterlifeindex.org/">Life Satisfaction, OECD</a></p>

	<script type="text/javascript">


	var w = 800;
	var h = 600;
	var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left



	var xScale = d3.scale.linear()
	.range([ padding[3] + 50, w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0] + 20, h - padding[2] ]);



	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickFormat(function(d) {
	return d + "US$";
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(15);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	d3.csv("GDPandLIFESATISFACTION.csv", function(data) {

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

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

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

	circles.attr("cx", function(d) {
	return xScale(d.GDPperHourWorked);
	})
	.attr("cy", function(d) {
	return yScale(d.LifeSatisfaction);
	})
	.attr("r", 0.1)
	.attr("fill", "skyblue")
	.attr("opacity",0.5)
	.append("title")
	.text(function(d) {
	return d.country + "'s life satisfaction score is " + d.LifeSatisfaction + ", and GDP per hour worked is " + d.GDPperHourWorked + " US$";
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.LifeSatisfaction, +b.LifeSatisfaction);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("r", 15);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis)
	.append("text")
	.attr({
	"class": "labels",
	x: w/2-30,
	y: 40,
	})
	.text("GDP per hour worked");

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3] + 40) + ",0)")
	.call(yAxis)
	.append("text")
	.attr({
	"class": "labels",
	"transform": "rotate(-90)",
	x: -h/2-10,
	y: -40,
	})
	.text("Life Satisfaction")
	;

	});


	</script>

	</body>
	</html>