Skip to content

Instantly share code, notes, and snippets.

@Alex-Devoid

Alex-Devoid/index.html

Last active March 20, 2020 09:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Alex-Devoid/72b5a447e6abb1f8a6565e977122029c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Alex-Devoid/72b5a447e6abb1f8a6565e977122029c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
#site-navbar-container.affix{
z-index:100000
}
.info2 {
padding: 6px 8px;
font: 12px/14px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.legend2 {
line-height: 10px;
color: #555;
}
.legend2 i {
width: 80px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.55;
}
#legendbar1{
width: 80px;
height: 18px;
float: left;
margin-right: 8px;
/* opacity: 0.95; */
}
</style>
<div class="row">
<div id="mymapid2" style="width: 95%; height: 450px;"></div>
</div>
<script>
var voteCheck2 = [];
var objCheck2 = [];
var votesByPrecinct2 = "pres-primary-Pima-2020.geojson";
var colorScaleDem2 = d3.scaleLinear().domain([.4,.5,.6,.7])
.range([ "#d0d0fb","#9d98e9","#635dcf","#222ccf"])
var colorScaleInd2 = d3.scaleLinear().domain([.4,.5,.6,.7])
.range(["#fbd0d0","#e99d98","#cf635d","#CF222C"])
var colorScaleGrn2 = d3.scaleLinear().domain([0,1])
.range(["#ef9faa", "#cf223a"])
function colorScale(percent, one,two,three,four){
if (percent < .5 ) {
return one;
}else if (percent >= .5 && percent < .6 ) {
return two;
}else if (percent >= .6 && percent < .7 ) {
return three;
}else if (percent > .7) {
return four;
}
}
var mymap2 = L.map('mymapid2').setView([32.118638011730695, -110.79162597656251], 10);
var osm2 = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
attribution: 'Arizona Daily Star|Map tiles by <a href="http://stamen.com">Stamen Design'+'<'+'/'+'a'+'>'+', <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0'+'<'+'/'+'a'+'>'+' &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap'+'<'+'/'+'a'+'>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
});
var basemymaps2 = {
"Street mymap": osm2
};
var info2 = L.control();
info2.onAdd = function (mymap2) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
osm2.addTo(mymap2);
d3.json(votesByPrecinct2, function(error, votesPrecinct2) {
if (error) throw error;
for (var ii = 0; ii < votesPrecinct2.features.length; ii++) {
var pre = votesPrecinct2.features[ii].properties
if (pre['SANDERS, BERNIE'] !== undefined && pre['SANDERS, BERNIE'] > pre['BIDEN, JOSEPH']) {
pre.mayorWinner = 'Bernie Sanders'
}else if (pre['BIDEN, JOSEPH'] !== undefined && pre['SANDERS, BERNIE'] < pre['BIDEN, JOSEPH']) {
pre.mayorWinner = 'Joe Biden'
// console.log('Joe Biden');
// console.log(pre['BIDEN, JOSEPH']);
// console.log(pre);
}else if (!isNaN(pre['SANDERS, BERNIE']) === !isNaN(pre['BIDEN, JOSEPH']) && pre['SANDERS, BERNIE']!== undefined&&pre['BIDEN, JOSEPH']!== undefined) {
pre.mayorWinner = 'tie'
}else if(pre['SANDERS, BERNIE'] === 0 && pre['BIDEN, JOSEPH']===0){
pre.mayorWinner = 'No Votes'
}else if (pre['SANDERS, BERNIE']=== undefined&&pre['BIDEN, JOSEPH']=== undefined) {
pre.mayorWinner = 'No Votes'
}else{
pre.mayorWinner = 'No Votes'
}
pre.turnOut = pre['BALLOTS CAST']/pre['VOTERS']
pre.mayorWinnerPer = (pre['SANDERS, BERNIE'] > pre['BIDEN, JOSEPH'])? Math.round((pre['SANDERS, BERNIE']/pre['BALLOTS CAST'])*100): Math.round((pre['BIDEN, JOSEPH']/pre['BALLOTS CAST'])*100);
pre.shareBernie = pre['SANDERS, BERNIE']/pre['BALLOTS CAST'];
pre.shareBiden = pre['BIDEN, JOSEPH']/pre['BALLOTS CAST'];
///check
if (isNaN(pre.mayorWinnerPer)) {
console.log(pre['BIDEN, JOSEPH']);
}
}
function getColor2(obj){
if(obj.properties.mayorWinner === 'Joe Biden'){
// return colorScale(obj.properties.mayorShareInd,"#63a6a0","#448c8a","#287274","#0d585f");
return colorScaleDem2(obj.properties.shareBiden);
}else if(obj.properties.mayorWinner === 'Bernie Sanders'){
return colorScaleInd2(obj.properties.shareBernie);
// return colorScale(obj.properties.mayorShareInd,"#f59e72","#f2855d","#ef6a4c","#eb4a40");
}else if(obj.properties.mayorWinner === 'MIKE CEASE'){
return colorScaleGrn2(obj.properties.mayorShareGrn);
}else if(obj.properties.mayorWinner === 'No Votes'){
return 'rgba(255, 255, 255, 0)';
}else if(obj.properties.mayorWinner === "tie"){
return '#fdee3c';
}else if(obj.properties.mayorWinner === undefined){
return '#800080';
}
}
info2.update = function (props2) {
var winner2;
if (props2) {
winner2 = props2.properties.mayorWinner
}
this._div.innerHTML = '<b>Tucson Mayoral Election Results'+'<'+'/'+'b'+'>' +'<'+'b'+'r'+ '/'+'>'+ (props2 ?
'<b>' + props2.properties.mayorWinner +'<'+'/'+'b'+'>' +' took precinct '+ props2.properties["PRECINCT"] + " with <b>" +props2.properties["mayorWinnerPer"]+'<'+'/'+'b'+'>' + ' of the vote'+'.'+'<'+'/'+'br'+'>' +
`Sanders: ${props2.properties["SANDERS, BERNIE"]} votes`+'<'+'b'+'r'+ '/'+'>'+`Biden: ${props2.properties["BIDEN, JOSEPH"]} votes`
// +'<'+'b'+'r'+ '/'+'>'+`Cease: ${props2.properties["Mayor-CEASE, MIKE (GRN)"]} votes`
+'<'+'b'+'r'+ '/'+'>'+`Total: ${props2.properties["BALLOTS CAST"]} votes`
: 'Hover over a voter precinct');
};
info2.addTo(mymap2);
function style2(feature2) {
// console.log(feature.properties.Primary_Results2019);
return {
weight: 1,
opacity: .6,
color: 'white',
dashArray: '3',
fillOpacity: 0.55,
fillColor: getColor2(feature2)
};
}
function highlightFeature2(e) {
var layer2 = e.target;
layer2.setStyle({
weight: 4,
color: '#666',
// dashArray: '',
fillOpacity: 0.2
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer2.bringToFront();
}
info2.update(layer2.feature);
}
var geojson2;
function resetHighlight2(e) {
geojson2.resetStyle(e.target);
info2.update();
}
function zoomToFeature2(e) {
mymap2.fitBounds(e.target.getBounds());
}
function onEachFeature2(feature, layer2) {
layer2.on({
mouseover: highlightFeature2,
mouseout: resetHighlight2,
click: zoomToFeature2
});
}
geojson2 = L.geoJSON(votesPrecinct2, {
style: style2,
onEachFeature: onEachFeature2
}).addTo(mymap2);
mymap2.fitBounds(geojson2.getBounds());
var legend2 = L.control({position: 'bottomright'});
legend2.onAdd = function () {
var div2 = L.DomUtil.create('div', 'info2 legend2');
// loop through our density intervals and generate a label with a colored square for each interval
div2.innerHTML =
'<p style="margin-bottom: 0; line-height: normal;font-size:medium;"><strong>Vote share' + '<'+'/'+'strong'+'>' + '<'+'/'+'p'+'>' +
// '<i style="background:'+"linear-gradient(to right,#d0d0fb,#9d98e9,#635dcf,#222ccf)" + '">'+'<'+'/'+'i'+'>' + "Regina Romero (DEM)" + '<'+'/'+'p'+'>'+
// '<i style=" background:'+ "linear-gradient(to right,#fbd0d0,#e99d98,#cf635d,#CF222C)" + '">'+'<'+'/'+'i'+'>' + "Ed Ackerley (IND)" + '<'+'/'+'p'+'>'+
// '<i style="background:'+"#000000" + '">'+'<'+'/'+'i'+'>' + "No Votes" + '<'+'/'+'p'+'>'+
'<p style="margin-bottom: 0; line-height: normal; font-size:medium;"><i style="background:'+"linear-gradient(to right,#d0d0fb,#9d98e9,#635dcf,#222ccf)" + '">'+'<'+'/'+'i'+'>' + "Regina Romero (DEM)" + '<'+'/'+'p'+'>' +"<br>"+
'<p style="margin-bottom: 0; line-height: normal; font-size:medium;"><i style=" background:'+ "linear-gradient(to right,#fbd0d0,#e99d98,#cf635d,#CF222C)" + '">'+'<'+'/'+'i'+'>' + "Ed Ackerley (IND)" + '<'+'/'+'p'+'>'+
'<svg id="legendbar1">'+
'<line x1="0" y1="1" x2="80" y2="1" style="stroke:rgb(0,0,0);stroke-width:2" />'+
'<line x1="79" y1="1" x2="79" y2="4" style="stroke:rgb(0,0,0);stroke-width:2" />'+
'<line x1="1" y1="1" x2="1" y2="4" style="stroke:rgb(0,0,0);stroke-width:2" />'+
'<line x1="40" y1="1" x2="40" y2="4" style="stroke:rgb(0,0,0);stroke-width:2" />'+
'<text x="0" y="12" font-size="10px" text-anchor="start" fill="black">40%'+'<'+'/'+'text'+'>'+
'<text x="40" y="12" font-size="10px" text-anchor="middle" fill="black">55%'+'<'+'/'+'text'+'>'+
'<text x="80" y="12" font-size="10px" text-anchor="end" fill="black">70%'+'<'+'/'+'text'+'>'
+'<'+'/'+'svg'+'>';
return div2;
};
legend2.addTo(mymap2);
mymap2.on('zoomend',function(e) {
// console.log(e.target.getZoom());
})
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
pres-primary-Pima-2020.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment