31:T4f2,md`An animated version of The Washington Post's map of all fatal shootings by on-duty police officers from Jan. 1, 2015 (minus the choropleth). The Post provides the data in CSV format on GitHub, but I found another version which includes coordinates and better assists mapping. Thanks to Alex Garcia for the tutorial on how to fetch it. P.S. Now that I found that the Mapping Police Violence team had the same idea & aesthetic in mind, this should also be seen as an implementation of their stellar work. Nevertheless, it's really difficult to keep track of their yellow flashes, unless you can slow down the auto-scrubbing procedure. ${ navigator.userAgent.match('HeadlessChrome') ? html`

` : '' }`32:T929,viewof map = { const container = html`

`; const caption = html`

${d3.format(",")( data.length - verified.length )} shootings (out of ${d3.format(",")( data.length )}) with unverified locations are not shown on this map. Scroll or hit to pan out to Alaska and Hawaii.

`; const checkbox = html`

Flashes`; checkbox.flashes.addEventListener("change", function() { mutable flashes = this.checked; }); const content = html`

${container}

${viewof day}

${checkbox}

${caption}`; const presentation = content.querySelector("#map-wrapper"); const fullScreenButton = caption.querySelector("button"); fullScreenButton.addEventListener("click", function() { const props = [ 'requestFullscreen', 'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen' ]; for (let prop of props) { if (presentation[prop]) { presentation[prop](); return; } } }); yield content; const map = (content.value = new mapboxgl.Map({ container, center: [-96, 38.5], zoom: 3.4, style: "mapbox://styles/mapbox/dark-v9" })); const samePrevFilter = filter("<=", 0); map.on("load", function() { const source = { type: "geojson", data: { type: "FeatureCollection", features: verified } }; map.addLayer({ id: "shootings", type: "circle", source: source, paint: { "circle-color": "red", "circle-opacity": 0.1, "circle-stroke-color": "red", "circle-stroke-opacity": 0.3, "circle-stroke-width": 1, "circle-radius": 3 }, filter: ["all", samePrevFilter] }); map.addLayer({ id: "recent", type: "circle", source: source, paint: { "circle-color": "orange", "circle-opacity": 0.8, "circle-radius": 10 }, filter: ["all", filter("==", 0)] }); }); mutable flashes = false; invalidation.then(() => map.remove()); }33:[{"id":"3ec1f82c0ed8ae57d2b109c4e44927d187088c82640d3e26615db87605a7c5921d1f0476abbf5ed4428f2dc45626804e335d73457eb7811a40415795fdbbf008","href":"https://static.observableusercontent.com/files/3ec1f82c0ed8ae57d2b109c4e44927d187088c82640d3e26615db87605a7c5921d1f0476abbf5ed4428f2dc45626804e335d73457eb7811a40415795fdbbf008","name":"policeshootings_all_6-1-2020.json","type":"application/json","lastModified":1591152716083.835,"size":4090581},{"id":"b82597200b9984b0742a597036462e2a738f5366440e1e45e51dee5ec6346b2ea9dd2190d0e691f4eedd2c27b6df4993c447f1768f0912ebfeaa10ea08cf133c","href":"https://static.observableusercontent.com/files/b82597200b9984b0742a597036462e2a738f5366440e1e45e51dee5ec6346b2ea9dd2190d0e691f4eedd2c27b6df4993c447f1768f0912ebfeaa10ea08cf133c","name":"thumbnail.png","type":"image/png","lastModified":1591226417317.162,"size":843441}] 2f:{"title":"Fatal Police Shootings in the U.S.","cells":[{"id":0,"value":"md`# Fatal Police Shootings in the U.S.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`\n___\n## Appendix\n\nNot yet organized.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"filter = (o, s) => [o, [\"number\", [\"get\", \"s\"]], s]","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"mutable s = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"{\n mutable s = +day.value;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"mutable flashes = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1321,"value":"{\n if (flashes) {\n map.setFilter(\"shootings\", filter(\"<\", s));\n map.setFilter(\"recent\", filter(\"==\", s));\n } else {\n map.setFilter(\"shootings\", filter(\"<=\", s));\n map.setFilter(\"recent\", filter(\"==\", 0));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"viewof day = TangledScrubber(dates, {\n initialDelay: 10,\n loop: false,\n format: d =>\n `${d.toLocaleString(undefined, {\n year: \"numeric\",\n month: \"2-digit\",\n day: \"2-digit\",\n timeZone: \"UTC\"\n })}`,\n tMin: 10,\n tMax: 500,\n tMinWidth: \"4em\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"dates = dateRange(startDate, verified[verified.length - 1].properties.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"startDate = d3.utcParse(\"%Y-%m-%d\")(\"2015-01-01\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"function dateRange(start, end) {\n const duration = 1000 * 60 * 60 * 24;\n const dates = [];\n let ms = start * 1;\n while (ms < end * 1 + duration) {\n dates.push(new Date(ms));\n ms += duration;\n }\n return dates;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"verified = data.filter(\n d => d.geometry.coordinates[0] && d.geometry.coordinates[1]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"data = {\n let raw;\n try {\n raw = await d3.json(\n \"https://www.washingtonpost.com/graphics/investigations/police-shootings-database/data/policeshootings_all.json\"\n );\n } catch (err) {\n // Load pre-downloaded JSON if fetching from WaPo doesn't work\n raw = await FileAttachment(\"policeshootings_all_6-1-2020.json\").json();\n }\n const data = raw.map((d) => {\n const date = d3.utcParse(\"%Y-%m-%d\")(d.date);\n return {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.lon, d.lat] },\n properties: {\n date: date,\n s: +date,\n city: d.city,\n state: d.state\n }\n };\n });\n return data.sort((a, b) => a.properties.date - b.properties.date);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"mapboxgl = {\n let gl = await require(\"mapbox-gl@1.5.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZHV5bmd1eWVuMTU4IiwiYSI6ImNrYXd2d3g0MTAwYmkydW9hM3hkenhkNzIifQ.nryaJRMknR5-_LSVvzhj3Q\";\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"import { TangledScrubber } from \"@duynguyen1678/tangled-scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}