enjulee/EL_module3assignment.html

## EL_module3assignment.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Number of Male Students' Enrollment by Field of Study</title>
		<style type="text/css">
		body {
				font-family: Helvetica, Arial, sans-serif;
				font-style: normal;
				background-color: whitesmoke;
				padding: 50px;
			}

			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>

		</style>
	</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>
			<p style="font-size:50%">&nbsp;Field of Study</p>

				<script type="text/javascript">
					var svg = d3.select("body")
						.append("svg")
						.attr("width", 10000)
						.attr("height", 200);


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

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

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

				rects.attr("x", 0)
				    .attr("class", "barcolor")
					.attr("y", function(d, i) {
						return i * 10;
					})
					.attr("width", function(d) {
						return d.male * 30;
					})
					.attr("height", 8)
					.append("title")
					.text(function(d) {
						return d.subject + "'s enrollment number is " + d.male;
					});
								});
		</script>
<h3> Source: The United Nations Population Division.</h3>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Number of Male Students' Enrollment by Field of Study</title>
	<style type="text/css">
	body {
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal;
	background-color: whitesmoke;
	padding: 50px;
	}

	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>

	</style>
	</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>
	<p style="font-size:50%"> Field of Study</p>

	<script type="text/javascript">
	var svg = d3.select("body")
	.append("svg")
	.attr("width", 10000)
	.attr("height", 200);



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

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

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

	rects.attr("x", 0)
	.attr("class", "barcolor")
	.attr("y", function(d, i) {
	return i * 10;
	})
	.attr("width", function(d) {
	return d.male * 30;
	})
	.attr("height", 8)
	.append("title")
	.text(function(d) {
	return d.subject + "'s enrollment number is " + d.male;
	});
	});
	</script>
	<h3> Source: The United Nations Population Division.</h3>
	</body>
	</html>