Created
November 8, 2019 02:25
-
-
Save Alex-Devoid/b2e580d59fb9fdea0356d821b236f654 to your computer and use it in GitHub Desktop.
Tucson Mayoral Contest
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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 | |
| } | |
| .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(["#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 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 © <a href="https://www.openstreetmymap.org/">OpenStreetmymap contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA, ' + | |
| 'Imagery © <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.mayorWinner === 'REGINA ROMERO'){ | |
| // return colorScale(obj.properties.mayorShareInd,"#63a6a0","#448c8a","#287274","#0d585f"); | |
| return colorScaleDem(obj.properties.mayorShareDem); | |
| }else if(obj.properties.mayorWinner === 'ED ACKERLEY'){ | |
| return colorScaleInd(obj.properties.mayorShareInd); | |
| // return colorScale(obj.properties.mayorShareInd,"#f59e72","#f2855d","#ef6a4c","#eb4a40"); | |
| }else if(obj.properties.mayorWinner === 'MIKE CEASE'){ | |
| return colorScaleGrn(obj.properties.mayorShareGrn); | |
| }else if(obj.properties.mayorWinner === 'No Votes'){ | |
| return '#000000'; | |
| }else if(obj.properties.mayorWinner === "tie"){ | |
| return '#fdee3c'; | |
| }else if(obj.properties.mayorWinner === undefined){ | |
| return '#800080'; | |
| } | |
| } | |
| info.update = function (props) { | |
| console.log(props); | |
| var winner; | |
| if (props) { | |
| winner = props.properties.mayorWinner | |
| } | |
| this._div.innerHTML = '<b>Votes cast in Tucson election for mayor'+'<'+'/'+'b'+'>' +'<'+'b'+'r'+ '/'+'>'+ (props ? | |
| '<b>' + props.properties.mayorWinner +'<'+'/'+'b'+'>' +' took precinct '+ props.properties["PRECINCT"] + " with <b>" +props.properties["mayorWinnerPer"]+'<'+'/'+'b'+'>' + ' of the vote'+'.'+'<'+'/'+'br'+'>' + | |
| `Romero: ${props.properties["Mayor-ROMERO, REGINA (DEM)"]}`+'<'+'b'+'r'+ '/'+'>'+`Ackerley: ${props.properties["Mayor-ACKERLEY, ED (IND)"]} votes` | |
| +'<'+'b'+'r'+ '/'+'>'+`Cease: ${props.properties["Mayor-CEASE, MIKE (GRN)"]} 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 Mayoral Candidates' + '<'+'/'+'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'+'>'+ | |
| '<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'+'>'+ | |
| '<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment