Module 6 exercise: Free lunch and non-white population in Palm Beach County Schools

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Free lunch and race</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

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

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

svg {
				background-color: white;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

.legend {margin-right:10px;}
       		.legend:before {display: inline-block;width:16px;height:16px;content:"";margin-right:5px;position:relative;top:2px;}
        
        	.legend_nonwhite:before {background:red;}
        	.legend_freelunch:before {background:steelblue;}

</style>
	</head>
	<body>

<h1>STUDENTS WHO QUALIFY FOR FREE LUNCH</h1>

<p>The percentage of non-white students in Palm Beach County public schools has risen steadily since 1998. The percentage of students who qualify for free lunch was up and down until 2008, but it has risen sharply since then.
		<br /><br />
            
         <span class="legend legend_nonwhite">Percent of students who are a race other than white</span><br />
         <span class="legend legend_freelunch">Percent of students who qualify for free lunch</span>

</p>

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

//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");

//Set up scales
			var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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

//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(d.Percent);
				});

//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load freelunch data
			d3.csv("FRlunch.csv", function(freelunchdata) {

//Load nonwhite data
				d3.csv("nonwhite.csv", function(nonwhitedata) {

//Create a new array that contains both the
					//free lunch and nonwhite data, merged into one
					var mergedData = freelunchdata.concat(nonwhitedata);
					//console.log(mergedData);

//Use the newly merged data to determine the
					//min and max values, for setting scale domains
					xScale.domain([ 
						d3.min(mergedData, function(d) {
							return dateFormat.parse(d.year);
						}),
						d3.max(mergedData, function(d) {
							return dateFormat.parse(d.year);
						})
					]);

yScale.domain([ 
						d3.max(mergedData, function(d) {
							return +d.Percent;
						}),
						28
					]);

//Lines
					//
					// Note data is wrapped in another array, so all its
					// values are bound to a single element (the line!)
					//
					svg.data([ freelunchdata ])
						.append("path")
						.attr("class", "line freelunch")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "steelblue")
						.attr("stroke-width", 3);

svg.data([ nonwhitedata ])
						.append("path")
						.attr("class", "line nonwhite")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "red")
						.attr("stroke-width", 3);

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

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

});
				//End freelunch data load function

});
			//End nonwhite data load function

</script>
			<p>Source: <a href="https://nces.ed.gov/ccd/elsi/" target="_blank">National Center for Education Statistics</a></p>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js