enjulee/DPRKstudies.csv

## DPRKstudies.csv

          
            subject
            male
            female

            
              Teacher training and education science
              18.0062
              4.0194

            
              Arts
              3.0818
              6.4621

            
              Humanities
              4.0194
              6.1959

            
              Social and behavioural science
              6.4621
              5.2463

            
              Journalism and information
              4
              32.0024

            
              Business and administration
              9.4491
              1.8282

            
              Law
              0.7124
              10.7553

            
              Life sciences
              0.7635
              3.222

            
              Physical sciences
              3.44
              4

            
              Mathematics and statistics
              1.7616
              9.4491

            
              Computing
              1.8608
              0.7124

            
              Engineering and engineering trades
              44.2643
              0.7635

            
              Manufacturing and processing
              6.1959
              3.44

            
              Architecture and building
              5.2463
              1.7616

            
              Agriculture forestry and fishery
              32.0024
              26.224

            
              Veterinary
              1.8282
              48.486

            
              Public health
              10.7553
              0.552

            
              Social services
              3.222
              80

            
              Welfare services
              26.224
              1.8282

            
              Transport services
              48.486
              10.7553

            
              Environmental protection
              0.552
              3.222

            
              Security services
              80
              48.486

            
              Not known or unspecified
              3.777
              0.552

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Number of Male Students' Enrollment by Field of Study</title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   	<style type="text/css">


body {
				background-color: white;
			}

			svg {
				background-color: white;
			}

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

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


			h1 {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 5px;
				margin-top: 0px;
			}

			h2 {
				font-size: 10px;
				font-style: normal;
			}
			p {font-size: 10px;
				font-style: normal;

			}
			h3 {
				font-size: 8px;
				font-style: italic ;
				color: grey;
			}
			.label2 {
				fill: white;
				font-size: 10px;
			}


circle:hover {fill:steelblue}


		</style>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>
	<body>

	   <h1> Number of Male Students' Enrollment by Field of Study</h1>
        <br> 		<img src="http://www.liberty.edu/champion/wp-content/uploads/2012/10/Untitled-151.png">		<br>

		<h2> The data below shows the number of enrollment by North Korean male students by field of study. (unit=1,000 people)</h2>


				<script type="text/javascript">


			var w = 700;
			var h = 400;
			var padding = [20, 10, 50, 100 ];  //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")
							.ticks(10)
							.tickFormat(function(d) {
								return d + " persons";
});
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d + " persons";
							});


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


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

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

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

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

				circles.attr("cx", function(d) {
						return xScale(d.female);
					})

					.attr("cy", function(d) {
						return yScale(d.male);
					})
					.attr("r", 0.1)
					.attr("fill", "orange")
					.append("title")
					.text(function(d) {
						return d.subject + "'s enrollment number among female is " + d.male + ", and its enrollment number among male is " + d.female +".";
					});


	circles.sort(function(a, b) {
						return d3.descending(+a.female, +b.female);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(3000)
					.attr("r", 6);

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

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

			});


		</script>

		<h3>Source: The United Nations Population Division.</h3>

	</body>
</html>
subject	male	female
Teacher training and education science	18.0062	4.0194
Arts	3.0818	6.4621
Humanities	4.0194	6.1959
Social and behavioural science	6.4621	5.2463
Journalism and information	4	32.0024
Business and administration	9.4491	1.8282
Law	0.7124	10.7553
Life sciences	0.7635	3.222
Physical sciences	3.44	4
Mathematics and statistics	1.7616	9.4491
Computing	1.8608	0.7124
Engineering and engineering trades	44.2643	0.7635
Manufacturing and processing	6.1959	3.44
Architecture and building	5.2463	1.7616
Agriculture forestry and fishery	32.0024	26.224
Veterinary	1.8282	48.486
Public health	10.7553	0.552
Social services	3.222	80
Welfare services	26.224	1.8282
Transport services	48.486	10.7553
Environmental protection	0.552	3.222
Security services	80	48.486
Not known or unspecified	3.777	0.552
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Number of Male Students' Enrollment by Field of Study</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">




	body {
	background-color: white;
	}

	svg {
	background-color: white;
	}

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

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



	h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 0px;
	}

	h2 {
	font-size: 10px;
	font-style: normal;
	}
	p {font-size: 10px;
	font-style: normal;

	}
	h3 {
	font-size: 8px;
	font-style: italic ;
	color: grey;
	}
	.label2 {
	fill: white;
	font-size: 10px;
	}


	circle:hover {fill:steelblue}



	</style>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>
	<body>

	<h1> Number of Male Students' Enrollment by Field of Study</h1>
	<br> <img src="http://www.liberty.edu/champion/wp-content/uploads/2012/10/Untitled-151.png"> <br>

	<h2> The data below shows the number of enrollment by North Korean male students by field of study. (unit=1,000 people)</h2>


	<script type="text/javascript">


	var w = 700;
	var h = 400;
	var padding = [20, 10, 50, 100 ]; //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")
	.ticks(10)
	.tickFormat(function(d) {
	return d + " persons";
	});
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d + " persons";
	});


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



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

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

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

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

	circles.attr("cx", function(d) {
	return xScale(d.female);
	})

	.attr("cy", function(d) {
	return yScale(d.male);
	})
	.attr("r", 0.1)
	.attr("fill", "orange")
	.append("title")
	.text(function(d) {
	return d.subject + "'s enrollment number among female is " + d.male + ", and its enrollment number among male is " + d.female +".";
	});



	circles.sort(function(a, b) {
	return d3.descending(+a.female, +b.female);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(3000)
	.attr("r", 6);

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

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

	});


	</script>

	<h3>Source: The United Nations Population Division.</h3>

	</body>
	</html>