devdiva8/gr4gr8_math_v4.csv

## gr4gr8_math_v4.csv

          
            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

## index.html
<!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>
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>