D3 Examples - D3 Module 6 (Multiple Line Chart)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 4 Exercise</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, sans-serif;
            }
​
            h1 {
                font-size: 28px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 5;
            }
​
            svg {
                background-color: silver;
            }
​
            path:hover {
                stroke-width:4;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
​
        </style>
    </head>
    <body>
​
        <h1>The Race of the Scottish Parliament</h1>
​
        <p>How the four biggest political parties in Scotland squared off in the campaign spending stakes during the last Scottish Parliament elections. Source: <a href="https://search.electoralcommission.org.uk">The Electoral Commission</a> as of April 2015.</p>
​
        <script type="text/javascript">     
​
​
            var w = 650;
            var h = 500;
            var padding = [ 10, 20, 40, 75];  //Top, right, bottom, left
​
​
​
            var dateFormat = d3.time.format("%-m/%-d/%y");
​
            var xScale = d3.time.scale()
                                .range([padding[3],w - padding[1]]);
            
            var yScale = d3.scale.linear()
                                .range([ padding[0], h - padding[2] ]);
​
            var commasFormatter = d3.format(",.0f");
​
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(10)
                            .tickFormat(function(d) { return dateFormat(d);})
                            .outerTickSize(0);
​
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            . ticks(10)
                            .tickFormat(function(d) { return "£" + commasFormatter(d);})
                            .outerTickSize(0);
​
            var line = d3.svg.line()
                .x(function(d){
                    return xScale(dateFormat.parse(d.date));
                    })
                .y(function(d){
                    return yScale(+d.amount);
                })
​
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
​
            d3.csv("CampaignSpending3.csv", function(data) {
​
                xScale.domain([d3.min(data,function(d) {
                    return dateFormat.parse(d.SpendingDate);}),d3.max(data, function(d) {
                    return dateFormat.parse(d.SpendingDate);
                }) ]);
​
                yScale.domain([d3.max(data,function(d) {
                    return +d.ScotlandSpending;}),d3.min(data, function(d) {
                    return +d.ScotlandSpending;
                }) ]);
​
            var parties = ['Conservative Party','Labour Party','Liberal Democrats','Scottish National Party (SNP)'];
​
    
                
                var newData = [];
​
                for(var i=0;i<parties.length;i++){
                    newData[i]={
                        party: parties[i],
                        spending: []
                    };
                    for (var j=0;j<data.length;j++){
                        if(data[j].PoliticalParty==parties[i]){
                                    newData[i].spending.push({
                                    date:data[j].SpendingDate,
                                    amount:data[j].ScotlandSpending
                            });
                        }
                        
                    }
                
                }
                
                var groups = svg.selectAll("g")
                                .data(newData)
                                .enter()
                                .append("g");
​
                groups.append("title")
                    .text(function(d) {
                        return d.party
                    });
​
                groups.append("path")
                    .attr("class","line")
                    .attr("d",function(d){return line(d.spending);})
                    .attr("fill","none")
                    .attr("stroke",function(d){
                        if (d.party=="Conservative Party"){
                            return "blue"}
                        else if (d.party=="Labour Party"){
                            return "red"}
                        else if (d.party=="Liberal Democrats"){return "orange"}
                        else if (d.party=="Scottish National Party (SNP)"){return "yellow"}
                    ;})
                    .attr("stroke-width",2)
                    .attr("data-legend",function(d){return d.party});
​
​
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
                    .call(yAxis);
​
​
                    legend = svg.append("g")
                        .attr("class","legend")
                        .attr("transform","translate(125,75)")
                         .style("font-size","10px")
                         .style("stroke","black")
                         .style("fill","white")
                         .call(d3.legend)
​
​
            });
​
//d3.legend hack courtesy of https://bl.ocks.org/ZJONSSON/3918369
​
(function() {
d3.legend = function(g) {
  g.each(function() {
    var g= d3.select(this),
        items = {},
        svg = d3.select(g.property("nearestViewportElement")),
        legendPadding = g.attr("data-style-padding") || 5,
        lb = g.selectAll(".legend-box").data([true]),
        li = g.selectAll(".legend-items").data([true])
​
    lb.enter().append("rect").classed("legend-box",true)
    li.enter().append("g").classed("legend-items",true)
​
    svg.selectAll("[data-legend]").each(function() {
        var self = d3.select(this)
        items[self.attr("data-legend")] = {
          pos : self.attr("data-legend-pos") || this.getBBox().y,
          color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke") 
        }
      })
​
    items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})
​
    
    li.selectAll("text")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("text")})
        .call(function(d) { d.exit().remove()})
        .attr("y",function(d,i) { return i+"em"})
        .attr("x","1em")
        .text(function(d) { ;return d.key})
    
    li.selectAll("circle")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("circle")})
        .call(function(d) { d.exit().remove()})
        .attr("cy",function(d,i) { return i-0.25+"em"})
        .attr("cx",0)
        .attr("r","0.4em")
        .style("fill",function(d) { console.log(d.value.color);return d.value.color})  
    
    // Reposition and resize the box
    var lbbox = li[0][0].getBBox()  
    lb.attr("x",(lbbox.x-legendPadding))
        .attr("y",(lbbox.y-legendPadding))
        .attr("height",(lbbox.height+2*legendPadding))
        .attr("width",(lbbox.width+2*legendPadding))
  })
  return g
}
})()
        
​
​
        </script>
​
    </body>
</html>
    