D3 Examples - New Hampshire Democratic results map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>New Hampshire 2016</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
    <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script> 
</head>
​
<!-- CSS -->
<style>
    path {
        stroke:white;
        fill: #d3d3d3;
        stroke-width: 1px;
    }
     
    body {
        font-family: 'Proxima Nova', sans-serif;
    }
     
    .precinct {
        font: .75em;
        font-weight: bold;
    }
     
    div.tooltip {
        position: absolute;
        left: 75px;
        text-align: center;
        height: 16px;
        padding: 10px;
        font-size: .85em;
        background: #FFFFFF;
        border: 1px solid #989898;
        pointer-events: none;
    }
​
    .chart {
        max-width: 300px;
    }
​
    h1{
        font-size: 1.25em;
    }
​
    .source{
        font-size: 0.75em;
    }
​
    .Sanders {
        color: #cfdceb;
    }
​
    .Clinton {
        color: #2f5491;
    }
​
</style>
​
<body>
    <div class="info">
        <h1>Democratic Primary Results</h1>
        <p class="key">
            <span class="Clinton">&#9632</span> Clinton &nbsp;
            <span class="Sanders">&#9632</span> Sanders &nbsp;
        </p>
        <div class="g-chart"></div> 
        <p class="source"> Source: ABC News analysis, Associated Press</p>
    </div>
​
<script type="text/javascript">
    var width = 300, height = 520;
             
    var div = d3.select(".g-chart").append("div")
         .attr("class", "tooltip")
         .style("opacity", 0);
         
    var svg = d3.select(".g-chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("margin", "-15px auto");
         
    //Tells the nap what projection to use
    var projection = d3.geo.albersUsa()
        .scale(10000)
        .translate([-3000, 1575]);
​
    //Tells the map how to draw the paths from the projection
    var path = d3.geo.path()
        .projection(projection);
         
    queue()
        .defer(d3.json, "nh_final2.json")
        .defer(d3.csv, "nhmap.csv")
        .await(ready);
         
    function ready(error, nh, data) {
​
    //array map lookup (matching values from json to csv)
    var winnerById = {};
    data.forEach(function(d) { winnerById[d.id] = d.demwinner; });
​
    console.log(winnerById);
​
        //Moves selction to front
        d3.selection.prototype.moveToFront = function() {
            return this.each(function(){
                this.parentNode.appendChild(this);
            });
        }; 
​
        //Moves selction to back
        d3.selection.prototype.moveToBack = function() { 
            return this.each(function() { 
                var firstChild = this.parentNode.firstChild; 
                if (firstChild) { 
                    this.parentNode.insertBefore(this, firstChild); 
                } 
            }); 
        };
                
        svg.append("g")
            .attr("arcs", "precinct")
            .selectAll("path")
            .data(topojson.feature(nh, nh.objects.nh).features)
            .enter().append("path")
            .attr("d", path)
            .style("opacity", 1)
            .style("fill", function(d){
                if (winnerById[d.id] === "Sanders") {return "#cfdceb";}
                    else if (winnerById[d.id] === "Clinton") {return "#2f5491";}
                    else {return "#d3d3d3";}
            })
​
            .on("mouseover", function(d) {
                var sel = d3.select(this);
                sel.moveToFront();
                d3.select(this).transition().duration(300).style({'opacity': 1, 'stroke': 'black', 'stroke-width': 1.5});
                div.transition().duration(300)
                .style("opacity", 1)
                div.text(d.id + ": " + winnerById[d.id])
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY -30) + "px");
            })
                
            .on("mouseout", function() {
                var sel = d3.select(this);
                sel.moveToBack();
                d3.select(this)
                .transition().duration(300)
                .style({'opacity': 1, 'stroke': 'white', 'stroke-width': 1});
                div.transition().duration(300)
                .style("opacity", 0);
            })
    };
             
</script>
        
</body>
​
</html>
    