All examples By author By category About

devdiva8

Full window Github gist

Ex 6 Time series line chart with newly created array

<!DOCTYPE html>
<html lang="en">
	<head>
		
		<meta charset="utf-8">
		<title>TEST Conditional Styling</title>

p {  font-size: 14px;margin: 10px 0 0 0;   }

svg {
				background-color: white;
			}

circle:hover {
				fill: orange;
			}

path {
				stroke: gray;
				stroke-width: 2;   
			}

g.highlight path {
				stroke: steelblue;
				stroke-width: 2;
			}

g.white path {
				stroke: #ead75e;  
				stroke-width: 2;
			}
					
			g.black path {
				stroke: #a7c9ce;  
				stroke-width: 2;
			}
						
			g.hispanic path {
				stroke: #808080;   
				stroke-width: 2;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>
<div id="wrapper">
	<h1>U.S. Algebra Scores-- gaps among race/ethnicity groups continue to persist</h1>
  <div id="first"></div>  
  <div id="second"></div>
  <div id="third"></div>      
</div>

<div id="fifth"><p></p>Algebra scores for U.S. 8th graders have increased measurably from 2003-2013.  However, in looking at some select cities, the gaps among race/ethncity groups continue to persist. (These gaps are typical in other jurisdictions.)</p>
		<p class="source">Source: <a href="https://nces.ed.gov/nationsreportcard/naepdata/">The National Assessment of Educational Progress (NAEP)</a>		
	</div>	
		<div id="legend"></div>
	
</div>

var w = 400;   
			var h = 200;   
			var padding = [ 25, 10, 50, 100 ];

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(6)  
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.ticks(8)  
							.orient("left");

var svg = d3.select("#first")
							.append("svg")
							.attr({
								width: w,
								height: h,
							});

//Configure line generator for first svg
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);  
				});

d3.csv("gr4gr8_math_years.csv", function(data) {

var city = "Boston" ;
			
				data = data.filter(function(d){return d.Grade == 8 && d.Measure=="algebra" 
				 && (d.Race=="Black" || d.Race =="White" || d.Race == "Hispanic")
				 && d.Jurisdiction == city 
			});
					//New array with all the years, for referencing later
					var years = [ "2003", "2005", "2007", "2009", "2011", "2013"];

//Create a new, empty array to hold our restructured dataset
					var dataset = [];

//Loop once for each row in data
					for (var i = 0; i < data.length; i++) {

//Create new object with this country's name and empty array
						dataset[i] = {
							race: data[i].Race,  
							scores: [] ,
							cityname: data[i].Jurisdiction 
						};

//Loop through all the years
						for (var j = 0; j < years.length; j++) {

// If value is not empty
							if (data[i][years[j]]) {
								//Add a new object to the emissions data array
								//for this country
								dataset[i].scores.push({		
									year: years[j],				
									amount: data[i][years[j]]   
								});
							}

}

}
				
					//Uncomment to log the original data to the console
					 console.log(data);

//Uncomment to log the newly restructured dataset to the console
					 console.log(dataset);

//Set scale domains
					xScale.domain([ 
						d3.min(years, function(d) {
							return dateFormat.parse(d);
						}),
						d3.max(years, function(d) {
							return dateFormat.parse(d);
						})
					]);

yScale.domain([ 
						320,
						200
					]);

//Make a group for each race
					var groups = svg.selectAll("g")
						.data(dataset)
						.enter()
						.append("g")
					
						.classed("black", function(d) {
							if (d.race == "Black" 
						) {           
								return true;
							} else {
								return false;
							}
						})
					
						.classed("white", function(d) {
							if (d.race == "White" 
						) {           
								return true;
							} else {
								return false;
							}
						})
					
					
						.classed("hispanic", function(d) {
							if (d.race == "Hispanic" 
						) {           
								return true;
							} else {
								return false;
							}
						});

//Append tooltip
					groups.append("title")
						.text(function(d) {
							return (d.cityname +", "+ d.race  + " " );   
						});

groups.selectAll("path")
						.data(function(d) {
							return [ d.scores ];   
						})
						.enter()
						.append("path")
						.attr("class", "line")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke-width", 2);

//Axes
					svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(0," + (h - padding[2]) + ")")
						.call(xAxis);

svg.append("g")
						.attr("class", "y axis")
						.attr("transform", "translate(" + (padding[3]) + ",0)")
						.call(yAxis);
									 			
	 // add city label
					   svg.append("g")
					   .attr("class", "citytitle")
	  				 .append("text")
	   				 .attr("y",(padding[0]-12))  
					   .attr("x",((w-.5*padding[3])/2))  
					   .text(city)	;
		
				});   	//End data load function
				
				
/* ************  svgTWO    ********************  */
				
			var lineTWO = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);  
				});							
	
	d3.csv("gr4gr8_math_years.csv", function(data) {

var city = "Chicago" ;

data = data.filter(function(d){return d.Grade == 8 && d.Measure=="algebra" 
		 && (d.Race=="Black" || d.Race =="White" || d.Race == "Hispanic")
		 && d.Jurisdiction == city 
	});
			//  New array with all the years, for referencing later
	var years = [ "2003", "2005", "2007", "2009", "2011", "2013"];

//Create a new, empty array to hold our restructured dataset
			var datasetTWO = [];

//Loop once for each row in data
			for (var i = 0; i < data.length; i++) {

//Create new object with this country's name and empty array
				datasetTWO[i] = {
					race: data[i].Race,  
					scores: [] ,
					cityname: data[i].Jurisdiction  
				};

//Loop through all the years
				for (var j = 0; j < years.length; j++) {

// If value is not empty
					if (data[i][years[j]]) {
						//Add a new object to the emissions data array
						//for this country
						datasetTWO[i].scores.push({		// emissions
							year: years[j],				// year:   
							amount: data[i][years[j]]   // amount:  
						});
					}

}

}
		
			//Uncomment to log the original data to the console
			 console.log(data);

//Uncomment to log the newly restructured dataset to the console
			 console.log(datasetTWO);

//Set scale domains
			xScale.domain([ 
				d3.min(years, function(d) {
					return dateFormat.parse(d);
				}),
				d3.max(years, function(d) {
					return dateFormat.parse(d);
				})
			]);

yScale.domain([ 
				320,
				200
			]);

//Make a group for each race
			var groupsTWO = svgTWO.selectAll("g")  
				.data(datasetTWO)
				.enter()
				.append("g")
	
				.classed("black", function(d) {
					if (d.race == "Black" 
				) {           
						return true;
					} else {
						return false;
					}
				})
			
				.classed("white", function(d) {
					if (d.race == "White" 
				) {           
						return true;
					} else {
						return false;
					}
				})
			
			
				.classed("hispanic", function(d) {
					if (d.race == "Hispanic" 
				) {           
						return true;
					} else {
						return false;
					}
				});

//Append  tooltips
			groupsTWO.append("title")
				.text(function(d) {
					return (d.cityname +", "+ d.race  + " " );   
					
				});

//Within each group, create a new line/path,
			//binding just the emissions data to each one
			groupsTWO.selectAll("path")
				.data(function(d) {
					return [ d.scores ];   
				})
				.enter()
				.append("path")
				.attr("class", "line")
				.attr("d", line)        
				.attr("fill", "none")
				.attr("stroke-width", 2);

//Axes
			svgTWO.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + (h - padding[2]) + ")")
				.call(xAxis);

svgTWO.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding[3]) + ",0)")
				.call(yAxis);
							 			
// add city label
			   svgTWO.append("g")
			   .attr("class", "citytitle")
 				 .append("text")
  				 .attr("y",(padding[0]-12))  
  			//	 .attr("x",(padding[3]+padding[1]+w)/2)
			   .attr("x",((w-.5*padding[3])/2))  
			   .text(city)	;

});   	//End data load function
	
/* ************  svgTHREE    ********************  */
				
			var lineTHREE = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);  
				});							
	
	d3.csv("gr4gr8_math_years.csv", function(data) {

var city = "Houston" ;

//Create a new, empty array to hold our restructured dataset
			var datasetTHREE = [];

//Loop once for each row in data
			for (var i = 0; i < data.length; i++) {

//Create new object with this country's name and empty array
				datasetTHREE[i] = {
					race: data[i].Race,  // country    countryName
					scores: [] ,
					cityname: data[i].Jurisdiction // NEW  
				};

//Loop through all the years
				for (var j = 0; j < years.length; j++) {

// If value is not empty
					if (data[i][years[j]]) {
						//Add a new object to the emissions data array
						//for this country
						datasetTHREE[i].scores.push({		// emissions
							year: years[j],				// year:   
							amount: data[i][years[j]]   // amount:  
						});
					}

}

}
		
			//Uncomment to log the original data to the console
			 console.log(data);

//Uncomment to log the newly restructured dataset to the console
			 console.log(datasetTHREE);

//Set scale domains
			xScale.domain([ 
				d3.min(years, function(d) {
					return dateFormat.parse(d);
				}),
				d3.max(years, function(d) {
					return dateFormat.parse(d);
				})
			]);

yScale.domain([ 
				320,
				200
			]);

//Make a group for each race
			var groupsTHREE = svgTHREE.selectAll("g")  
				.data(datasetTHREE)
				.enter()
				.append("g")
	
				.classed("black", function(d) {
					if (d.race == "Black" 
				) {           
						return true;
					} else {
						return false;
					}
				})
			
				.classed("white", function(d) {
					if (d.race == "White" 
				) {           
						return true;
					} else {
						return false;
					}
				})
			
			
				.classed("hispanic", function(d) {
					if (d.race == "Hispanic" 
				) {           
						return true;
					} else {
						return false;
					}
				});

//Append tooltips
			groupsTHREE.append("title")
				.text(function(d) {
					return (d.cityname +", "+ d.race  + " " );   
					
				});

//Within each group, create a new line/path,
			//binding just the emissions data to each one
			groupsTHREE.selectAll("path")
				.data(function(d) {
					return [ d.scores ];   
				})
				.enter()
				.append("path")
				.attr("class", "line")
				.attr("d", line)       
				.attr("fill", "none")
				.attr("stroke-width", 2);

//Axes
			svgTHREE.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + (h - padding[2]) + ")")
				.call(xAxis);

svgTHREE.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding[3]) + ",0)")
				.call(yAxis);
							 			
// add city label
			   svgTHREE.append("g")
			   .attr("class", "citytitle")
 				 .append("text")
  				 .attr("y",(padding[0]-12))  
  			//	 .attr("x",(padding[3]+padding[1]+w)/2)
			   .attr("x",((w-.5*padding[3])/2))  
			   .text(city)	;

});   	//End data load function  svgTHREE
	
//  LEGEND			
		
		
var color = d3.scale.ordinal()
	        .domain(["White","Black","Hispanic"])
	        .range(["#ead75e","#a7c9ce","#808080"]);	
							 
				     var legendSpacing = 3;
				       var legendRectSize = 10;
				       var legend = svgLEGEND.selectAll('.legend')
				         .data(color.domain())
				         .enter()
				         .append('g')
				         .attr('class', 'legend')
				         .attr('transform', function(d, i) {
				         
						   var height = legendRectSize + legendSpacing;
				           var offset =  height * color.domain().length / 2;
				           var horz = 7  * legendRectSize;
				           var vert = i * height - offset+ 30;
				           return 'translate(' + horz + ',' + vert + ')';
						   
				         });

legend.append('rect')
				       .attr('width', legendRectSize)
				       .attr('height', legendRectSize)
				       .style("fill", function(d) { return (color(d))})

legend.append('text')
				       .attr('x', legendRectSize + legendSpacing)
				       .attr('y', legendRectSize - legendSpacing)
					  .text(function(d) { return d; });
							
			</script>

</body>
</html>

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

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