D3 Examples - Ex 6 Time series line chart with newly created array

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- based on 2 charts in https://bl.ocks.org/mendozaline/30098ef152ac66a8992f  -->
        <meta charset="utf-8">
        <title>TEST Conditional Styling</title>
​
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
                <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            h1 {
                font-size: 24px;
                margin-left: 70px; padding-bottom:10px;
            }
​
            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="wrapper2">
​
    <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>
​
        <script type="text/javascript">     
​
            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,
                            });
​
            var svgTWO = d3.select("#second")
                            .append("svg")
                            .attr({
                                width: w,
                                height: h,
                            });
                            
            var svgTHREE = d3.select("#third")
                            .append("svg")
                            .attr({
                                width: w,
                                height: h,
                            });
                            
            var svgLEGEND = d3.select("#legend")
                            .append("svg")
                            .attr({
                                width: 200,
                                height: 300,
                            });                         
                            
​
            //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" ;          
​
        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 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>
    