Skip to content

Instantly share code, notes, and snippets.

@alecrajeev

alecrajeev/colorBuilder.js

Last active September 25, 2015 00:00
Show Gist options
  • Save alecrajeev/8b132d74fb81f94c4e3a to your computer and use it in GitHub Desktop.
Save alecrajeev/8b132d74fb81f94c4e3a to your computer and use it in GitHub Desktop.
Download ZIP
Who Drew the Lines?
Raw
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 voteColor = d3.scale.ordinal() // color scale for a specifc vote
.range(["#7A9CC7","#DA9285","#a9a9a9","#405695","#B43030"])
.domain([0, 1, 2, 3, 4]);
var bernieColor = d3.scale.ordinal() // color scale for bernie event data
.range(['rgb(255,247,243)','rgb(253,224,221)','rgb(252,197,192)','rgb(250,159,181)','rgb(247,104,161)','rgb(221,52,151)','rgb(174,1,126)','rgb(122,1,119)','rgb(73,0,106)'])
.domain([0,1,2,3,4,5,6,7,8]);
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 buildColorRange(i) { // builds the color range
switch(i) {
case 0: // white
color.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)']);
break;
case 1: // black
color.range(['rgb(252,251,253)','rgb(239,237,245)','rgb(218,218,235)','rgb(188,189,220)','rgb(158,154,200)','rgb(128,125,186)','rgb(106,81,163)','rgb(84,39,143)','rgb(63,0,125)']);
break;
case 2: // latino
color.range(['rgb(247,251,255)','rgb(222,235,247)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(66,146,198)','rgb(33,113,181)','rgb(8,81,156)','rgb(8,48,107)']);
break;
case 3: // asian
color.range(['rgb(255,245,240)','rgb(254,224,210)','rgb(252,187,161)','rgb(252,146,114)','rgb(251,106,74)','rgb(239,59,44)','rgb(203,24,29)','rgb(165,15,21)','rgb(103,0,13)']);
break;
case 4: // multiracial
color.range(['rgb(255,247,251)','rgb(236,226,240)','rgb(208,209,230)','rgb(166,189,219)','rgb(103,169,207)','rgb(54,144,192)','rgb(2,129,138)','rgb(1,108,89)','rgb(1,70,54)']);
break;
case 5: // bernie event data
color.range(['rgb(255,247,251)','#e4fff9','rgb(208,209,230)','rgb(166,189,219)','rgb(103,169,207)','rgb(54,144,192)','rgb(2,129,138)','rgb(1,108,89)']);
break;
default: // presidential
color.range(['#AE000C','#BA3035','#C56365','#D09697','#DBC8C8','#C8C8D5','#9697BD','#6465A5','#32358E', '#010a79']);
break;
}
}
function buildVoteColor() {
voteColor = d3.scale.ordinal() // color scale for a specifc vote
.range(["#7A9CC7","#DA9285","#a9a9a9","#405695","#B43030"])
.domain([0, 1, 2, 3, 4]);
}
function buildBernieColor() {
bernieColor = d3.scale.ordinal() // color scale for bernie event data
.range(['rgb(255,247,243)','rgb(253,224,221)','rgb(252,197,192)','rgb(250,159,181)','rgb(247,104,161)','rgb(221,52,151)','rgb(174,1,126)','rgb(122,1,119)','rgb(73,0,106)'])
.domain([0,1,2,3,4,5,6,7,8]);
}
function showBernieLegend() {
var LegendContent = svgBernieLegend.selectAll(".LegendContent")
.data(bernieColor.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 bernieColor(d)})
.style("stroke", "black")
LegendEnter.append("text")
.attr("x", legendRectSize + legendSpacing*1.3)
.attr("y", legendRectSize-1)
.text(function(d) {return interpretBin(d); });
var updateSelection = svgVoteLegend.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 bernieColor(d); });
updateSelection.select("text")
.text(function(d) {return interpretBin(d); });
LegendContent.exit()
.transition()
.duration(1000)
.style("opacity", "0")
.remove();
}
function buildColorDomain(i, extent) {
var colorDomain = [];
if (i < 6) {
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 buildExtentData() { // builds the mininum and maximum value array, extent, for each dataset
extentData[0] = d3.extent(demoData, function(d) {return d.White; });
extentData[1] = d3.extent(demoData, function(d) {return d.Black; });
extentData[2] = d3.extent(demoData, function(d) {return d.Latino; });
extentData[3] = d3.extent(demoData, function(d) {return d.Asian; });
extentData[4] = d3.extent(demoData, function(d) {return d.Multiracial; });
extentData[5] = d3.extent(demoData, function(d) {return d.bernieAttendance; })
extentData[6] = d3.extent(presData, function(d) {return d.Obama2012; });
extentData[7] = d3.extent(presData, function(d) {return d.Obama2008; });
}
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 getWhoDrewColor(stateID) {
if (stateID != -1)
return stateData[stateID].colormap;
}
function getVoteDistrictColor(districtID) {
if (districtID != -1) {
return voteColor(voteByDistrictID[districtID]);
}
}
function getBernieDistrictColor(bernieBin) {
if (bernieBin != -1) {
return bernieColor(bernieBin);
}
}
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); }});
}
Raw
hexscript.js
var width = 1250,
height = 730,
radius = 6.5;
var hexMesh, hexagons;
var districtList = {};
var specificDistrictID = -2;
var specificStateID = -1;
var extentData = {};
var legendRectSize = 15,
legendSpacing = 7;
var stateData;
var svg = d3.select(".map").append("svg")
.attr("width", width)
.attr("height", height);
var svgLegend = d3.select(".legend").append("svg")
.attr("height", "220px")
.attr("width", "162px");
queue()
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/UnitedStatesHex/master/ushex.json")
.defer(d3.csv, "stateInfo.csv")
.await(makeMyMap);
function makeMyMap(error, ushex, stateInfo) {
if (error)
return console.warn(error);
stateInfo.forEach(function (d) {
d.stateID = +d.stateID;
})
stateData = stateInfo;
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 getWhoDrewColor(d.properties.stateID); },
stroke: function(d) {return getWhoDrewColor(d.properties.stateID); }})
.on("mouseover", hoverOnState)
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);
var specificState = svg.append("path")
.attr("class", "specificStateBorder")
.call(drawSpecificState);
function hoverOnDistrict(d) {
coordinates = d3.mouse(this);
showTooltip(d, coordinates);
specificDistrictID = d.properties.districtID;
specificDistrict.call(drawSpecificDistrict);
}
function hoverOnState(d) {
coordinates = d3.mouse(this);
showTooltip(d, coordinates);
changeInfo(d);
specificStateID = d.properties.stateID;
specificState.call(drawSpecificState);
}
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 drawSpecificState(border) {
border.attr("d", path(topojson.mesh(ushex, ushex.objects.states, checkSpecificState)));
}
function checkSpecificState(hex1, hex2) {
if (specificStateID < 0) // if there is no specific state to be highlighted
return false;
if (hex1.properties.stateID != specificStateID &&
hex2.properties.stateID != specificStateID)
// if when traversing the hexmesh you are not near the specific state
return false;
return hex1.properties.state != hex2.properties.state;
}
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 showTooltip(d, coordinates) {
if (d.properties.state != "Ocean") {
d3.select(".g-tooltip")
.style({display: "block",
top: function (e) {return (coordinates[1] - 35).toString() + "px"; },
left: function(e) {return (coordinates[0] - 100).toString() + "px"; }
});
d3.select(".tooltip-district")
.text(stateInfo[d.properties.stateID].State);
d3.select(".tooltip-data")
.text(stateInfo[d.properties.stateID].districtCount + " districts");
}
else
d3.select(".g-tooltip").style("display", "none");
function getShortened(title) {
var split = title.split(" ");
if (split.length < 2)
return title;
else
return split[1];
}
}
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
.transition()
.delay(750)
.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");
}
function showDataSet(i) {
d3.select(".header").text(dataSets[i] + " Demographics by Congressional District");
if (i != 5) {
buildColorRange(i);
color.domain(buildColorDomain(i,extentData[i]));
updateHexagonColor(i);
showLegend(i);
d3.select(".bernieLegend").style("display", "none");
d3.select(".legend").style("display", "block");
}
else { // bernie event
buildBernieColor();
updateBernieHexagonColor();
showBernieLegend();
d3.select(".legend").style("display", "none");
d3.select(".bernieLegend").style("display", "block");
}
d3.select(".voteLegend").style("display", "none");
// d3.select(".districtBorder").style("stroke-opacity", ".5");
}
function showLegend() {
var LegendContent = svgLegend.selectAll(".LegendContent")
.data([["#E31A1C", "Favors GOP"],["#2525C1", "Favors Dems"], ["#9C598E", "Compromise"], ["#D6EBD4", "At-Large"]])
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 d[0]})
.style("stroke", "black")
LegendEnter.append("text")
.attr("x", legendRectSize + legendSpacing*1.3)
.attr("y", legendRectSize-1)
.text(function(d) {
return d[1];
});
}
showLegend();
function changeInfo(d) {
if (d.properties.state != "Ocean") { // if you ARE on a state
d3.select(".whichState").text(stateData[d.properties.stateID].State);
d3.select(".districtCount").text(stateData[d.properties.stateID].districtCount).style("font-weight", "normal");
d3.select(".imposedBy").text(stateData[d.properties.stateID].imposedBy).style("font-weight", "normal");
d3.select(".intendedFavor").text(stateData[d.properties.stateID].intendedFavor).style("font-weight", "normal");
d3.select(".comments").text(stateData[d.properties.stateID].comments).style("font-weight", "normal");
}
else { // if you are NOT on a state
d3.select(".whichState").text("");
d3.select(".districtCount").text("");
d3.select(".imposedBy").text("");
d3.select(".intendedFavor").text("");
d3.select(".comments").text("");
}
}
function getRealDistrict(i, state) { // returns "at large" if the district number is 0, like Montana
if (i > 0)
return i;
return "At-Large";
}
function getdistrictID(statecd) { // give the id for the specific congressional district
// determined by the name of the state and district number
// will eventually preprocess a hashtable in node
for (i = 0; i < 435; i++) {
if (districtList[i][0] === statecd) {
return i;
}
}
return -1;
}
Raw
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>Who Drew the Lines?</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>
<script type="text/javascript" src="colorBuilder.js"></script>
</head>
<body>
<div class="top">
<h3 class="header">Who Drew the Lines?</h3>
</div>
<div class="left">
<!-- <div class="sidebar">
<text>Data Set</text>
<div class="typeToggle">
<input type="radio" name="data-selector" checked onclick="showStates()">States
</div>
<div class="typeToggle">
<input type="radio" name="data-selector" onclick="showCongress()">Current Congressional Makeup
</div>
</div> -->
<div class="information">
<div class="sideInfo">State: <span class="whichState"></span></div>
<div class="sideInfo">Number of Districts: <span class="districtCount"></span></div>
<div class="sideInfo">Map Imposed By: <span class="imposedBy"></span></div>
<div class="sideInfo">Intented Favored Party: <span class="intendedFavor"></span></div>
<div class="sideInfo"><span class="comments"></span></div>
</div>
<div class="legend"></div>
</div>
<div class="main">
<div class="map"></div>
<div class="g-tooltip">
<div class="tooltip-district"></div>
<div class="tooltip-data"></div>
</div>
</div>
</body>
<script type="text/javascript" src="hexscript.js"></script>
</html>
Raw
stateInfo.csv
State stateInitials stateID districtCount imposedBy intendedFavor comments color colormap
Alabama AL 0 7 Republican Legislature Republican None #ff0000 #E31A1C
Alaska AK 1 1 At-Large District n/a None #999999 #9C598E
Arizona AZ 2 9 Independent commission, deadlocked parties agree on tiebreaking Independent member who sided with Democrats Neither Map favors Democrats only because competitiveness is a criteria, this was not "intended" #ffff00 #9C598E
Arkansas AR 3 4 Democratic Legislature Democratic Map-makers drew a dummymander, which is an attempted gerrymander that backfires and favors the other party #0000ff #2525C1
California CA 4 53 Independent Commission, requires support from Democrats, Republicans, and Independents Neither This system is the model for the nation. Some contend the map is biased towards Democrats, but this is due to the plethora of VRA districts #ffff00 #9C598E
Colorado CO 5 7 State District court chose Democratic proposal, upheld by State Supreme Court Neither None #00ff00 #9C598E
Connecticut CT 6 5 Federal Court (Democratic Governor and Legislature lacked 2/3 majority) Neither Least change map from 2000s bipartisan compromise #00ff00 #9C598E
Delaware DE 7 1 At-Large District n/a None #999999 #D6EBD4
Florida FL 8 27 Republican Governor and Legislature, subject to Fair Districts lawsuits Republican Fair Districts constitutional amendment was blatantly ignored in many cases and is subject to ongoing litigation #ff0000 #E31A1C
Georgia GA 9 14 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Hawaii HI 10 2 Biparisan Commission, deadlocked parties couldn't agree on tiebreaker, supreme court chose one Neither None #ff9900 #9C598E
Idaho ID 11 2 Bipartisan Commission, evenly divided Neither None #ff9900 #9C598E
Illinois IL 12 18 Democratic Governor and Legislature Democratic None #0000ff #2525C1
Indiana IN 13 9 Republican Legislature Republican None #ff0000 #E31A1C
Iowa IA 14 4 Independent Professional Agency, Legislature (Split) & Governor (R) approved plans but could not edit them Neither State constitution prohibits county splits and aims for lowest possible deviation in residents per district #ffff00 #9C598E
Kansas KS 15 4 Federal District Court imposed own map Neither None #00ff00 #9C598E
Kentucky KY 16 6 Republican Senate and Democratic House Neither Map was a bipartisan compromise to marginally protect incumbents #9900ff #9C598E
Louisiana LA 17 6 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Maine ME 18 2 Bipartisan compromise among Republican Governor and Legislature (Republican Governor and Legislature lacked 2/3 majority) Neither None #9900ff #9C598E
Maryland MD 19 8 Democratic Governor and Legislature Democratic None #0000ff #2525C1
Massachusetts MA 20 9 Democratic Governor and Legislature Democratic None #0000ff #2525C1
Michigan MI 21 14 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Minnesota MN 22 8 State Supreme Court imposed own map Neither None #00ff00 #9C598E
Mississippi MS 23 4 Federal Court, least change map from 2000s federal court map Neither Map unnecssarily packs black voters #00ff00 #9C598E
Missouri MO 24 8 Republican Legislature overrode veto of Democratic Governor with turncoat legislative Democrats Republican Incumbent protection map that Democrats claimed hurt them, but didn't ultimately do so #ff0000 #E31A1C
Montana MT 25 1 At-Large District n/a None #999999 #D6EBD4
Nebraska NE 26 3 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Nevada NV 27 4 State District Court chose Democratic proposal Neither Based on Democratic proposal, but Republicans effectively did not contest it #00ff00 #9C598E
New Hampshire NH 28 2 Republican Legislature overrode veto of Democratic Governor Republican None #ff0000 #E31A1C
New Jersey NJ 29 12 Bipartisan Commission; evenly divided but Republican-tiebreaker chose Republican gerrymander Republican None #f4cccc #E31A1C
New Mexico NM 30 3 State Supreme Court-appointed judge chose Republican proposal Neither Judge chose Republican plan for least-change map #00ff00 #9C598E
New York NY 31 27 Federal Court imposed own map Neither None #00ff00 #9C598E
North Carolina NC 32 13 Republican Legislature; Democratic governor could not veto redistricting Republican Racial packing in the 12th district led to map being struck down, subject to ongoing litigation #ff0000 #E31A1C
North Dakota ND 33 1 At-Large District n/a None #999999 #D6EBD4
Ohio OH 34 16 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Oklahoma OK 35 5 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Oregon OR 36 5 Bipartisan compromise among Democratic Governor and divided Legislature Neither None #9900ff #9C598E
Pennsylvania PA 37 18 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Rhode Island RI 38 2 Independent Governor and Democratic Legislature Democratic None #0000ff #2525C1
South Carolina SC 39 7 Republican Governor and Legislature Republican None #ff0000 #E31A1C
South Dakota SD 40 1 At-Large District n/a None #999999 #D6EBD4
Tennessee TN 41 9 Republican Legislature Republican None #ff0000 #E31A1C
Texas TX 42 36 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Utah UT 43 4 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Vermont VT 44 1 At-Large District n/a None #999999 #D6EBD4
Virginia VA 45 11 Republican Governor and Legislature Republican Racial packing in the 3rd district led to map being struck down, subject to ongoing litigation #ff0000 #E31A1C
Washington WA 46 10 Bipartisan Comission; deadlocked, but a Democrat voted for the Republican plan (Democratic Governor and Legislature lacked 2/3 majority) Republican None #f4cccc #E31A1C
West Virginia WV 47 3 Democratic Legislature Democratic None #0000ff #2525C1
Wisconsin WI 48 8 Republican Governor and Legislature Republican None #ff0000 #E31A1C
Wyoming WY 49 1 At-Large District n/a None #999999 #D6EBD4
Raw
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: 200px;
height: 300px;
margin-left: 15px;
}
.main {
position: relative;
left: 230px; top: 80px; right:0; bottom:0;
}
.right {
position: relative;
background: #fff;
top: -656px;
left: 1200px;
width: 178px;
}
.map {
position: relative;
top: -60px;
}
.legend {
position: relative;
top: -7px;
height: 220px;
width: 200px;
border: solid black;
padding: 5px;
padding-top: 10px;
display: block;
font-family: "Helvetica Neue";
stroke-width: 2px;
display: block;
}
.buttonDiv {
padding: 5px 5px 5px 5px;
font-family: "Helvetica Neue";
}
.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 {
color: green;
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;
width: 200px;
height: 300px;
top: -3px;
border: solid black;
padding: 5px;
font-family: 'Helvetica Neue';
display: block;
}
.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;
}
.g-tooltip {
position: absolute;
background-color: #fff;
padding: 5px 8px 5px 6px;
font-family: "Helvetica Neue";
text-align: center;
top: 800px;
width: 100px;
height: 30px;
overflow: hidden;
border: 1px solid #ccc;
box-shadow: 2px 2px 7px rgba(0,0,0,0.3);
font-weight: bold;
/* font-size: 62.5%;
*/}
.sideInfo {
font-weight: bold;
}
.specificBorder {
fill: none;
stroke-width: 2.5px;
stroke-opacity: 1;
stroke: #fff;
pointer-events: none;
}
.specificStateBorder {
fill: none;
stroke-width: 2.5px;
stroke-opacity: 1;
stroke: #79fc79;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment