Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (113 sloc) 5.16 KB
<!-- JS/JQUERY CODE SAMPLE
by Michael Barklage, Aug 2016 -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./PapaParse/papaparse.min.js"></script>
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/datejs/date.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 93%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="map_caption">Fatal police shootings in the last 3 months
</div>
</body>
</html>
<script>
var map;
function initMap() {
var url = "https://raw.githubusercontent.com/washingtonpost/data-police-shootings/master/fatal-police-shootings-data.csv";
var shootings = new Array();
$.get(url, function (data) {
// parse csv to array via Papa Parse JS library
var results = Papa.parse(data, {
header: true
});
// default start date is 3 months ago
var numMonths = 3;
//$("#map_caption").html("Fatal police shootings in the last " + numMonths + " months.");
// uses date.js open source library
var startDate = new Date.today().addMonths(-1 * numMonths);
var thisDate = new Date();
var location = "";
// organize data by city, accounting for multiple shootings in the time frame
for (var n = 0; n < results.data.length-1; n++) {
thisDate = Date.parseExact(results.data[n]['date'], "yyyy-M-d");
if (thisDate.getTime() >= startDate.getTime()) {
location = results.data[n]['city'] + ", " + results.data[n]['state'];
if (location in shootings) {
// city key already exists, push new data into it
shootings[location].push(results.data[n]);
}
else {
// create new city key
shootings[location] = new Array(results.data[n]);
}
}
}
// import lat/long data for US cities
$.get("./cities.csv", function(data) {
var cityData = Papa.parse(data, {
header: true
});
// create the initial map, centered on DC
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 47, lng: -122},
zoom: 7
});
// loop through all US cities
for (var x = 0; x < cityData.data.length; x++) {
var coordCity = cityData.data[x]['city'] + ", " + cityData.data[x]['state'];
// check if there was a shooting in this city
if (coordCity in shootings) {
var desc = coordCity + ":\n";
var htmldesc = coordCity + ":<br>";
var coords = new google.maps.LatLng(cityData.data[x]['lat'], cityData.data[x]['lng']);
// get name and date for all shootings in this city
for (var y = 0; y < shootings[coordCity].length; y++) {
desc = desc + shootings[coordCity][y]['name'] + ", " + shootings[coordCity][y]['date'] + "\n";
htmldesc = htmldesc + shootings[coordCity][y]['name'] + ", " + shootings[coordCity][y]['age'] + ", ";
htmldesc = htmldesc + shootings[coordCity][y]['gender'] + ", " + shootings[coordCity][y]['date'] + "<br>";
}
// create map marker at city coordinates with info in description
var marker = new google.maps.Marker({
position: coords,
title: desc
});
// create an InfoWindow object for click/mobile users
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,htmldesc,infowindow){
return function() {
infowindow.setContent(htmldesc);
infowindow.open(map,marker);
};
})(marker,htmldesc,infowindow));
marker.setMap(map);
// this city's data is no longer needed, so remove it to avoid duplication
delete shootings[coordCity];
}
}
// any entries remaining in the shootings array weren't found in cities.csv, so document the error
if (Object.keys(shootings).length > 0) {
console.log("No coordinates found for these cities:");
for (var key in shootings) {
console.log(key);
}
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZvpgOPgu0yTwkcGzNBcl4AOToX4KbnX0&callback=initMap"
async defer></script>
You can’t perform that action at this time.