enjulee/DPRKstudies.csv

## DPRKstudies.csv

          
            subject
            male

            
              Teacher training and education science
              18.0062

            
              Arts
              3.0818

            
              Humanities
              4.0194

            
              Social and behavioural science
              6.4621

            
              Journalism and information
              4

            
              Business and administration
              9.4491

            
              Law
              0.7124

            
              Life sciences
              0.7635

            
              Physical sciences
              3.44

            
              Mathematics and statistics
              1.7616

            
              Computing
              1.8608

            
              Engineering and engineering trades
              44.2643

            
              Manufacturing and processing
              6.1959

            
              Architecture and building
              5.2463

            
              Agriculture forestry and fishery
              32.0024

            
              Veterinary
              1.8282

            
              Public health
              10.7553

            
              Social services
              3.222

            
              Welfare services
              26.224

            
              Transport services
              48.486

            
              Environmental protection
              0.552

            
              Security services
              80

            
              Not known or unspecified
              3.777

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
				<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;
			}

			.barcolor {
				fill: cadetblue;
			}

			.barcolor:hover {
				fill: grey;

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


	</head>
	<body>


<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 = 1000;
			var h = 500;
var padding = [10,5,30,200];


			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[2] ]);
			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");


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

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

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

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

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

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", padding[3])
					 .attr("class", "barcolor")
					 .attr("y", function(d, i) {
						return heightScale(d.subject);
					})
					.attr("width", function(d) {
						return widthScale(d.male);
					})
					.attr("height", heightScale.rangeBand())
					.append("title")
					.text(function(d) {
						return d.subject+ "'s enrollment number is " + d.male;
					});

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

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

			});


		</script>

               <h3> Source: The United Nations Population Division.</h3>
	</body>
</html>
	subject	male
	Teacher training and education science	18.0062
	Arts	3.0818
	Humanities	4.0194
	Social and behavioural science	6.4621
	Journalism and information	4
	Business and administration	9.4491
	Law	0.7124
	Life sciences	0.7635
	Physical sciences	3.44
	Mathematics and statistics	1.7616
	Computing	1.8608
	Engineering and engineering trades	44.2643
	Manufacturing and processing	6.1959
	Architecture and building	5.2463
	Agriculture forestry and fishery	32.0024
	Veterinary	1.8282
	Public health	10.7553
	Social services	3.222
	Welfare services	26.224
	Transport services	48.486
	Environmental protection	0.552
	Security services	80
	Not known or unspecified	3.777
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<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;
	}

	.barcolor {
	fill: cadetblue;
	}

	.barcolor:hover {
	fill: grey;

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


	</head>
	<body>



	<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 = 1000;
	var h = 500;
	var padding = [10,5,30,200];


	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[2] ]);
	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");



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

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

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

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

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

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("class", "barcolor")
	.attr("y", function(d, i) {
	return heightScale(d.subject);
	})
	.attr("width", function(d) {
	return widthScale(d.male);
	})
	.attr("height", heightScale.rangeBand())
	.append("title")
	.text(function(d) {
	return d.subject+ "'s enrollment number is " + d.male;
	});

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

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

	});


	</script>

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