luluwuluying/education.csv

## education.csv

          
            educationdegree
            weeklyearning2011

            
              High school,no diploma
              451

            
              High school graduate
              638

            
              College,no degree
              719

            
              Associate degree
              768

            
              Bachelor's degree
              1053

            
              Master's degree
              1263

            
              Professional degree
              1665

            
              Doctoral degree
              1551

## index.html
<!DOCTYPE html>
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Horizontal Bar - Dynamic Domain</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;
			}

			svg {
				background-color: white;
			}


		</style>
	</head>
	<body>

		<h1>More Education Means More Money</h1>
		<p>You will earn more if you have more education. You will also be less likely to become unemployed.
A survey from 2011 shows that average earnings grow from $451 to $638 per week, just by earning a high school diploma. Getting a college Bachelor's degree increases average earnings to $1,053 per week.
More education pays off in higher earnings.</p>
		<p>Source:http://www.careerinfonet.org/finaidadvisor/earnings.aspx</p>

		<script type="text/javascript">


			var height = 500;
			var width = 500;

			// Set up the range here - my output sizes for my bars - from 0 to width.
			var widthScale = d3.scale.linear()
								.range([ 0, width ]);

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


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

				if (error) {
					console.log(error);
				}

				data.sort(function(a, b) {
					return d3.descending(+a.weeklyearning2011, +b.weeklyearning2011); // make numeric
				});

				// set up the domain here, from the data i read in. I'm starting at 0, not min.
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.weeklyearning2011;
				}) ]);

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

				rects.attr("x", 0)
                .style("fill","steelblue")
					.attr("y", function(d, i) {
							// this is a hack to space the bars - we can do it was axes later.
						return i * 20;   // just spacing the bars - notice from the top!
					})
					.attr("width", function(d) {
						return widthScale(+d.weeklyearning2011); // use your scale here:
					})
					.attr("height", 10)
					.append("title")  // this is a simple (bad) tooltip
					.text(function(d) {
						return d.educationdegree + " weekly earning " + d.weeklyearning2011 + "$";
					});

			});


		</script>

	</body>
</html>
	educationdegree	weeklyearning2011
	High school,no diploma	451
	High school graduate	638
	College,no degree	719
	Associate degree	768
	Bachelor's degree	1053
	Master's degree	1263
	Professional degree	1665
	Doctoral degree	1551
	<!DOCTYPE html>
	<!-- Modified version of Scott Murray's file from Knight D3 course -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Horizontal Bar - Dynamic Domain</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;
	}

	svg {
	background-color: white;
	}


	</style>
	</head>
	<body>

	<h1>More Education Means More Money</h1>
	<p>You will earn more if you have more education. You will also be less likely to become unemployed.
	A survey from 2011 shows that average earnings grow from $451 to $638 per week, just by earning a high school diploma. Getting a college Bachelor's degree increases average earnings to $1,053 per week.
	More education pays off in higher earnings.</p>
	<p>Source:http://www.careerinfonet.org/finaidadvisor/earnings.aspx</p>

	<script type="text/javascript">


	var height = 500;
	var width = 500;

	// Set up the range here - my output sizes for my bars - from 0 to width.
	var widthScale = d3.scale.linear()
	.range([ 0, width ]);

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


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

	if (error) {
	console.log(error);
	}

	data.sort(function(a, b) {
	return d3.descending(+a.weeklyearning2011, +b.weeklyearning2011); // make numeric
	});

	// set up the domain here, from the data i read in. I'm starting at 0, not min.
	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.weeklyearning2011;
	}) ]);

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

	rects.attr("x", 0)
	.style("fill","steelblue")
	.attr("y", function(d, i) {
	// this is a hack to space the bars - we can do it was axes later.
	return i * 20; // just spacing the bars - notice from the top!
	})
	.attr("width", function(d) {
	return widthScale(+d.weeklyearning2011); // use your scale here:
	})
	.attr("height", 10)
	.append("title") // this is a simple (bad) tooltip
	.text(function(d) {
	return d.educationdegree + " weekly earning " + d.weeklyearning2011 + "$";
	});

	});


	</script>

	</body>
	</html>