-
-
Save UNFPAmaldives/0da131789c4fe2ddc94fd5b74e171c2c to your computer and use it in GitHub Desktop.
Small Multiples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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