31:T67b,overlay = { // via https://observablehq.com/@mbostock/u-s-state-map const p = 80 const svg = d3.create('svg').attr('viewBox', [-p, -p, 975 + p * 2, 610 + p * 2]).attr('width', '78px') svg .append('path') .datum(topojson.mesh(us, us.objects.states)) .attr('fill', 'none') .attr('stroke', 'rgba(255, 255, 255, .75)') .attr('stroke-width', '40px') .attr('stroke-linejoin', 'round') .attr('d', path) svg .append('g') .attr('fill', '#222') .attr('stroke', '#222') .attr('stroke-width', '5px') .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', '#444') .attr('stroke-width', '7px') .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('fill', (d) => d.properties.Status === 'Live' ? 'orangered' : '#999') .attr('opacity', .5) return html`

${svg.node()}

${streamData.length ? html`tracking ${streamData.length} live streams ` : ''}woke.net/streams

` }32:[{"id":"24ab3448919a765fa5646191ed475f8c106aeeaf173afffbb13131d6d4560ad6b9f2a3ba9400ce30b46fc3b8abb7e7494f837250b8dff439fa49d175f72f4c48","href":"https://static.observableusercontent.com/files/24ab3448919a765fa5646191ed475f8c106aeeaf173afffbb13131d6d4560ad6b9f2a3ba9400ce30b46fc3b8abb7e7494f837250b8dff439fa49d175f72f4c48","name":"cities.json","type":"application/json","lastModified":1591476708650.445,"size":244212},{"id":"ba273a85f502c6d476a5f1fb2877ca35dc0bc19ebb165fb6e9e32fc77348fe5f747c7002619c057cd66eee4640d648cbbe4ab0b64b55a0606bab03472be76a82","href":"https://static.observableusercontent.com/files/ba273a85f502c6d476a5f1fb2877ca35dc0bc19ebb165fb6e9e32fc77348fe5f747c7002619c057cd66eee4640d648cbbe4ab0b64b55a0606bab03472be76a82","name":"states_hash.json","type":"application/json","lastModified":1591476708650.445,"size":1388}] 2f:{"title":"twitch.tv/woke stream overlay","cells":[{"id":0,"value":"md`# twitch.tv/woke stream overlay\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`transparent background`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`black background`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"html`

${overlay.cloneNode(true)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"{\n const scale = 2\n const el = overlay.cloneNode(true)\n yield el\n const box = el.getBoundingClientRect()\n yield html`

${el}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`gray background`","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"html`

${overlay.cloneNode(true)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"path = d3.geoPath().projection(projection).pointRadius(35)","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 yield []\n while (true) {\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":"$W32","stdlib":"1","titling":"auto"}