Small Multiples

<!DOCTYPE html>
<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: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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js