Tweak of Philly donations by district
A GeoJSON file of the wards was downloaded from OpenDataPhilly
Donator's addresses were mapped to their geocordinates using the Cicero API by Azavea.
Map was created with Leaflet and code was heavily borrowed from two of their tutorials:
Future example code
| { | |
| "1": { | |
| "amount_donated": "2750.00", | |
| "num_donations": "2" | |
| }, | |
| "2": { | |
| "amount_donated": "1100.00", | |
| "num_donations": "5" | |
| }, | |
| "5": { | |
| "amount_donated": "8380.50", | |
| "num_donations": "36" | |
| }, | |
| "7": { | |
| "amount_donated": "2000.00", | |
| "num_donations": "2" | |
| }, | |
| "8": { | |
| "amount_donated": "89905.82", | |
| "num_donations": "135" | |
| }, | |
| "9": { | |
| "amount_donated": "350.00", | |
| "num_donations": "2" | |
| }, | |
| "10": { | |
| "amount_donated": "250.00", | |
| "num_donations": "1" | |
| }, | |
| "14": { | |
| "amount_donated": "2750.00", | |
| "num_donations": "2" | |
| }, | |
| "15": { | |
| "amount_donated": "4474.43", | |
| "num_donations": "11" | |
| }, | |
| "18": { | |
| "amount_donated": "5120.00", | |
| "num_donations": "3" | |
| }, | |
| "20": { | |
| "amount_donated": "100.00", | |
| "num_donations": "1" | |
| }, | |
| "21": { | |
| "amount_donated": "350.00", | |
| "num_donations": "2" | |
| }, | |
| "22": { | |
| "amount_donated": "350.00", | |
| "num_donations": "2" | |
| }, | |
| "23": { | |
| "amount_donated": "75.00", | |
| "num_donations": "1" | |
| }, | |
| "25": { | |
| "amount_donated": "2060.00", | |
| "num_donations": "2" | |
| }, | |
| "26": { | |
| "amount_donated": "300.00", | |
| "num_donations": "3" | |
| }, | |
| "30": { | |
| "amount_donated": "2410.00", | |
| "num_donations": "13" | |
| }, | |
| "33": { | |
| "amount_donated": "60.00", | |
| "num_donations": "1" | |
| }, | |
| "38": { | |
| "amount_donated": "200.00", | |
| "num_donations": "1" | |
| }, | |
| "39": { | |
| "amount_donated": "750.00", | |
| "num_donations": "3" | |
| }, | |
| "40": { | |
| "amount_donated": "250.00", | |
| "num_donations": "1" | |
| }, | |
| "45": { | |
| "amount_donated": "660.00", | |
| "num_donations": "6" | |
| }, | |
| "49": { | |
| "amount_donated": "100.00", | |
| "num_donations": "1" | |
| }, | |
| "53": { | |
| "amount_donated": "250.00", | |
| "num_donations": "1" | |
| }, | |
| "55": { | |
| "amount_donated": "250.00", | |
| "num_donations": "1" | |
| }, | |
| "56": { | |
| "amount_donated": "100.00", | |
| "num_donations": "1" | |
| }, | |
| "57": { | |
| "amount_donated": "100.00", | |
| "num_donations": "1" | |
| }, | |
| "58": { | |
| "amount_donated": "350.00", | |
| "num_donations": "2" | |
| }, | |
| "61": { | |
| "amount_donated": "100.00", | |
| "num_donations": "1" | |
| }, | |
| "63": { | |
| "amount_donated": "450.00", | |
| "num_donations": "2" | |
| }, | |
| "65": { | |
| "amount_donated": "950.00", | |
| "num_donations": "5" | |
| }, | |
| "66": { | |
| "amount_donated": "3300.00", | |
| "num_donations": "9" | |
| } | |
| } |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Delaware 2016 election races."> | |
| <title>Philadelphia Wards</title> | |
| <script src="https://code.jquery.com/jquery-2.2.4.min.js" | |
| integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" | |
| crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> | |
| <style> | |
| #mapid_1 { | |
| width: 600px; | |
| height: 400px; | |
| } | |
| .info { | |
| padding: 6px 8px; | |
| font: 14px/16px 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; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: #777; | |
| } | |
| .legend { | |
| text-align: left; | |
| line-height: 18px; | |
| color: #555; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> | |
| </head> | |
| <body> | |
| <div id="layout"> | |
| <!-- Menu toggle --> | |
| <a href="#menu" id="menuLink" class="menu-link"> | |
| <!-- Hamburger icon --> | |
| <span></span> | |
| </a> | |
| <div id="main"> | |
| <div class="header"> | |
| <h1>Philadelphia Wards</h1> | |
| </div> | |
| <div class="content"> | |
| <div id="mapid_1"></div> | |
| <script> | |
| //alert(max_total_amount); | |
| var max_num_contrib = 0; | |
| var max_total_amount = 0; | |
| var zipcode_map = L.map('mapid_1').setView([40.00, -75.11], 10); | |
| L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + | |
| '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="http://mapbox.com">Mapbox</a>', | |
| id: 'mapbox.light' | |
| }).addTo(zipcode_map); | |
| // control that shows state info on hover | |
| var info = L.control(); | |
| info.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function (props) { | |
| this._div.innerHTML = '<h4>Philly donations by ward</h4>' + (props ? | |
| '<b>' + props.num_contrib + ' contributors donated ' + '$' + props.total_amount + ' from ward ' + props.name + '</b><br />' | |
| : 'Hover over a ward'); | |
| }; | |
| info.addTo(zipcode_map); | |
| function mapRound(x){ | |
| return Math.ceil(x / 100.0) * 100 | |
| } | |
| // get color depending on population density value | |
| function getColor(d) { | |
| return d > mapRound(0.90*max_total_amount) ? '#800026' : | |
| //d > mapRound(0.75*max_total_amount) ? '#BD0026' : | |
| d > mapRound(0.65*max_total_amount) ? '#E31A1C' : | |
| //d > mapRound(0.45*max_total_amount) ? '#FC4E2A' : | |
| d > mapRound(0.40*max_total_amount) ? '#FD8D3C' : | |
| //d > mapRound(0.15*max_total_amount) ? '#FEB24C' : | |
| d > mapRound(0.15*max_total_amount) ? '#FED976' : | |
| d > 1 ? '#FFEDA0' : | |
| '#FFFFFF'; | |
| } | |
| function style(feature) { | |
| return { | |
| weight: 2, | |
| opacity: 1, | |
| color: 'white', | |
| dashArray: '3', | |
| fillOpacity: 0.7, | |
| fillColor: getColor(feature.properties.total_amount) | |
| }; | |
| } | |
| function highlightFeature(e) { | |
| var layer = e.target; | |
| layer.setStyle({ | |
| weight: 5, | |
| color: '#666', | |
| dashArray: '', | |
| fillOpacity: 0.7 | |
| }); | |
| if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { | |
| layer.bringToFront(); | |
| } | |
| info.update(layer.feature.properties); | |
| } | |
| var geojson; | |
| function resetHighlight(e) { | |
| geojson.resetStyle(e.target); | |
| info.update(); | |
| } | |
| function zoomToFeature(e) { | |
| zipcode_map.fitBounds(e.target.getBounds()); | |
| } | |
| function onEachFeature(feature, layer) { | |
| layer.on({ | |
| mouseover: highlightFeature, | |
| mouseout: resetHighlight, | |
| //click: zoomToFeature | |
| }); | |
| } | |
| zipcode_map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>'); | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| //grades = [0, mapRound(0.05*max_total_amount), mapRound(0.15*max_total_amount), mapRound(0.30*max_total_amount), mapRound(0.45*max_total_amount), mapRound(0.60*max_total_amount), mapRound(0.75*max_total_amount), mapRound(0.90*max_total_amount)], | |
| grades = [0, 1, mapRound(0.15*max_total_amount), mapRound(0.40*max_total_amount), mapRound(0.65*max_total_amount), mapRound(0.90*max_total_amount)], | |
| labels = [], | |
| from, to; | |
| for (var i = 0; i < grades.length; i++) { | |
| from = grades[i]; | |
| to = grades[i + 1]; | |
| labels.push( | |
| '<i style="background:' + getColor(from + 1) + '"></i> ' + | |
| from + (to ? '–' + to : '+')); | |
| } | |
| div.innerHTML = labels.join('<br>'); | |
| return div; | |
| }; | |
| </script> | |
| <script> | |
| $(document).ready(function() { | |
| //alert( 'hi there dude.' ); | |
| //var combined_data = 'hi' | |
| // Pull in zipcode data | |
| $.getJSON( "Political_Wards.geojson", function() { | |
| //console.log( "success" ); | |
| }) | |
| .done(function( district_data ) { | |
| //console.log( "second success" ); | |
| //console.log(district_data) | |
| // Pull in donation data by zipcode | |
| $.getJSON( "donations.json", function() { | |
| //console.log( "success 2" ); | |
| }) | |
| .done(function( donation_data ) { | |
| //console.log( "second success 2" ); | |
| //console.log(donation_data) | |
| //alert( combined_data ); | |
| for (i in district_data.features) { | |
| //console.log(district_data.features[i]) | |
| // "name":"19962","zipcode":19962,"num_contrib":"8","total_amount":"3400.00" | |
| district_data.features[i].properties.name = district_data.features[i].properties.WARD_NUM; | |
| district_data.features[i].properties.zipcode = district_data.features[i].properties.WARD_NUM; | |
| district_data.features[i].properties.num_contrib = 0; | |
| district_data.features[i].properties.total_amount = 0; | |
| if (district_data.features[i].properties.WARD_NUM in donation_data) { | |
| //console.log('found: '+district_data.features[i].properties.DISTRICT) | |
| key = district_data.features[i].properties.WARD_NUM | |
| district_data.features[i].properties.num_contrib = donation_data[key].num_donations; | |
| district_data.features[i].properties.total_amount = donation_data[key].amount_donated; | |
| if ( max_num_contrib < donation_data[key].num_donations ) { | |
| max_num_contrib = donation_data[key].num_donations; | |
| } | |
| //console.log('curr: '+max_total_amount+ ' & test: '+donation_data[key].amount_donated) | |
| // Javascript doesn't like decimal notation ... | |
| if ( parseInt(max_total_amount) < parseInt(donation_data[key].amount_donated) ) { | |
| max_total_amount = donation_data[key].amount_donated; | |
| } | |
| } | |
| else { | |
| //console.log('missing: '+district_data.features[i].properties.DISTRICT) | |
| } | |
| } | |
| //alert(max_total_amount); | |
| geojson = L.geoJson(district_data, { | |
| style: style, | |
| onEachFeature: onEachFeature | |
| }).addTo(zipcode_map); | |
| legend.addTo(zipcode_map); | |
| }) | |
| .fail(function() { | |
| console.log( "error 2" ); | |
| }) | |
| .always(function() { | |
| //console.log( "getJSON().always() 2" ); | |
| }); | |
| // End Pull in donation data by zipcode | |
| }) | |
| .fail(function() { | |
| console.log( "error" ); | |
| }) | |
| .always(function() { | |
| //console.log( "getJSON().always()" ); | |
| }); | |
| // alert( 'by dude' ); | |
| } ); | |
| </script> | |
| </div> <!-- /main --> | |
| </div> | |
| </body> | |
| </html> |