Skip to content

Instantly share code, notes, and snippets.

@Alex-Devoid

Alex-Devoid/index.html

Last active January 23, 2020 07:26
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Alex-Devoid/eba619b6e5422957d914fdec25dd3d3f to your computer and use it in GitHub Desktop.
Download ZIP
Prop 205 Tucson 2019
Raw
index.html
<!DOCTYPE html>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
<script src="https://unpkg.com/[email protected]/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
}
.info {
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;
}
.legend {
line-height: 10px;
color: #555;
}
.legend i {
width: 80px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.95;
}
#legendbar{
width: 80px;
height: 18px;
float: left;
margin-right: 8px;
/* opacity: 0.95; */
}
</style>
<div class="row">
<div id="mymapid" style="width: 100%; height: 500px;"></div>
</div>
<script>
var voteCheck = [];
var objCheck = [];
var votesByPrecinct = "https://raw.githubusercontent.com/Alex-Devoid/tucson_general_election_2019/master/votes_by_precinct_Tucson_General2019.geojson";
var colorScaleDem = d3.scaleLinear().domain([.4,.5,.6,.7])
.range([ "#d0d0fb","#9d98e9","#635dcf","#222ccf"])
var colorScaleInd = d3.scaleLinear().domain([.4,.5,.6,.7])
.range(["#fbd0d0","#e99d98","#cf635d","#CF222C"])
var colorScaleGrn = d3.scaleLinear().domain([0,1])
.range(["#814af8", "#66953d"])
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 mymap = L.map('mymapid').setView([32.118638011730695, -110.79162597656251], 10);
var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
zoomSnap: 0.25,
// wheelPxPerZoomLevel: 100,
attribution: 'map data &copy; <a href="https://www.openstreetmymap.org/">OpenStreetmymap contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA, ' +
'Imagery &Acirc;&copy; <a href="https://www.mapbox.com/">mapbox',
id: 'mapbox.streets'
})
var basemymaps = {
"Street mymap": osm
};
var info = L.control();
info.onAdd = function (mymap) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
osm.addTo(mymap);
d3.json(votesByPrecinct, function(error, votesPrecinct) {
if (error) throw error;
function getColor(obj){
if(obj.properties.prop205Winner === 'Yes'){
// return colorScale(obj.properties.mayorShareInd,"#63a6a0","#448c8a","#287274","#0d585f");
console.log(obj.properties.PRECINCT)
console.log( obj.properties["BALLOTS CAST - TOTAL-BALLOTS CAST"])
return colorScaleDem(obj.properties.prop205YesShare);
}else if(obj.properties.prop205Winner === 'No'){
return colorScaleInd(obj.properties.prop205NoShare);
// return colorScale(obj.properties.mayorShareInd,"#f59e72","#f2855d","#ef6a4c","#eb4a40");
}else if(obj.properties.prop205Winner === 'ya'){
return colorScaleGrn(obj.properties.mayorShareInd);
}else if(obj.properties.prop205Winner === 'No Votes'){
return '#000000';
}else if(obj.properties.prop205Winner === "tie"){
return '#fdee3c';
}else if(obj.properties.PRECINCT === 61){
return 'green';
}
}
info.update = function (props) {
console.log(props);
var winner;
if (props) {
winner = props.properties.prop205Winner
}
this._div.innerHTML = '<b>Prop 205'+'<'+'/'+'b'+'>' +'<'+'b'+'r'+ '/'+'>'+ (props ?
'<b>'+props.properties["winner205Per"] + ' of the vote was '+ props.properties.prop205Winner +'<'+'/'+'b'+'>' +' on Prop 205 in precinct '+
props.properties["PRECINCT"]+'.<'+'/'+'b'+'>'+'<'+'/'+'br'+'>' +`Yes: ${props.properties["PROPOSITION / PROPOSICIÓN 205-Yes / Si"]} votes`+
'<'+'b'+'r'+ '/'+'>'+`No: ${props.properties["PROPOSITION / PROPOSICIÓN 205-No"]} votes`+'<'+'b'+'r'+ '/'+'>'+`Total: ${props.properties["BALLOTS CAST - TOTAL-BALLOTS CAST"]} votes`
: 'Hover over a voter precinct');
};
info.addTo(mymap);
function style(feature) {
// console.log(feature.properties.Primary_Results2019);
return {
weight: 1,
opacity: .6,
color: 'white',
dashArray: '3',
fillOpacity: 0.55,
fillColor: getColor(feature)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 4,
color: '#666',
// dashArray: '',
fillOpacity: 0.2
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
mymap.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var myStyle = {
"color": "#000000",
"weight": 5,
"opacity": 1
};
var myStyle1 = {
"color": "black",
"weight": 5,
"opacity": 1
};
geojson = L.geoJSON(votesPrecinct, {
style: style,
onEachFeature: onEachFeature
}).addTo(mymap);
mymap.fitBounds(geojson.getBounds());
var legend = L.control({position: 'bottomright'});
legend.onAdd = function () {
var div = L.DomUtil.create('div', 'info legend');
// loop through our density intervals and generate a label with a colored square for each interval
div.innerHTML =
'<p><strong>2019 Prop 205' + '<'+'/'+'strong'+'>' + '<'+'/'+'p'+'>' +
// '<i style="background:'+"#000000" + '">'+'<'+'/'+'i'+'>' + "No Votes" + '<'+'/'+'p'+'>'+
'<i style="background:'+"linear-gradient(to right,#d0d0fb,#9d98e9,#635dcf,#222ccf)" + '">'+'<'+'/'+'i'+'>' + "Yes" + '<'+'/'+'p'+'>'+
'<i style=" background:'+ "linear-gradient(to right,#fbd0d0,#e99d98,#cf635d,#CF222C)" + '">'+'<'+'/'+'i'+'>' + "No" + '<'+'/'+'p'+'>'+
'<svg id="legendbar">'+
'<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 div;
};
legend.addTo(mymap);
mymap.on('zoomend',function(e) {
// console.log(e.target.getZoom());
})
mymap.on('click', function(ev){
// var coordinates = mymap.getCenter()
});
});
</script>
Display the source blob
Display the rendered blob
Raw
votes_by_precinct_Tucson_General2019.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