pfloh/Eurostat_Youthunemployment_2014_english_csv.csv

## Eurostat_Youthunemployment_2014_english_csv.csv

          
            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

## 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>