-
-
Save ix4/090929ececcef3104d678f342c3f517c to your computer and use it in GitHub Desktop.
Prop 205 Tucson 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> | |
| <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(["#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 © <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.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment