Last active
September 5, 2019 20:30
-
-
Save Alex-Devoid/b6137cd0691b234be8b737cb267b5c13 to your computer and use it in GitHub Desktop.
Draft of Tucson Democratic Mayoral Votes by Precinct 2019
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> | |
| <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> | |
| <script src="https://unpkg.com/topojson@3"></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: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| <body> | |
| <div class="row"> | |
| <div id="mymapid" style="width: 100%; height: 500px;"></div> | |
| </div> | |
| <script> | |
| var objCheck = [] | |
| var surface = "https://raw.githubusercontent.com/Alex-Devoid/Crime_Rate_by_zipcode_2017_TPD/master/tucsonCityLimits.geojson"; | |
| var votesByPrecinct = "votes_by_precinct_TucsonPrimary2019.geojson"; | |
| var mymap = L.map('mymapid').setView([32.118638011730695, -110.79162597656251], 10); | |
| // var sat = L.tileLayer('https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWRldm9pZDE2IiwiYSI6ImNqeWtpN2xpcDA5YzEza24xd3k4ajd3ZmoifQ.Kk8GtRCZU0nK4bZwu5AnBw', { | |
| // attribution: 'Arizona Daily Star | mymap data © <a href="http://openstreetmymap.org">OpenStreetmymap contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA, Imagery © <a href="http://mapbox.com">mapbox', | |
| // maxZoom: 19, | |
| // zoomDelta: 0.25, | |
| // zoomSnap: 0.25, | |
| // wheelPxPerZoomLevel: 100 | |
| // | |
| // }) | |
| 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</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">mapbox</a>', | |
| 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) { | |
| d3.json(surface, function(error, tucsonBoundary1) { | |
| if (error) throw error; | |
| // console.log(tucsonBoundary); | |
| // | |
| // var anex = topojson.topology({"Annexations":tucsonBoundary}); | |
| // | |
| // console.log(anex); | |
| // | |
| // var selected = d3.set([ | |
| // 'TUC' | |
| // ]); | |
| // | |
| // var deannex = d3.set([ | |
| // 'N' | |
| // ]); | |
| // | |
| // var tucsonBoundary1 = topojson.merge(anex, anex.objects.Annexations.geometries.filter(function(d) { | |
| // return selected.has(d.properties.CITY_CD) && deannex.has(d.properties.DEANNEX) | |
| // })); | |
| function sumVotes(voteFeatures){ | |
| var voteProperties = voteFeatures.properties["Primary_Results2019"]; | |
| var votesObj = {"candidates":{ | |
| "Randi Dorman": (Number(voteProperties[0]["Mayor"]['DEM']["DORMAN, RANDI"]) + Number(voteProperties[1].Mayor['DEM']["DORMAN, RANDI"])), | |
| "Steve Farley": (Number(voteProperties[0].Mayor['DEM']["FARLEY, STEVE"]) + Number(voteProperties[1].Mayor['DEM']["FARLEY, STEVE"])), | |
| "Regina Romero": (Number(voteProperties[0].Mayor['DEM']["ROMERO, REGINA"])+ Number(voteProperties[1].Mayor['DEM']["ROMERO, REGINA"]))} | |
| }; | |
| var mostVotesKey = Object.keys(votesObj.candidates).reduce(function(a, b){ return votesObj.candidates[a] > votesObj.candidates[b] ? a : b }); | |
| votesObj['mostVotes'] = mostVotesKey; | |
| votesObj['precinct'] = voteFeatures.properties["PRECINCT"]; | |
| var sortvotes = []; | |
| for (var candidate in votesObj.candidates) { | |
| sortvotes.push([candidate, votesObj.candidates[candidate]]); | |
| } | |
| sortvotes.sort(function(a, b) { | |
| return a[1] - b[1]; | |
| }); | |
| votesObj['sorted'] = sortvotes; | |
| objCheck.push(votesObj) | |
| return votesObj; | |
| } | |
| function getColor(obj){ | |
| if(obj.mostVotes === 'Randi Dorman'){ | |
| return "#66c2a5"; | |
| }else if(obj.mostVotes === 'Steve Farley'){ | |
| return '#fd3cac'; | |
| }else if(obj.mostVotes === 'Regina Romero'){ | |
| return "#fd8d3c"; | |
| } | |
| } | |
| info.update = function (props) { | |
| var votesObjCan; | |
| if (props) { | |
| votesObjCan = sumVotes(props) | |
| } | |
| this._div.innerHTML = '<h3>Democratic Mayoral Votes by Precinct</h3>' + (props ? | |
| '<b>' + votesObjCan.mostVotes + '</b> took precinct '+ votesObjCan.precinct + " with <b>" +votesObjCan.candidates[votesObjCan.mostVotes] +'</b> votes.<br />' + `${votesObjCan.sorted[1][0]}: ${votesObjCan.sorted[1][1]}<br />`+`${votesObjCan.sorted[0][0]}: ${votesObjCan.sorted[0][1]} votes` | |
| : 'Hover over a state'); | |
| }; | |
| info.addTo(mymap); | |
| function style(feature) { | |
| return { | |
| weight: 2, | |
| opacity: .6, | |
| color: 'white', | |
| dashArray: '3', | |
| fillOpacity: 0.55, | |
| fillColor: getColor(sumVotes(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 | |
| }; | |
| L.geoJSON(tucsonBoundary1,{style:myStyle | |
| }).addTo(mymap); | |
| geojson = L.geoJSON(votesPrecinct, { | |
| style: style, | |
| onEachFeature: onEachFeature | |
| // style: function(feature) { | |
| // console.log(feature); | |
| // | |
| // | |
| // var votesSum = sumVotes(feature.properties["Primary_Results2019"]) | |
| // | |
| // | |
| // switch (votesSum.mostVotes) { | |
| // case 'randi': return {color: "#b2df8a", fill: true, | |
| // opacity: .75, fillOpacity: .75}; | |
| // | |
| // | |
| // | |
| // case 'regina': return {color: "#1f78b4", | |
| // fill: true, | |
| // opacity: .5, fillOpacity: .75}; | |
| // case 'steve': return {color: "#a6cee3", fill: true, | |
| // opacity: .75, fillOpacity: .75}; | |
| // | |
| // | |
| // } | |
| // } | |
| }).addTo(mymap); | |
| console.log(votesPrecinct.features.length); | |
| console.log(objCheck); | |
| mymap.fitBounds(geojson.getBounds()); | |
| var legend = L.control({position: 'bottomleft'}); | |
| 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>Democratic Mayoral Candidates' + '<'+'/'+'strong'+'>' + '<'+'/'+'p'+'>' + | |
| '<i style="background:'+"#fd8d3c" + '">'+'<'+'/'+'i'+'>' + "Regina Romero" + '<'+'/'+'p'+'>'+ | |
| '<i style="background:'+'#fd3cac' + '">'+'<'+'/'+'i'+'>' + "Steve Farley" + '<'+'/'+'p'+'>'+ | |
| '<i style="background:'+"#66c2a5" + '">'+'<'+'/'+'i'+'>' + "Randi Dorman" + '<'+'/'+'p'+'>'; | |
| return div; | |
| }; | |
| legend.addTo(mymap); | |
| L.control.scale({position: 'bottomright',metric: false }).addTo(mymap); | |
| }) | |
| mymap.on('zoomend',function(e) { | |
| // console.log(e.target.getZoom()); | |
| }) | |
| mymap.on('click', function(ev){ | |
| var coordinates = mymap.getCenter() | |
| console.log(coordinates); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment