pfloh · November 23, 2015 21:44
diff --git a/Eurostat_Youthunemployment_2014_english_csv.csv b/Eurostat_Youthunemployment_2014_english_csv.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Youth unemployment in Europe 2014</title>
 		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 		<style type="text/css">
 			
 			body {
 				margin: 0;
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			#container {
 				width: 700px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 50px;
 				padding: 50px;
 				background-color: white;
 				border: 1px solid grey;
 			}

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

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

 			a:link {
 				text-decoration: none;
 				color: gray;
 			}

 			a:hover {
 				text-decoration: underline;
 			}

 			a:visited {
 				color: gray;
 			}

 			a:active {
 				color: steelBlue;
 			}

 			svg {
 				background-color: white;
 			}

 			g.bar text {
 				font-size: 11px;
 				font-weight: bold;
 				text-anchor: end;
 				opacity: 0;
 			}

 			g.bar:hover rect {
 				fill: yellow;
 			}

 			g.bar:hover text {
 				opacity: 1;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 			.y.axis path,
 			.y.axis line {
 				opacity: 0;
 			}

 		</style>
 	</head>
 	<body>

 		<div id="container">

 			<h1>Youth unemployment in Europe</h1>

 			<p>Young people (from 15 to 34 years) neither in employment nor in education and training (2014).<br> Source: <a href="http://ec.europa.eu/eurostat/web/degree-of-urbanisation/data/database">Eurostat, 2014</a></p>

 		</div>

 		<script type="text/javascript">		


 			var w = 700;
 			var h = 700;
 			var padding = [ 20, 10, 40, 120 ];  //Top, right, bottom, left

    		width = w - padding[3] - padding[1], // padding left - padding right
    		height = h - padding[0] - padding[2];	// padding top - padding bottom

 			var widthScale = d3.scale.linear()
 								.range([ 0, w - padding[1] - padding[3] ]);
 			
 			var heightScale = d3.scale.ordinal()
 								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



 			var xAxis = d3.svg.axis()
 							.scale(widthScale)
 							.orient("bottom");

 			var yAxis = d3.svg.axis()
 							.scale(heightScale)
 							.orient("left");


 			//Now SVG goes into #container instead of body
 			var svg = d3.select("#container")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



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

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

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

 				heightScale.domain(data.map(function(d) { return d.country; } ));

 				//Binding data 
 				var groups = svg.selectAll("g")
 								.data(data)
 								.enter()
 								.append("g")
 								.attr("class", "bar");

 				//Adding rects
 				var rects = groups.append("rect")
 					.attr("x", padding[3])
 					.attr("y", function(d) {
 						return heightScale(d.country);
 					})
 					.attr("width", 0)
 					.attr("height", heightScale.rangeBand())
 					.attr("fill", "darkgreen");

 				//Adding elements to group
 				groups.append("text")
 					.attr("x", function(d) {
 						return padding[3] + widthScale(d.unemployment_percent) - 3;
 					})
 					.attr("y", function(d) {
 						return heightScale(d.country) + 13;
 					})
 					.text(function(d) {
 						return d.unemployment_percent + " % ";
 					});

 				rects.transition()
 					.delay(function(d, i) {
 						return i * 50;
 					})
 					.duration(1000)
 					.attr("width", function(d) {
 						return widthScale(d.unemployment_percent);
 					});

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


 				// X axis label 	
 				svg.append("text")
 				        .attr("transform", "translate(" + (width / 2 + 70) + " ," + (height + padding[2] + 15) + ")")
 				        .style("text-anchor", "middle")
 				        //.attr("stroke", "red")
 				        .style("fill", "#3A3A3A")
 				        .attr("dx", "3em")
 				        .text("Percentage of young people"); 

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + padding[3] + ",0)")
 					.call(yAxis);


 				// Add the text label for the Y axis
 				    svg.append("text")
 				        .attr("transform", "rotate(-90)")
 				        .attr("y", 0 - padding[3] + 22)
 				        .attr("x",0 - (height / 2))
 				        .attr("dy", "7.5em")
 				        .style("text-anchor", "middle")
 				        .style("fill", "#3A3A3A")
 				        .text("Countries");	


 			});


 		</script>

 	</body>
 </html>
	country	unemployment_percent
	European Union	16.6
	Euro area	17.1
	Belgium	14.8
	Bulgaria	24.7
	Czech Republic	15.0
	Denmark	8.1
	Germany	10.4
	Estonia	15.2
	Ireland	18.9
	Greece	29.5
	Spain	22.4
	France	15.2
	Croatia	22.2
	Italy	27.4
	Cyprus	19.5
	Latvia	16.6
	Lithuania	13.5
	Luxembourg	8.1
	Hungary	18.1
	Malta	13.7
	Netherlands	08.8
	Austria	10.0
	Poland	16.7
	Portugal	15.2
	Romania	20.0
	Slovenia	13.6
	Slovakia	21.4
	Finland	12.9
	Sweden	7.7
	United Kingdom	13.7
	Iceland	7.8
	Norway	7.9
	Switzerland	8.3
	(F.Y.Rep.) Macedonia	33.9
	Turkey	30.2
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Youth unemployment in Europe 2014</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

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

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	border: 1px solid grey;
	}

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

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

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: steelBlue;
	}

	svg {
	background-color: white;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	}

	g.bar:hover rect {
	fill: yellow;
	}

	g.bar:hover text {
	opacity: 1;
	}

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

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

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>

	<div id="container">

	<h1>Youth unemployment in Europe</h1>

	<p>Young people (from 15 to 34 years) neither in employment nor in education and training (2014).<br> Source: <a href="http://ec.europa.eu/eurostat/web/degree-of-urbanisation/data/database">Eurostat, 2014</a></p>

	</div>

	<script type="text/javascript">


	var w = 700;
	var h = 700;
	var padding = [ 20, 10, 40, 120 ]; //Top, right, bottom, left

	width = w - padding[3] - padding[1], // padding left - padding right
	height = h - padding[0] - padding[2]; // padding top - padding bottom

	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");


	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



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

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

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

	heightScale.domain(data.map(function(d) { return d.country; } ));

	//Binding data
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Adding rects
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.country);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "darkgreen");

	//Adding elements to group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.unemployment_percent) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.country) + 13;
	})
	.text(function(d) {
	return d.unemployment_percent + " % ";
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.unemployment_percent);
	});

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


	// X axis label
	svg.append("text")
	.attr("transform", "translate(" + (width / 2 + 70) + " ," + (height + padding[2] + 15) + ")")
	.style("text-anchor", "middle")
	//.attr("stroke", "red")
	.style("fill", "#3A3A3A")
	.attr("dx", "3em")
	.text("Percentage of young people");

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);


	// Add the text label for the Y axis
	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - padding[3] + 22)
	.attr("x",0 - (height / 2))
	.attr("dy", "7.5em")
	.style("text-anchor", "middle")
	.style("fill", "#3A3A3A")
	.text("Countries");


	});


	</script>

	</body>
	</html>