xxxxxxxxxx<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> <script type="text/javascript"> //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