31:T112e,viewof overlay = { const height = 200 const iconSize = 130 const transitionTime = .3 function map(streamFeatures) { // 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', iconSize + 20).attr('height', iconSize) 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 svg.node() } function onNodeAdded(el) { if (el.className === 'icon') { el.style.transition = `all ${transitionTime}s linear ${transitionTime}s` el.style.transform = 'perspective(400px) rotateY(-90deg)' el.getBoundingClientRect() el.style.transform = 'perspective(400px) rotateY(0deg)' } else if (el.className === 'text') { el.style.position = 'absolute' el.style.transform = 'translateX(-5px)' el.style.opacity = 0 el.style.transition = `all ${transitionTime}s linear ${transitionTime}s` el.getBoundingClientRect() el.style.transform = 'translateX(0)' el.style.opacity = 1 } } function onBeforeNodeDiscarded(el) { if (el.className === 'icon') { el.style.transition = 'none' el.style.position = 'absolute' el.style.transform = 'perspective(400px) rotateY(0deg)' el.getBoundingClientRect() el.style.transition = `all ${transitionTime}s linear` el.style.transform = 'perspective(400px) rotateY(90deg)' setTimeout(() => {el.parentNode.removeChild(el)}, transitionTime * 1000) return false } else if (el.className === 'text') { el.style.transition = `all ${transitionTime}s linear` el.style.transform = 'translateX(5px)' el.style.opacity = 0 setTimeout(() => {el.parentNode.removeChild(el)}, transitionTime * 1000) return false } } function update({overlayView, streamFeatures}) { let icon let text if (overlayView === 'map') { icon = map(streamFeatures) text = html`${streamFeatures.length ? html`tracking ${streamFeatures.length} live streams ` : ''}woke.net/streams` } else if (overlayView === 'discord') { icon = html`

` text = html`join us discord.gg/woke` } else if (overlayView === 'woke') { icon = html`

` text = html`share a stream woke.net/submit` } const newNode = html`

${icon}

${text}

` morphdom(node, newNode, {onNodeAdded, onBeforeNodeDiscarded}) } const node = html`

` node.value = {update} return node }32:[{"id":"2edbb5f602b9d11836f70ac7041ad82e36ea211333aac68268c735932f36b4afb96d94aee8bdda3a056629313566ba18843c0e17f9d3e309a95aaf41758d0fb8","href":"https://static.observableusercontent.com/files/2edbb5f602b9d11836f70ac7041ad82e36ea211333aac68268c735932f36b4afb96d94aee8bdda3a056629313566ba18843c0e17f9d3e309a95aaf41758d0fb8","name":"woke@2.png","type":"image/png","lastModified":1591736012387.392,"size":61927},{"id":"7469e71ddf34c4f98b8e2c9e227b07abc6231f130a3c4657d00af55f175b61b293b68c0462b87333b06cd763ca0c1909241618f5d0ff04d73bb7292bbb8ee3a4","href":"https://static.observableusercontent.com/files/7469e71ddf34c4f98b8e2c9e227b07abc6231f130a3c4657d00af55f175b61b293b68c0462b87333b06cd763ca0c1909241618f5d0ff04d73bb7292bbb8ee3a4","name":"discord.svg","type":"image/svg+xml","lastModified":1591735984636.764,"size":1106}] 2f:{"title":"twitch.tv/woke stream overlay v2","cells":[{"id":0,"value":"md`# twitch.tv/woke stream overlay v2\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"mapData = {\n const data = {\n streamFeatures,\n overlayView,\n }\n overlay.update(data)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"overlayView = {\n while (true) {\n yield 'map'\n await Promises.tick(60 * 1000)\n yield 'discord'\n await Promises.tick(10 * 1000)\n yield 'woke'\n await Promises.tick(10 * 1000)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"wokeIconURL = FileAttachment(\"woke@2.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"discordIconURL = FileAttachment(\"discord.svg\").url()","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":560,"value":"import {us, streamFeatures} from '@chromakode/map-of-george-floyd-protest-live-streams'","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"morphdom = require('morphdom@2.6.1/dist/morphdom-umd.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"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"}],"files":"$W32","stdlib":"1","titling":"auto"}