D3 Examples - Will's module 6 exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Will's mod6 exercise</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: sans-serif;
            }
​
            h1 {
                font-size: 30px;
                margin: 0;
            }
​
            p {
                font-size: 18px;
                margin: 10px 0 15px 0;
                color: black;
            }
​
            svg {
                background-color: whitesmoke;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: gray;
                shape-rendering: crispEdges;
            }
                      
            .y2.axis line {
                fill: none;
                stroke: gray;
                shape-rendering: crispEdges;
            }
                
            .axis text {
                font-family: sans-serif;
            
            }
​
            .x.axis text {font-size: 14px;}
            .x2.axis text {opacity: 0;}
            
            .y.axis text {font-size: 14px;}
            .y2.axis text {opacity: 0;}
    
​
        </style>
    </head>
    <body>
​
        <h1>The Great Divergence</h1>
​
        <p>Total contributions by PACs representing <strong style= "color: #00688B">corporations</strong> and <strong style= "color: #009ACD">labor unions</strong> per two-year election period (2014 dollars).</p>
        
​
        <script type="text/javascript">     
​
​
            
            var w = 750;
            var h = 500;
            var padding = [ 40, 60, 50, 60 ];  //Top, right, bottom, left
​
​
​
            var dateFormat = d3.time.format("%Y");
​
​
​
            var xScale = d3.time.scale()
                                .range([ padding[3], w - padding[1] ]);
            
            var yScale = d3.scale.linear()
                                .range([ padding[0], h - padding[2] ]);
​
​
//Configure axis generators
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .tickFormat(function(d) {return dateFormat(d);})
                            .ticks(d3.time.year, 4)
                            .tickSize(8)
                            ;
            
            var xAxis2 = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .tickFormat(function(d) {return dateFormat(d);})
                            .ticks(d3.time.year, 2)
                            ;
            
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .ticks(5)
                            .tickFormat(function(d){return "$"+d+"m";})
                            ;
            
            var yAxis2 = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .ticks(5)
                            .tickSize(0 - w + padding[1] + padding[3])
                            ;
​
​
​
//Configure line generator
            var line = d3.svg.line()
                .x(function(d) {
                    return xScale(dateFormat.parse(d.ElectionYear));
                })
                .y(function(d) {
                    return yScale(d.SpendingInf);
                });
​
​
//Create SVG
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
​
//Load PAC data
            d3.csv("PACdata-Corporations-Inf.csv", function(corpData) {
​
//Load Labor data
                d3.csv("PACdata-Labor-Inf.csv", function(laborData) {
​
//Create merged data
                    var mergedData = corpData.concat(laborData);
​
                    xScale.domain([ 
                        d3.min(mergedData, function(d) {
                            return dateFormat.parse(d.ElectionYear);
                        }),
                        d3.max(mergedData, function(d) {
                            return dateFormat.parse(d.ElectionYear);
                        })
                    ]);
​
                    yScale.domain([ 
                        d3.max(mergedData, function(d) {
                            return +d.SpendingInf;
                        }) + 16.6,
                        0
                    ]);
​
​
             //Draw axes
                    svg.append("g")
                        .attr("class", "x2 axis")
                        .attr("transform", "translate(0," + (h - padding[2]) + ")")
                        .call(xAxis2);  
                    
                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (h - padding[2]) + ")")
                        .call(xAxis);  
                 
                    
                    
                    svg.append("g")
                        .attr("class", "y2 axis")
                        .attr("transform", "translate(" + (padding[3]) + ",0)")
                        .call(yAxis2);
​
                    svg.append("g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (padding[3]) + ",0)")
                        .call(yAxis);
                    
                    
            //Draw lines
                    svg.data([ corpData ])
                        .append("path")
                        .attr("class", "line corp")
                        .attr("d", line)
                        .attr("fill", "none")
                        .attr("stroke", "#00688B")
                        .attr("stroke-width", 3);
​
                    svg.data([ laborData ])
                        .append("path")
                        .attr("class", "line labor")
                        .attr("d", line)
                        .attr("fill", "none")
                        .attr("stroke", "#009ACD")
                        .attr("stroke-width", 3);
                  
​
                });
                //End labor data load function
​
            });
            //End corp data load function
​
​
        </script>
​
    </body>
</html>
    