xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise 5- Sorting Education data</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- small multiple code based on logic from
https://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/
linked hover logic based on Bostock https://bl.ocks.org/mbostock/3087986
legend code credit: https://bl.ocks.org/jamazel/e9595f6e96833f920347 -->
<style type="text/css">
body {background-color: white; font-family: Lato; margin-left:10px;
}
.axis path,
.axis line {
fill: none;
stroke: #888888;
stroke-opacity: .75;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill:#888888;
}
.axis text, text.axis {
font-size: 12px;
fill:#888888;
}
text.centered {
text-anchor: middle;
}
svg { background-color: #F9F1DD; margin-bottom:10px; }
circle {fill:#94B2BD;}
circle:hover {fill:SandyBrown;}
.node.active {
fill: SandyBrown;
stroke: #000;
stroke-width: 1.8px;
}
.node.White {fill:#D8C355;}
.node.Hispanic {fill:#d6e8e3;}
.node.Black {fill:#8cc7d1;}
.node.All {fill:#8a8887;}
h1, p {
position: relative;
left: 12px;
color: #333333; }
h1 {font-size:24px;}
p {font-weight:normal; font-size:12px;}
div {text-align:left; width:650px; font-size:13px; font-weight: normal;padding-bottom:6px; }
.source {
padding: 0;
font-size: 10px;
font-style: italic;
position: absolute;
}
a {
text-decoration: none;
color:blue;
}
div.tooltip {
position: absolute;
width: 80px;
height: 46x;
padding-top: 3px;
padding-right:3px;
padding-left:6px;
padding-bottom: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.legend {fill:#888888; font-size: 10px;}
.notes {fill:#888888; font-size: 10px;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Algebra Scores for U.S. 8th Grade Students by Race/ethnicity: 2013<h1>
<p>Mouseover the datapoints to see cross-linked mouseover effect.</p>
<script type="text/javascript">
var w = 850; //840
var h = 290; //220
var cwidth =280; var cheight = 200;
var padding = [ 40, 5, 20, 55 ];
var xScale = d3.scale.linear()
.range([ 0, cwidth - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], cheight - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickFormat(function(d) {
return d + "%";
});
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var color = d3.scale.ordinal()
.domain(["All races","White","Black","Hispanic"])
.range(["#8a8887","#D8C355","#8cc7d1","#d6e8e3",]);
var svg=d3.select("body").append("svg").attr("width", w).attr("height", h);
d3.csv("gr8_algebra_Ex5ALL.csv", function(data) {
data = data.filter(function(d){return (d.Jurisdiction == "Boston" || d.Jurisdiction == "Los Angeles" || d.Jurisdiction == "San Diego" ) });
xScale.domain([200,
d3.max(data, function(d) {
return +d.Score;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.LunchElig;
}),
d3.min(data, function(d) {
return +d.LunchElig;
})
]);
// Nest data by Jurisdiction
var cities = d3.nest()
.key(function(d) { return d.Jurisdiction; })
.entries(data);
var g = svg.selectAll("g")
.data(cities)
.enter().append("g")
.attr("transform",function(d,i) {return "translate("+(cwidth*i)+",0)";});
// add city label
g
.append("text")
.attr("y",(padding[0]-12))
.attr("x",(padding[3]+padding[1]+cwidth)/2-25)
.text(function(d) {return d.key;})
g
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (cheight - padding[2]) + ")")
.call(xAxis);
g
.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
//NEW""
g.append("rect").attr("fill", "white")
.attr("x",padding[3])
.attr("y",padding[0])
.attr("width", (cwidth-padding[1]-padding[3]))
.attr("height",(cheight-padding[0]-padding[2]));
var circles = g.selectAll("circle") ;
circles
.data(function(d) {return d.values})
.enter()
.append("circle")
.attr("class", function(d) { return "node " + d.Race; })
.attr("cx", function(d) {
return (xScale(+d.Score)+ 55);
})
.attr("cy", function(d) {
return yScale(+d.LunchElig);
})
.on("mouseover", function(d) { highlight(d.Race);
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.Race + "<br/> Elig. for lunch pgm= " +d.LunchElig +"% <br/> Score= " + d.Score )
.style("left", (d3.event.pageX+7) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) { highlight(null);
div.transition()
.duration(500)
.style("opacity", 0);
})
.attr("r", 5) ;
g.append("text")
.text("Eligible for lunch program*")
.attr("transform", function(d) {
return "rotate(-90 0, 360)"
})
.attr("x", 260)
.attr("y", (1.34*cwidth))
.attr("text-anchor", "middle")
.attr("class", "axis") ;
// .attr("opacity", 0);
g.append("text")
.attr("x", (cwidth/2+20))
.attr("y", cheight+15)
.attr("class", "centered axis")
.text("Algebra score") ;
// LEGEND
var legendSpacing = 3;
var legendRectSize = 10;
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = 7 * legendRectSize;
var vert = i * height - offset+260;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style("fill", function(d) { return (color(d))})
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
function highlight(type) {
if (type == null) d3.selectAll(".node").classed("active", false);
else d3.selectAll(".node." + type).classed("active", true);
}
d3.select("body")
.append("p")
.append("text")
.attr("y",cheight+40)
.attr("x",padding[3])
.attr("fill","#888888")
.attr("class", "source")
.text("Source: The National Assessment of Educational Progress (NAEP),")
.append("a")
.attr("href", "https://nces.ed.gov/nationsreportcard/naepdata/")
.append("span")
.text(" https://nces.ed.gov/nationsreportcard/naepdata/");
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js