Skip to content

Instantly share code, notes, and snippets.

@devdiva8
Created April 11, 2015 18:51
Show Gist options
  • Save devdiva8/397d86b6ca070e8d0580 to your computer and use it in GitHub Desktop.
Save devdiva8/397d86b6ca070e8d0580 to your computer and use it in GitHub Desktop.
Small Multiples
Year Jurisdiction Grade Measure Race Score
2013 Boston 8 algebra White 311
2013 Boston 8 algebra Black 278
2013 Boston 8 algebra Hispanic 278
2013 Boston 8 algebra All races 287
2013 Chicago 8 algebra White 299
2013 Chicago 8 algebra Black 264
2013 Chicago 8 algebra Hispanic 275
2013 Chicago 8 algebra All races 274
2013 San Diego 8 algebra White 307
2013 San Diego 8 algebra Black 265
2013 San Diego 8 algebra Hispanic 266
2013 San Diego 8 algebra All races 284
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exercise 3- Sorting Education data</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- small multiple code based on logic from
http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/ -->
<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;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
svg { background-color: #F9F1DD;
}
svg {margin-bottom:10px;}
rect {fill:#94B2BD;}
h1, p {
position: relative;
left: 10px;
color: #333333; }
div {text-align:left; width:650px; font-size:13px; font-weight: normal;padding-bottom:6px; }
</style>
</head>
<body>
<h1>Small Multiples<h1>
<div class="desc"><p>I used <strong>nest</strong> to sort my data by city and then used <strong>g grouping elements</strong> to construct charts in the SVG design.</p>
<p>Possible improvements:
<ul>
<li>Responsive design - This currently uses an SVG container, though I think a div container might better for responsive design.</li>
<li>Selecting svg elements - I was not successful in adding a rect to use as a background (e.g., white) in each small chart, because my bars code uses selectAll, which grabbed the background rect. I think selecting (via selectors?) could allow for the bar code to ignore the background rect.</li>
<li>Conditional display of Y axis in g grouping elements- In the limited presentation of 3 charts, I'd like to eliminate the Y-axis labels for the 2nd and 3rd charts, which might be possible using conditional formatting referencing index i.</li>
</ul>
</p></div>
<h2>Algebra Scores for U.S. 8th Grade Students by Race/ethnicity: 2013</h2>
<script type="text/javascript">
var w = 800; // svg container
var h = 140;
var cwidth =260; var cheight = 100; // dims for small multiple chart
var padding = [ 5, 5, 5, 55 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, cwidth -(padding[3])]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], cheight - padding[2] ], 0.3);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg=d3.select("body").append("svg").attr("width", w).attr("height", h);
d3.csv("gr4gr8_math_v4.csv", function(data) {
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.Score;
}) ]);
heightScale.domain(data.map(function(d) { return d.Race; } ));
// Nest data by Jurisdiction
var cities = d3.nest()
.key(function(d) { return d.Jurisdiction; })
.entries(data);
// Add an SVG element for each city, with the desired dimensions and margin.
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",cheight+30)
.attr("x",padding[3])
.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);
// bars
g
.selectAll("rect")
.data(function(d) {return d.values})
.enter()
.append("rect")
.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.Race);
})
.attr("width", function(d) {
return widthScale(+d.Score);
})
.attr("height", heightScale.rangeBand())
.append("title")
.text(function(d) {
return d.Jurisdiction + "'s 8th grade algebra score for " + d.Race + " is " + d.Score;
}) ;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment