Democratic Primary 2016

README.md

Democratic Primary 2016 by CD

Background

The purpose of this map as detailed on Daily Kos is to represent the congressional districts in the United States accurately. Currently it is difficult to show the districts because some such as those in New York City are very small, while others like Montana are the size of an entire state. Previosly the maps needed to be zoomable to see the districts containing cities. Other represntations such as cartograms warped the country's shape. This map attempts to fix that by giving each congressional district equal area i.e. five regular hexagons.

The map was built by Daniel Donner.

I ported the map using d3 to make it easier to use.

The raw data on the race comes from The Green Papers, but I adapted it slightly to my use in google sheet.

The map only looks as pledged delegates, and does not try to represent super delegates at this stage. The color scheme is the same as the New York Times National Map because I love it so much and the colors look nice.

Data Sets

State Delegate Count

This map shows the delegates as they are allocated to an entire state. The margin of victory in a state determines the color of the state. Texas is solid blue as it was decisively by Clinton. Idaho is solid green as it was won by Sanders. Illinois is white because they got an equal number of delegates.

Primary Vote Share by State

This map shows the margin of victory in a particular state. Illinois is slightly blue because Clinton won this by a close margin.

Delegates by CD

This map shows the delegates as they are allocated per congressional district. Many of these districts are white because both candidates got the same number of delegates. This map does not show any delegates that are allocated at-large. Also this map does not accurately represent Texas because Texas delegates are reporteed by state senate district, not congressional district. Thus the first 31 congressional districts are approximated to be the 31 senatorial districts, and the last 5 are just colored in using the total state margin.

Primary Vote by CD

This map shows the margin of victory of the votes in each congressional district. Every district was won by one of the two candidates, so none are white.

bernie_map2.png

colorBuilder.js

// this is the javascript file that has all the functions that regarding color

var color = d3.scale.linear() // initial color scale for the demographic data
    .range(['rgb(247,252,245)','rgb(229,245,224)','rgb(199,233,192)','rgb(161,217,155)','rgb(116,196,118)','rgb(65,171,93)','rgb(35,139,69)','rgb(0,109,44)','rgb(0,68,27)']);

var eleven_domain = [-1.0,-0.3,-0.2,-0.1,-0.05,0.0,0.05,0.1,0.2,0.3,1.0]; 

var primaryColor = d3.scale.linear()
    .domain([-1.0,-.7,-.5,-.2,-.1,-.05,-.025,0.0,.025,.05,.1,.2,.5,.7,1.0, 10.0])
    .range(['#6ba347','#81b061','#97bd7b','#acca95','#c1d8af','#d5e5c9','#eaf1e3','#ffffff','#e6edf6','#cedcec','#b5cae3','#9cb9d9','#81a8d0','#6598c6','#4488bd', '#ffeeef']);

var shadeRange = ['#6BA347','#95C077','#BFDEA9','#E4F9D6','#FFF','#E0F0FD','#B3CFE9','#7FAAD3','#4488BD'];

var stateColor = ["#A94588","#D76940","#D13F46","#23A5C5", "#F0A851", "#F0A851", "#A94588", "#23A5C5", "#228947", "#2B6AA1", "#D13F46", "#A94588", "#A94588",
 "#2B6AA1", "#F0A851", "#D76940", "#D13F46", "#D13F46", "#6EAE51", "#A94588", "#A94588", "#D76940", "#D13F46", "#F0A851", "#228947", "#D76940", "#23A5C5",
  "#23A5C5", "#D13F46", "#6EAE51", "#A94588", "#2B6AA1", "#23A5C5", "#2B6AA1", "#6EAE51", "#2B6AA1", "#2B6AA1", "#D13F46", "#23A5C5", "#6EAE51", "#6EAE51",
   "#D76940", "#6EAE51", "#228947", "#F0A851", "#F0A851", "#D13F46", "#726198", "#726198", "#726198"];

function buildColorDomain(i, extent) {
    var colorDomain = [];

    if (i < 6 || i > 7) {
        var j = 0;
        for (i = extent[0]; i <= (extent[1]+.01); i += ((extent[1]+.01) - extent[0])/8.0)
            colorDomain[j++] = i;
    } else
            colorDomain = [.18, .3, .35, .4, .45, .55, .6, .65, .7, .97];
    
    return colorDomain;
}

function updateHexagonColor(i) { // fills in the hexagons with the correct color according to the scale

    hexagons
        .transition()
        .delay(500)
        .style({fill:   function(d) {return getDistrictColor(d.properties.districtID,i);    },
                stroke: function(d) {return getDistrictColor(d.properties.districtID,i);    }});

}

function getDistrictColor(districtID,i) {
    if (districtID != -1)
        return color(dataByDistrictID[districtID][i])

}

function getStateColor(stateID) {
    if (stateID != -1)
        return stateColor[stateID];
}

function getPrimaryShade(d) {
    if (d <= -.3)
        return shadeRange[0]
    if (d >= .3)
        return shadeRange[8];
    if (d <= -.2)
        return shadeRange[1];
    if (d >= .2)
        return shadeRange[7];
    if (d <= -.1)
        return shadeRange[2];
    if (d >= .1)
        return shadeRange[6];
    if (d <= -.0002)
        return shadeRange[3];
    if (d >= .0002)
        return shadeRange[5];
    else
        return shadeRange[4];
}

function getDelegateShade(d) {

    if (d <= -9)
        return shadeRange[0];
    if (d <= -4)
        return shadeRange[1];
    if (d <= -2)
        return shadeRange[2];
    if (d < 0.0)
        return shadeRange[3];
    if (d == 0.0)
        return shadeRange[4];
    if (d < 0.0)
        return shadeRange[5];
    if (d <= 2)
        return shadeRange[6];
    if (d <= 4)
        return shadeRange[7];
    if (d >= 9)
        return shadeRange[8];
}

function getPrimaryColor(d,i) {
    if (i == 1) // if looking at delegates per district
        d = d/9.0;

    return primaryColor(d);

}


function getDelegateStateColor(stateID) {
    if (stateID != -1) {
        if (isNaN(primaryByStateID[stateID][0]))
            return '#ffeeef';
        else {
            // return getPrimaryShade(primaryByStateID[stateID][0]);
            return getPrimaryColor(primaryByStateID[stateID][0],0);
        }
    }
}

function getPrimaryDelegates(districtID) {
    if (districtID != -1) {
        if (isNaN(primaryByDistrictID[districtID][2]))
            return '#ffeeef';
        else {
            // return getDelegateShade(primaryByDistrictID[districtID][2]);
            return getPrimaryColor(primaryByDistrictID[districtID][2],1);
        }
    }
}

function getPrimaryVote(districtID) {
    if (districtID != -1) {
        if (isNaN(primaryByDistrictID[districtID][6]))
            return '#ffeeef';
        else {
            // return getPrimaryShade(primaryByDistrictID[districtID][6]);
            return getPrimaryColor(primaryByDistrictID[districtID][6],0);
        }
    }
}

function getVoteStateColor(stateID) {
    if (stateID != -1) {
        if (isNaN(primaryByStateID[stateID][1]))
            return '#ffeeef';
        else {
            // return getPrimaryShade(primaryByStateID[stateID][1]);
            return getPrimaryColor(primaryByStateID[stateID][1],0);
        }
    }
}

function updateVoteHexagonColor() {

    hexagons
        .transition()
        .delay(500)
        .style({fill:   function(d) {return getVoteDistrictColor(d.properties.districtID);  },
                stroke: function(d) {return getVoteDistrictColor(d.properties.districtID);  }});

}

function updateBernieHexagonColor() {

    hexagons
        .transition()
        .delay(500)
        .style({fill:   function(d) {return getBernieDistrictColor(d.properties.bernieBin); },
                stroke: function(d) {return getBernieDistrictColor(d.properties.bernieBin); }});

}

hexscript.js

var width = 1250;
var height = 730;
var radius = 6.5;

var hexagons;
var demoData;
var districtList = {};
var voteByDistrictID = {};
var dataByDistrictID = {};
var primaryByStateID = {};
var primaryByDistrictID = {};
var specificDistrictID = -2;

var toolTipSelector = 0;

var legendRectSize = 15;
var legendSpacing = 7;

var bernieBorder;
var binSelector = -1;

var svg = d3.select(".map").append("svg")
    .attr("width", width)
    .attr("height", height);

var svgLegend = d3.select(".legendChart").append("svg")
    .attr("height", "3200px")
    .attr("width", "162px");

queue()
    .defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/UnitedStatesHex/Democratic-Primary/ushex.json")
    .defer(d3.csv, "https://raw.githubusercontent.com/alecrajeev/UnitedStatesHex/Democratic-Primary/primary_state_results.csv")
    .defer(d3.csv, "https://raw.githubusercontent.com/alecrajeev/UnitedStatesHex/Democratic-Primary/primary_district_results.csv")
    .await(makeMyMap);


function makeMyMap(error, ushex, delegateStateData, primaryData) {
    if (error) {
        return console.warn(error);
    }

    delegateStateData.forEach(function (d) {
        d.stateID = +d.stateID;
        d.DifferencePreportion = +d.DifferencePreportion;
        d.DifferenceVotePreportion = +d.DifferenceVotePreportion;
        d.ClintonDelegates = +d.ClintonDelegates;
        d.SandersDelegates = +d.SandersDelegates;
        d.ClintonPreportion = +d.ClintonPreportion;
        d.SandersPreportion = +d.SandersPreportion;
        primaryByStateID[d.stateID] = [d.DifferencePreportion, d.DifferenceVotePreportion, d.ClintonDelegates, d.SandersDelegates, d.ClintonPreportion, d.SandersPreportion];
    });

    primaryData.forEach(function (d) {
        d.districtID = +d.districtID;
        early = false;
        if (d.ClintonVotes == "NA")
            early = true;

        d.ClintonDelegates = +d.ClintonDelegates;
        d.SandersDelegates = +d.SandersDelegates;
        d.DifferenceDelegates = +d.DifferenceDelegates;
        d.DifferencePreportionVotes = +d.DifferencePreportionVotes;

        primaryByDistrictID[d.districtID] = [d.ClintonDelegates, d.SandersDelegates, d.DifferenceDelegates, d.ClintonVotes, d.SandersVotes, d.DifferenceVotes, d.DifferencePreportionVotes, d.ClintonPreportion, d.SandersPreportion, early];
    })
    
    var projection = hexProjection(radius);

    var path = d3.geo.path().projection(projection);

    var hexFeatures = topojson.feature(ushex, ushex.objects.states).features;

    hexagons = svg.append("g").attr("class", "hexagon").selectAll("hexagon")
        .data(hexFeatures)
        .enter()
        .append("path")
        .attr("d", path)
        .style({fill:   function(d) {return getDelegateStateColor(d.properties.stateID);    },
                stroke: function(d) {return getDelegateStateColor(d.properties.stateID);    }})
        .on("mouseover", hoverOnDistrict)

    var stateBorder = svg.append("path")
        .attr("class", "stateBorder")
        .call(drawStateBorder);

    var districtBorder = svg.append("path")
        .attr("class", "districtBorder")
        .call(drawDistrctBorder);

    var specificDistrict = svg.append("path")
        .attr("class", "specificBorder")
        .call(drawSpecificDistrict);

    showLegend(0);

    drawBernieBorder = function (border) {
        border.attr("d", path(topojson.mesh(ushex, ushex.objects.states, checkBorderByBernie)));
    }

    bernieBorder = svg.append("path")
        .attr("class", "bernieBorder")
        .call(drawBernieBorder);

    function hoverOnDistrict(d) {
        specificDistrictID = d.properties.districtID;
        specificDistrict.call(drawSpecificDistrict);
        changeTooltip(d);
    }

    function drawSpecificDistrict(border) {
        border.attr("d", path(topojson.mesh(ushex, ushex.objects.states, checkSpecificDistrict)));
    }   

    function drawDistrctBorder(border) {
        border.attr("d", path(topojson.mesh(ushex, ushex.objects.states, checkBorderByDistrict)));
    }

    function drawStateBorder(border) {
        border.attr("d", path(topojson.mesh(ushex, ushex.objects.states, checkBorderByState)));
    }

    function checkBorderByBernie(hex1, hex2) {

        hex1 = hex1.properties.bernieBin;
        hex2 = hex2.properties.bernieBin;
        
        hex1 = (hex1 == binSelector ? true : false);
        hex2 = (hex2 == binSelector ? true : false);

        return hex1 != hex2;
    }

    function checkSpecificDistrict(hex1, hex2) {
        if (specificDistrictID < 0) // if there is no specific district to be highlighted
            return false;

        if (hex1.properties.districtID != specificDistrictID && 
            hex2.properties.districtID != specificDistrictID)
            // if when traversing the hexmesh you are not near the specific district
            return false;
        
        if (hex1.properties.state == hex2.properties.state)
            return hex1.properties.district != hex2.properties.district;
        else
            return true;
    }

    function checkBorderByDistrict(hex1, hex2) {
        if (hex1.properties.state == hex2.properties.state)
            return hex1.properties.district != hex2.properties.district;
        else
            return true;
    }

    function checkBorderByState(hex1, hex2) {
        return hex1.properties.state != hex2.properties.state;
    }

    function hexProjection(radius) { // comes from Mike Bostock's hexagon mesh source code
        var dx = radius * 2 * Math.sin(Math.PI / 3),
            dy = radius * 1.5;
        return {
            stream: function(stream) {
                return {
                    point: function(x, y) { stream.point(x * dx / 2, (y - (2 - (y & 1)) / 3) * dy / 2); },
                    lineStart: function() { stream.lineStart(); },
                    lineEnd: function() { stream.lineEnd(); },
                    polygonStart: function() { stream.polygonStart(); },
                    polygonEnd: function() { stream.polygonEnd(); }
            };
          }
        };
    }
}

function showStates() {
    d3.select(".header").text("States");
    hexagons
        .style({fill:   function(d) {return getStateColor(d.properties.stateID);    },
                stroke: function(d) {return getStateColor(d.properties.stateID);    }});
    d3.select(".legend").style("display", "none");
    d3.select(".voteLegend").style("display", "none");
    toolTipSelector = 0;
}

function showStateDelegates() {
    d3.select(".header").text("Democratic Primary Delegates by State");
    hexagons
        .style({fill: function(d) {return getDelegateStateColor(d.properties.stateID);  },
                stroke: function(d) {return getDelegateStateColor(d.properties.stateID);        }});
    d3.select(".legend").style("display", "");
    toolTipSelector = 0;
    showLegend(0);
}

function showCongressionalDelegates() {
    d3.select(".header").text("Democratic Primary Delegates by Congressional District");
    hexagons    
        .style({fill: function (d) {return getPrimaryDelegates(d.properties.districtID);    },
                stroke: function(d) {return getPrimaryDelegates(d.properties.districtID);   }});
    toolTipSelector = 1;
    d3.select(".legend").style("display", "");
    showLegend(1)

}

function showStateVotes() {
    d3.select(".header").text("Democratic Primary Vote by State");
    hexagons  
        .style({fill: function(d) {return getVoteStateColor(d.properties.stateID);  },
                stroke: function(d) {return getVoteStateColor(d.properties.stateID);    }});
    toolTipSelector = 2;
    d3.select(".legend").style("display", "");
    showLegend(0);
}

function showPrimaryDistrictVote() {
    d3.select(".header").text("Democratic Primary Vote by Congressional District");
    hexagons   
        .style({fill: function(d) {return getPrimaryVote(d.properties.districtID);  },
                stroke: function(d) {return getPrimaryVote(d.properties.districtID);        }});
    d3.select(".legend").style("display", "none");
    toolTipSelector = 4;
    d3.select(".legend").style("display", "");
    showLegend(0)
}

function showLegend(j) {


    var LegendContent = svgLegend.selectAll(".LegendContent")
        .data(primaryColor.domain())
    
    var LegendEnter = LegendContent.enter()
        .append("g")
        .attr("class", "LegendContent")
        .attr("transform", function(d,i) {
            var rectHeight = i*(legendRectSize + legendSpacing);
            var rectWidth = legendRectSize;
            return "translate(" + rectWidth + ", " + rectHeight + ")";
        })
    
    LegendEnter.append("rect")
        .attr("width", legendRectSize-2)
        .attr("height", legendRectSize)
        .style("fill", function(d) {return primaryColor(d)})
        .style("stroke", "black")
    
    LegendEnter.append("text")
        .attr("x", legendRectSize + legendSpacing*1.3)
        .attr("y", legendRectSize-1)
        .text(function(d,i) {
            number = d3.round(d*100,1).toString() + "%";
            text = "";

            if (i == 14) {
                return "No Contest"
            }

            if (i < 7) {
                text = " B";
            }
            if (i >= 7) {
                text = " H";
            }


            return number + text;
        });
    
    var updateSelection = svgLegend.selectAll(".LegendContent")
        .transition()
        .duration(1000)
        .style("opacity", "1")
        .attr("transform", function(d,i) {
            var rectHeight = i*(legendRectSize + legendSpacing);
            var rectWidth = legendRectSize;
            return "translate(" + rectWidth + ", " + rectHeight + ")";
        })
    
    updateSelection.select("rect")
        .style("fill", function(d) {return primaryColor(d);    });
    
    updateSelection.select("text")
        .text(function(d, i) {
            if (d < 0)
                d *= -1.0;

            if (i == 15) {
                return "No Contest"
            }


            number = d3.round(d*100,1).toString() + "%";
            text = "";
            if (i < 7) {
                text = " B";
            }
            if (i > 7) {
                text = " H";
            }

            return number + text;
        });
    
    LegendContent.exit()
        .remove();
}

function changeTooltip(d) {
    if (d.properties.state != "Ocean") { // if you ARE on a district
        d3.select(".whichState").text(d.properties.state);
        d3.select(".whichDistrict").text(getRealDistrict(d.properties.district, d.properties.state));

        if (toolTipSelector == 0) {
            d3.select(".toolTipA").text("Clinton Delegates: " + grabStateInfo(d.properties.stateID, d.properties.districtID,  2));
            d3.select(".toolTipB").text("Sanders Delegates: " + grabStateInfo(d.properties.stateID, d.properties.districtID, 3));
        }
        if (toolTipSelector == 1) {
            d3.select(".toolTipA").text("Clinton Delegates: " + grabDistrictInfo(d.properties.districtID, 0));
            d3.select(".toolTipB").text("Sanders Delegates: " + grabDistrictInfo(d.properties.districtID, 1));
        }
        if (toolTipSelector == 2) {
            d3.select(".toolTipA").text("Clinton Pct.: " + grabStateInfo(d.properties.stateID, d.properties.districtID, 4));
            d3.select(".toolTipB").text("Sanders Pct.: " + grabStateInfo(d.properties.stateID, d.properties.districtID, 5));
        }
        if (toolTipSelector == 3) {
            d3.select(".toolTipA").text("Clinton Pct.: " + grabDistrictInfo(d.properties.districtID, 7));
            d3.select(".toolTipB").text("Sanders Pct.: " + grabDistrictInfo(d.properties.districtID, 8));
        }
        if (toolTipSelector == 4) {
            d3.select(".toolTipA").text("Clinton Pct.: " + grabDistrictInfo(d.properties.districtID, 7));
            d3.select(".toolTipB").text("Sanders Pct.: " + grabDistrictInfo(d.properties.districtID, 8));
        }
    }
    else { // if you are NOT on a district
        d3.select(".whichState").text("");
        d3.select(".whichDistrict").text("");
        if (toolTipSelector == 0) {
            d3.select(".toolTipA").text("Clinton Delegates: ");
            d3.select(".toolTipB").text("Sanders Delegates: ");
        }
        if (toolTipSelector == 1) {
            d3.select(".toolTipA").text("Clinton Delegates: ");
            d3.select(".toolTipB").text("Sanders Delegates: ");
        }
        if (toolTipSelector == 2) {
            d3.select(".toolTipA").text("Clinton Pct.: ");
            d3.select(".toolTipB").text("Sanders Pct.: ");
        }
        if (toolTipSelector == 3) {
            d3.select(".toolTipA").text("Clinton Pct.: ");
            d3.select(".toolTipB").text("Sanders Pct.: ");
        }
        if (toolTipSelector == 4) {
            d3.select(".toolTipA").text("Clinton Pct.: ");
            d3.select(".toolTipB").text("Sanders Pct.: ");
        }
        
    }
}

function grabDistrictInfo(districtID, i) {
    if (primaryByDistrictID[districtID][9])
        return "";
    return primaryByDistrictID[districtID][i];
}

function grabStateInfo(stateID, districtID, i) {
    if (primaryByDistrictID[districtID][9])
        return "";

    if (i >= 4)
        return d3.round(primaryByStateID[stateID][i]*100.0, 2) + "%";
    if (i < 4)
        return primaryByStateID[stateID][i];
}

function getRealDistrict(i, state) { // returns "at large" if the district number is 0, like Montana
    if (i > 0)
        return i;
    return "At-Large";
}

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
        <link rel="icon" href="favicon.ico" />
        <link rel="stylesheet", type="text/css", href="style.css">
		<title>Best Map of the Democratic Primary</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js">
        </script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js">
        </script>
	</head>

	<body>

    	<div class="top">
    		<h3 class="header">Democratic Primary Delegates by State</h3>
    	</div>

    	<div class="left">
      	
    		<div class="sidebar">
      			<text>Data Set</text>
        		<div class="typeToggle">
        			<input type="radio" name="data-selector" onclick="showStates()">States
        		</div>
                <div class="typeToggle">
                    <input type="radio" name="data-selector" checked onclick="showStateDelegates()">State Delegate Count</input>
                </div>
                <div class="typeToggle">
                    <input type="radio" name="data-selector" onclick="showStateVotes()">Primary Vote by State</input>
                </div>                
                <div class="typeToggle">
                    <input type="radio" name="data-selector" onclick="showCongressionalDelegates()">Delegates by CD</input>
                </div>
                <div class="typeToggle">
                    <input type="radio" name="data-selector" onclick="showPrimaryDistrictVote()">Primary Vote by CD</input>
                </div>
    		</div>

            <div class="information">
                <div>State: <span class="whichState"></span></div>
                <div>District: <span class="whichDistrict"></span></div>

                <div class="toolTipA">Clinton Delegates</div>
                <div class="toolTipB">Sanders Delegates</div>
            </div>

            <div class="legend">
              <div class="legTitle">Margin of Victory</div>
              <div class="legendChart"></div>
            </div>
        </div>

        <div class="main">
            <div class="map"></div>
            <div class="sampleImage"> <img src="http://i.imgur.com/fxb0OcG.png" /></div>
        </div>

  </body>
  <script type="text/javascript" src="hexscript.js"></script>
  <script type="text/javascript" src="colorBuilder.js"></script>

</html>

style.css

.top {
    position: absolute;
    left:0; right:0;
    height: 92px;
    margin-left: 15px;
    font-family: 'Helvetica Neue';
    font-weight: bold;
}

.left {
    position: absolute;
    left:0; top:80px; bottom: 0;
    width: 178px;
    margin-left: 15px;
}

.main {
    position: relative;
    left:180px; top:92px; right:0; bottom:0;
}

.right {
	position: relative;
	background: #fff;
	top: -656px;
	left: 1200px;
	width: 178px;
}

.map {
	position: relative;
	top: -60px;
}

.legend {
	position: relative;
	top: -6px;
	height: 380px;
	border: solid black;
	padding: 5px;
	padding-top: 10px;
	display: block;
	font-family: "Helvetica Neue";
	stroke-width: 2px;
}

.legTitle {
	padding-left: 15px;
}

.legendChart {
	position: relative;
	padding-top: 15px;
	font-size: 14px;

}

.bernieLegend {
	position: relative;
	top: -6px;
	height: 220px;
	border: solid black;
	padding: 5px;
	padding-top: 10px;
	display: block;
	font-family: "Helvetica Neue";
	stroke-width: 2px;
	display: none;
}

.voteSelector {
	position: relative;
	height: 302px;
	border: solid black;
	padding: 5px;
	display: block;
	font-family: "Helvetica Neue";
	stroke-width: 2px;
	background: #fff;
	overflow: scroll;
	display: block;
}

.voteSelector text {
	position: relative;
	text-align: center;
	display: block;
	border-bottom: thin solid black;
	padding: 10px 30px 10px 30px;
	font-weight: bold;
	font-family: 'Helvetica Neue';
}

.buttonDiv {
	padding: 5px 5px 5px 5px;
	font-family: "Helvetica Neue";

}

.voteLegend {
	position: relative;
	top: -3px;
	height: 120px;
	border: solid black;
	padding: 5px;
	padding-top: 10px;
	display: block;
	font-family: "Helvetica Neue";
	stroke-width: 2px;
	display: none;
}

.nytimesLogo {
	position: relative;
	top: -3px;
}

.passage {
  width: 130px;
  height: 40px;
}

.sidebar {
	border: solid black;
	padding: 5px;
	font-family: 'Helvetica Neue';
}

.sidebar text{
	position: relative;
	text-align: center;
	display: block;
	border-bottom: thin solid black;
	padding: 10px 30px 10px 30px;
	font-weight: bold;
	font-family: 'Helvetica Neue';
}

.whichState {
	font-weight: bold;
}

.whichDistrict {
	font-weight: bold;
}

.typeToggle {
	font-family: 'Helvetica Neue';
	padding: 3px;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}

.information {
	position: relative;
	top: -3px;
	border: solid black;
	padding: 5px;
	font-family: 'Helvetica Neue';
	display: block;
	font-size: 15px;
}

.toggleSideBar {
	position: relative;
	top: -3px;
	border: solid black;
	padding: 5px;
	font-family: 'Helvetica Neue';
	display: block;
}

.hexagon {
	fill: none;
	pointer-events: all;
	stroke: 0px;
	z-index: 1;
}

.specificBorder {
	fill: none;
	stroke-width: 2.5px;
	stroke-opacity: 1;
	stroke: #fff;
	pointer-events: none;
}

.districtBorder {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
	stroke-opacity: .2;
	pointer-events: none;
}

.stateBorder {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	pointer-events: none;
}

.bernieBorder {
	fill: none;
	stroke: #7fff00;
	stroke-width: 2.5px;
	stroke-opacity: 0;
	pointer-events: none;
}