D3 Examples - Evan McMullin's Ballot Access

Evan McMullin's Ballot Access

Evan McMullin is a candidate for the 2016 Presidential Election of the United States.

This is a view of the current status of his ballot access as of 9/29/2016. His campaign is still seeking to get on the ballot in more states and so there will likely be changes in this map up until election day on 11/8/2016.

Created with D3 using the squaire library.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
​
body {
​
    font-family: "Helvetica Neue", "Helvetica", sans-serif;
}
​
#map-container {
    /*width: 960px;*/
    width: 960px;
    /*height: 700px;*/ /* need to make sure it's big enough or else the tooltips won't display */
}
​
</style>
​
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="squaire.js"></script>
<link rel="stylesheet" href="squaire.min.css">
​
<body>
​
<div id="map-container"></div>
​
<script>
​
/* basic setup */
var width = 960;
var height = 500;
​
var svg = d3.select("body").append("svg")
            .attr("height",height)
            .attr("width",width);
​
​
/* load data */
​
d3.json('mcmullin-ballot.json',function(data) {
​
    console.log(data);
    /* build data to pipe in, by state */
​
    stateData = {};
​
    data.forEach(function(state) {
​
        stateInfo = {};
        stateInfo['value'] = state['access_type'];
        stateInfo['name'] = state['name'];
        stateInfo['abbreviation'] = state['abbreviation'];
        stateInfo['access'] = state['access_type'];
        stateInfo['affiliation'] = state['affiliation'];
        stateInfo['electoral'] = state['electoral_college_votes'];
​
        stateData[state['abbreviation']] = stateInfo;
​
    });     
​
    console.log(stateData); 
​
    /* draw the map */
​
    // tooltip options
    var tooltip = {
        enabled: true,
        mode: 'dynamic',
        whitelist: ['access','affiliation','electoral']
    }
​
    var options = {
        //colors: d3.scaleQuantize().domain(["Y","N"]).range(["blue","gray"])
        //colors: d3.scale.category10()
        indexType: "string", // required in Squaire for ordinal scale
        colors: d3.scale.ordinal()
                    .domain(["ballot","write-in","none",""])
                    .range(["#377eb8","#ff7f00","#e41a1c","#999999"]),
                    //.range(["#a6cee3","#fdbf6f","#fb9a99","#cccccc"]),
        tooltip: tooltip
    };
​
    var map = new Squaire(stateData, options);
​
});
​
/*
var data = {
    "CA" : { "value" : "Y" },
    "CO" : { "value" : "N" },
    "MN" : { "value" : "Y" }
};
*/
​
​
</script>
​
</body>
​
    