31:T58c,{ const height = width * (9 / 16) const {Link} = stream let el if (Link.startsWith('https://www.facebook.com')) { el = html`` } else if (Link.startsWith('https://www.youtube.com') || Link.startsWith('https://youtu.be')) { const ytID = Link.startsWith('https://youtu.be') ? Link.split('tu.be/')[1] : Link.split('v=')[1] el = html`` } else if (Link.startsWith('https://www.twitch.tv')) { el = html`` } else if (Link.startsWith('https://www.periscope.tv') || Link.startsWith('https://www.pscp.tv')) { el = md`Periscope does not support video embeds :(\n\nVisit [${Link}](${Link}) directly to watch.` } else { el = html`` } return el }32:T4fb,viewof stream = { // via https://observablehq.com/@mbostock/u-s-state-map const svg = d3.create('svg').attr('viewBox', [0, 0, 975, 610]) function select(d) { const node = svg.node() node.value = d.properties node.dispatchEvent(new CustomEvent('input')) points.attr('stroke', (d) => d.properties.Status === 'Live' ? 'orangered' : 'gray') d3.select(this).attr('stroke', 'black') } svg .append('g') .attr('fill', '#ccc') .selectAll('path') .data(topojson.feature(us, us.objects.states).features) .enter().append('path') .attr('d', path) svg .append('path') .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr('fill', 'none') .attr('stroke', 'white') .attr('stroke-linejoin', 'round') .attr('pointer-events', 'none') .attr('d', path) const points = svg.append('g') .selectAll('path') .data(streamFeatures) .enter().append('path') .attr('d', path) .attr('stroke', (d) => d.properties.Status === 'Live' ? 'orangered' : 'gray') .attr('stroke-width', '20px') .attr('opacity', .5) .on('click', select) const node = svg.node() node.value = {Source: 'twitch.tv/woke', Link: 'https://www.twitch.tv/woke'} return node }33:[{"id":"ba273a85f502c6d476a5f1fb2877ca35dc0bc19ebb165fb6e9e32fc77348fe5f747c7002619c057cd66eee4640d648cbbe4ab0b64b55a0606bab03472be76a82","href":"https://static.observableusercontent.com/files/ba273a85f502c6d476a5f1fb2877ca35dc0bc19ebb165fb6e9e32fc77348fe5f747c7002619c057cd66eee4640d648cbbe4ab0b64b55a0606bab03472be76a82","name":"states_hash.json","type":"application/json","lastModified":1591060944386.704,"size":1388},{"id":"24ab3448919a765fa5646191ed475f8c106aeeaf173afffbb13131d6d4560ad6b9f2a3ba9400ce30b46fc3b8abb7e7494f837250b8dff439fa49d175f72f4c48","href":"https://static.observableusercontent.com/files/24ab3448919a765fa5646191ed475f8c106aeeaf173afffbb13131d6d4560ad6b9f2a3ba9400ce30b46fc3b8abb7e7494f837250b8dff439fa49d175f72f4c48","name":"cities.json","type":"application/json","lastModified":1590965675152.934,"size":244212}] 2f:{"title":"Map of George Floyd protest live streams","cells":[{"id":0,"value":"md`# Map of George Floyd protest live streams\n\nData from the [twitch.tv/woke spreadsheet](https://docs.google.com/spreadsheets/d/1xfIAt7oD95jobhnxGggX95ETVKUQSbCy4al4QcJ25GA/edit#gid=0). \n\nClick a point on the map to view the stream.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"stream && html`${stream.Source}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"stream","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"streamFeatures = streamData.map((d, idx) => ({\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [d.Longitude, d.Latitude],\n },\n properties: {\n ...d,\n },\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"streamData = {\n const data = []\n \n for (const row of streamDataRaw) {\n const cityName = `${row.City}, ${row.State}`\n \n const cityLoc = cityLocs.get(cityName)\n if (!cityLoc) {\n continue\n }\n \n data.push({\n ...row,\n Longitude: cityLoc[0],\n Latitude: cityLoc[1],\n })\n }\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"streamDataRaw = {\n while (true) {\n yield []\n try {\n const data = await d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vRwy_RmqgnDQiYnzJDpvQA3t_q1XgJB42L1PrzDj9yLhhoSf899fH51fSnIaWwNNX1qELmyH9I2qQhc/pub?gid=0&single=true&output=csv')\n yield data\n } catch (err) {\n console.log(err)\n }\n await Promises.tick(5 * 60 * 1000)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"cityLocs = {\n const cityData = await FileAttachment(\"cities.json\").json()\n const stateAbbrevs = await FileAttachment(\"states_hash.json\").json()\n const abbrevByState = _.invert(stateAbbrevs)\n \n const index = new Map()\n for (const row of cityData) {\n index.set(`${row.city}, ${abbrevByState[row.state]}`, [row.longitude, row.latitude])\n }\n \n return index\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"_ = require('lodash@4')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}