2f:null 30:["$","title",null,{"children":"Police Brutality Incidents at BLM Protests (2020) | Nicholas Tahani | Observable"}] 35:T4ed,map = { const container = html`

`; yield container; const map = new mapboxgl.Map({ container: container, style: 'mapbox://styles/mapbox/dark-v10', center: [-98.58, 39.82], // starting position [lng, lat] zoom: 3.5 }).addControl(new mapboxgl.NavigationControl()); //zoom controls const mapContainer = map.getCanvasContainer(); const svg = d3 .select(mapContainer) .append('svg') .attr('width', '100%') .attr('height', '600') .style('position', 'absolute') .style('z-index', 2); const dots = svg .selectAll('circle') .data(points) .enter() .append('circle') .attr('r', 5) .style('fill', 'red') .style('opacity', 0.5) .style('cursor', 'crosshair') .on('mouseover', mouseover) //hook-up d3 and mapbox function project(d) { return map.project(new mapboxgl.LngLat(d[0], d[1])); } function update() { dots .attr('cx', d => project(d.geometry.coordinates).x) .attr('cy', d => project(d.geometry.coordinates).y); } dots.on('click', d => map.flyTo({ center: d.geometry.coordinates, zoom: 15 })) //redraw points when map moves map.on('viewreset', update); map.on('move', update); map.on('moveend', update); update(); }36:[] 33:{"id":"8293e98195ef3eda","slug":"police-brutality-incidents-at-the-george-floyd-protests-ma","title":"Police Brutality Incidents at BLM Protests (2020)","thumbnail":"1b1ecf5811edcd7756ecc504fd5d9e8766e28e504611306bfa1f9ed2d0aae853","access_level":"public","create_time":"$D2020-06-11T19:15:53.798Z","update_time":"$D2024-08-01T07:33:44.139Z","view_time":null,"first_public_time":"$D2020-06-17T21:19:16.517Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"7cdadd6b49a8f3e0","login":"nicktahani","name":"Nicholas Tahani","avatar_url":"https://avatars-next.observableusercontent.com/189bd6428a8cf525288ae395fd50fe4a2bfd4252fba80403361960889f50daa8","tier":"starter_2024"},"version":991,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ca9534b318b4d3b","login":"nicktahani","name":"Nicholas Tahani","avatar_url":"https://avatars-next.observableusercontent.com/189bd6428a8cf525288ae395fd50fe4a2bfd4252fba80403361960889f50daa8","tier":null}],"members":[{"type":"individual","id":"0ca9534b318b4d3b","login":"nicktahani","name":"Nicholas Tahani","avatar_url":"https://avatars-next.observableusercontent.com/189bd6428a8cf525288ae395fd50fe4a2bfd4252fba80403361960889f50daa8","tier":null,"role":"editor"}],"comments":[{"id":"476d87d7cae67baa","reply_to_id":null,"content":"If you scroll out, it looks like Las Vegas is just off the coast of Africa. Actually, it looks like (Lat,Lon)=(0,0) to me so probably one of your data points is parsing incorrectly.","create_time":"$D2020-06-17T23:02:09.106Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}},{"id":"69e3a3f4a8168d21","reply_to_id":"476d87d7cae67baa","content":"Yes, there's actually more than a few points returning [0, 0]. I'm currently figuring out a better way of handling this. Thanks for the comment!","create_time":"$D2020-06-17T23:30:06.764Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"0ca9534b318b4d3b","login":"nicktahani","name":"Nicholas Tahani","avatar_url":"https://avatars-next.observableusercontent.com/189bd6428a8cf525288ae395fd50fe4a2bfd4252fba80403361960889f50daa8","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2988637512d5508c","slug":"police-brutality","title":"Police Brutality","owner":{"id":"7cdadd6b49a8f3e0","login":"nicktahani","name":"Nicholas Tahani"}},"type":"notebook","body":{"title":"Police Brutality Incidents at BLM Protests (2020)","cells":[{"id":0,"value":"md`# Police Brutality Incidents at BLM Protests (2020)\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"md`**Note:** The data source for this map returns geolocation coordinates for the city center in which the incident occured, and not the *exact* location, meaning there's overlap in the points. To combat this, I modified a snippet from [here](https://github.com/mnlmaier/846-frontend/blob/419a316baaa936bd8a686577fccefda1e46a33d2/modules/map/Map.vue) which slightly randomizes their location so that each incident is viewable. \n\nZoom in to view individual incidents. Hovering over incidents will display some information in the empty space just below here.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"infoBox = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`*Source: [\"846-backend\" Github Repo](https://github.com/949mac/846-backend)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"points = data.map(d => {\n return {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [d.lng, d.lat]\n },\n properties: d\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`#### Util`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function mouseover(d) {\n console.log('d', d)\n tooltip\n .style('display', 'inline')\n .html(\n `${d.properties.location}

\n Summary: ${d.properties.summary}

\n Related Links: ${d.properties.sources()}\n `\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"tooltip = d3.select(infoBox)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"//randomize the incidents around city center coordinates to remove overlap\nfunction randIncidentArea(coord) {\n const scale = 2 * 0.001;\n return parseFloat(coord) + scale * (Math.random() - 0.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"data = {\n const protestData = await d3.json('https://api.846policebrutality.com/api/incidents');\n return protestData.data.map(d => ({\n ...d,\n location: (d.city === '' || d.state === '') ? 'Location Not Specified' : `${d.city}, ${d.state}`,\n lat: randIncidentArea(+d.geocoding.lat),\n lng: randIncidentArea(+d.geocoding.long),\n summary: d.title,\n sources: () => {\n return d.links.map((link, i) => {\n return `${i + 1}`\n }).join(', ')\n }\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = \"pk.eyJ1IjoibnMtdCIsImEiOiJjazhxaHAzdXQwNDJvM3Juc214dWdrNWs4In0.brfqvnph2X6BgWJvgYbZzw\";\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"