dongxiahe/education.csv

## education.csv

          
            country
            educationexpenditure
            unemploymentrate

            
              Japan
              3.8
              4.3

            
              Colombia
              4.4
              10.6

            
              Singapore
              3.1
              2.8

            
              Spain
              4.4
              25.2

            
              Switzerland
              5.0
              4.2

            
              Netherlands
              5.5
              5.3

            
              France
              5.5
              9.9

            
              New Zealand
              7.4
              6.9

            
              Finland
              7.2
              7.6

            
              Australia
              4.9
              5.2

            
              India
              3.9
              3.6

            
              Hongkong (China)
              3.5
              3.3

            
              Brazil
              6.3
              6.1

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>education</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

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

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

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

			svg {
				background-color: white;
			}

			circle:hover {
				fill: green;
			}

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

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

		</style>
	</head>
	<body>

		<h1>education expenditure and unemployment rates in 2012 source: world bank</h1>

		<p1>the x axis = government expenditure on education (% of GDP). </p1>

		<p2>the y axis = unemployment rate of total labor force (%).</p2>

		<script type="text/javascript">


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


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

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


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

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d + "%";
							});


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


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

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

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

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

				circles.attr("cx", function(d) {
						return xScale(d.educationexpenditure);
					})
					.attr("cy", function(d) {
						return yScale(d.unemploymentrate);
					})
					.attr("r", 0.1)
					.attr("fill", "green")
					.append("title")
					.text(function(d) {
						return d.country + "'s education expenditure is " + d.educationexpenditure + ", and " +  "unemployment rate is " + d.unemploymentrate;
					});

					circles.transition()
					.delay(function(d,i){
						return i*100;
					})
					.duration(3000)
					.attr("r", 5)
					.attr("fill", "purple");

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

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

			});


		</script>

	</body>
</html>
country	educationexpenditure	unemploymentrate
Japan	3.8	4.3
Colombia	4.4	10.6
Singapore	3.1	2.8
Spain	4.4	25.2
Switzerland	5.0	4.2
Netherlands	5.5	5.3
France	5.5	9.9
New Zealand	7.4	6.9
Finland	7.2	7.6
Australia	4.9	5.2
India	3.9	3.6
Hongkong (China)	3.5	3.3
Brazil	6.3	6.1
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>education</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

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

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

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

	svg {
	background-color: white;
	}

	circle:hover {
	fill: green;
	}

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

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

	</style>
	</head>
	<body>

	<h1>education expenditure and unemployment rates in 2012 source: world bank</h1>

	<p1>the x axis = government expenditure on education (% of GDP). </p1>

	<p2>the y axis = unemployment rate of total labor force (%).</p2>

	<script type="text/javascript">


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



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

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



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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d + "%";
	});



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



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

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

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

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

	circles.attr("cx", function(d) {
	return xScale(d.educationexpenditure);
	})
	.attr("cy", function(d) {
	return yScale(d.unemploymentrate);
	})
	.attr("r", 0.1)
	.attr("fill", "green")
	.append("title")
	.text(function(d) {
	return d.country + "'s education expenditure is " + d.educationexpenditure + ", and " + "unemployment rate is " + d.unemploymentrate;
	});

	circles.transition()
	.delay(function(d,i){
	return i*100;
	})
	.duration(3000)
	.attr("r", 5)
	.attr("fill", "purple");

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

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

	});


	</script>

	</body>
	</html>