xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise 3- 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'>
<style type="text/css">
body {background-color: white; font-family: Lato; margin-left:15px;;
}
svg, div { background-color: #F9F1DD;
}
rect {fill: #94B2BD;}
h1, p {
position: relative;
left: 10px;
color: #333333; }
div {text-align:center; width:315px; font-size:12px; font-weight:bold; padding-top:6px; padding-bottom:6px; }
</style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("h1").text("Algebra Scores for U.S. 8th Grade Students by Race/ethnicity: 2013");
var city = "San Diego";
d3.select("body").append("div").text(city);
var svg = d3.select("body")
.append("svg")
.attr("width", 315)
.attr("height", 100);
d3.csv("gr4gr8_math_v3.csv", function(data) {
data = data.filter(function(d){return d.Year == 2013 && d.Grade == 8 && d.Measure=="algebra" && d.Jurisdiction == city });
data.sort(function(a,b){return d3.descending(a.Score, b.Score)})
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr("y", function(d, i) {
return i * 25;
})
.attr("width", function(d) {
return (+d.Score/1.2) ;
})
.attr("height", 17)
.append("title")
.text(function(d) {
return d.Race + " " + " Score=" + d.Score ;
});
// Value labels
var texts = svg.selectAll("text")
.data(data)
.enter()
.append("text");
texts.attr("x", function(d) {
return (+d.Score/1.2+3);
})
.attr("y", function(d, i) {
return i * 25+15;
})
.attr("fill","#777777")
.style("font-family", "Lato")
.style("font-size", "12px")
.text(function(d) { return d.Score;});
// Series labels
var labels = svg.selectAll(".label")
.data(data)
.enter()
.append("text")
.attr("class","label");
labels.attr("x", 3)
.attr("y", function(d, i) {
return i * 25+15;
})
.attr("fill","#ffffff")
.style("font-family", "Lato")
.style("font-size", "12px")
.text(function(d) { return d.Race});
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js