31:T144e,{ function arc(opts) { const svg = d3.create("svg") .attr("width", size) .attr("height", size) .attr("viewBox", [0, 0, size, size]) const edgesGroup = svg.append("g") const pointsGroup = svg.append("g") const countermeasuresLastHits = d3.local() function colorNode({infected, infectionTime, isCountermeasures, countermeasuresHits}, i, nodes) { if (infected) { if (infectionTime > 0) { return infectedColor } else { return fadeColor } } else if (isCountermeasures) { return countermeasuresColor } return baseColor } function colorCountermeasuresHits({infected, isCountermeasures, countermeasuresHits}, i, nodes) { if (!isCountermeasures || infected) { return } const lastCountermeasuresHits = countermeasuresLastHits.get(nodes[i]) || 0 if (countermeasuresHits > lastCountermeasuresHits) { countermeasuresLastHits.set(nodes[i], countermeasuresHits) d3.select(nodes[i]) .attr('stroke', countermeasuresHitColor) .attr('stroke-width', 2) .transition('countermeasures') .duration(fadeTime) .attr('stroke-width', 0) } } const chartFullSize = chartSize + 2 * chartMargin const chart = d3.create("svg") .attr("width", chartFullSize) .attr("height", chartFullSize) .attr("viewBox", [0, 0, chartFullSize, chartFullSize]) chart.append('path') .attr('fill', 'none') .attr('stroke', infectedColor) .attr('stroke-width', 1.5) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') const chartX = d3.scaleLinear() .domain([0, 50]) .range([chartMargin, chartSize + chartMargin]) const chartY = d3.scaleLinear() .domain([0, 20]) .range([chartSize + chartMargin, chartMargin]) const chartLine = d3.line() .x(d => chartX(d.tick)) .y(d => chartY(d.infectedCount)) const gen = function* () { const points = startPoints(opts) for (const {changedPoints, changedEdges, stats} of stepInfection(points)) { pointsGroup.selectAll("circle") .data(changedPoints, p => p.idx) .join( enter => enter .append('circle') .attr("cx", ({x}) => x) .attr("cy", ({y}) => y) .attr("r", circleR) .attr("fill", colorNode), update => update .transition() .delay(({infectionTime}) => infectionTime > 0 ? animateTime / 2 : 0) .duration(({infectionTime}) => infectionTime > 0 ? animateTime / 2 : fadeTime) .attr('fill', colorNode), exit => null, ) .each(colorCountermeasuresHits) edgesGroup.selectAll('line') .data(changedEdges, e => e.key) .join( enter => enter .append('line') .attr('x1', ({x1}) => x1) .attr('y1', ({y1}) => y1) .attr('x2', ({x1}) => x1) .attr('y2', ({y1}) => y1) .style('stroke', infectedColor) .style('stroke-width', strokeWidth) .call(enter => enter .transition() .duration(animateTime) .attr('x2', ({x2, x1, halted}) => halted ? x1 + .5 * (x2 - x1) : x2) .attr('y2', ({y2, y1, halted}) => halted ? y1 + .5 * (y2 - y1) : y2) .transition() .duration(fadeTime) .style('stroke', ({halted}) => halted ? haltedColor : fadeColor) ), update => update, exit => null, ) chart.select('path').attr('d', chartLine(stats)) yield } } return { dotsEl: svg.node(), chartEl: chart.node(), gen, } } const parentEl = document.createElement('div') while (true) { parentEl.innerHTML = '' parentEl.style.position = 'relative' parentEl.style.width = `${2 * size + spacing}px` parentEl.style.height = `${2 * size + spacing}px` const options = [ {}, {useCountermeasures: true}, {useDistancing: true}, {useDistancing: true, useCountermeasures: true}, ] const corners = ['left', 'top', 'right', 'bottom'] const generators = [] for (let i = 0; i < 4; i++) { const {dotsEl, chartEl, gen} = arc(options[i]) generators.push(gen()) dotsEl.style.position = chartEl.style.position = 'absolute' dotsEl.style[corners[i]] = chartEl.style[corners[i]] = 0 dotsEl.style[corners[(i + 1) % 4]] = chartEl.style[corners[(i + 1) % 4]] = 0 dotsEl.style.transform = `rotate(${-180 + 90 * i}deg)` parentEl.appendChild(dotsEl) parentEl.appendChild(chartEl) } yield parentEl while (generators.map(g => g.next()).some(({done}) => !done)) { await Promises.tick(delay) yield parentEl } await Promises.tick(5000) } }32:Tcf2,stepInfection = function*(points) { const originPoint = {x: 0, y: 0} function angleBetween(a1, a2) { const diff = Math.abs(a2 - a1) % (2 * Math.PI) return diff < Math.PI ? diff : diff - Math.PI } function distance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } const maxDistance = 1.5 * (circleR + 2 * circleSpacing + 2 * variance) const randomInfectionTime = d3.randomNormal(infectionTMu, infectionTSigma) const randomInfectionCount = d3.randomNormal(infectionMMu, infectionMSigma) const delaunay = d3.Delaunay.from(points, p => p.x, p => p.y) const activeInfected = new Set(points.filter(p => p.infectionTime > 0)) function infect(p, by) { let prevented = false if (p.isCountermeasures && Math.random() < countermeasuresEffect) { p.countermeasuresHits++ changedPoints.push(p) prevented = true } if (by !== originPoint) { const edgeKey = `${by.idx}->${p.idx}` changedEdges.set(edgeKey, { key: edgeKey, x1: by.x, y1: by.y, x2: p.x, y2: p.y, halted: p.infected || prevented, }) } if (p.infected || prevented) { return } p.infected = true p.infectedBy = by || originPoint p.infectionTime = Math.round(randomInfectionTime()) p.infectionCount = Math.round(randomInfectionCount()) by.infectionCount-- activeInfected.add(p) changedPoints.push(p) } let tick = 0 let changedPoints = [] let changedEdges = new Map() let stats = [] function stepData(pointsOverride) { stats.push({ tick: tick++, infectedCount: activeInfected.size, }) return { changedPoints: pointsOverride || changedPoints, changedEdges: [...changedEdges.values()], stats, } } yield stepData(points) // Infect initial ring. points.filter(p => p.ring === ringStart).forEach(p => infect(p, originPoint)) yield stepData(changedPoints) while (activeInfected.size) { changedPoints = [] changedEdges = new Map() for (const p of [...activeInfected]) { changedPoints.push(p) p.infectionTime-- if (p.infectionTime <= 0) { activeInfected.delete(p) continue } if (p.ring === ringCount + ringStart - 1) { continue } const neighbors = _.shuffle([...delaunay.neighbors(p.idx)]) for (const neighborIdx of neighbors) { if (p.infectionCount <= 0) { break } const neighbor = points[neighborIdx] if (neighbor === p.infectedBy) { // No tag-backs. continue } if (distance(p.x, p.y, neighbor.x, neighbor.y) > maxDistance) { continue } const byAngle = Math.atan2(p.y - p.infectedBy.y, p.x - p.infectedBy.x) const toAngle = Math.atan2(neighbor.y - p.y, neighbor.x - p.x) const similarity = 1 - (angleBetween(byAngle, toAngle) / Math.PI) if (similarity < angleThreshold[1] && Math.random() > (similarity - angleThreshold[0]) * (angleThreshold[1] - angleThreshold[0])) { continue } if (Math.random() < infectionP) { infect(neighbor, p) } } } yield stepData() } }33:T7a6,startPoints = function({useDistancing, useCountermeasures}) { let data = [] const ringEnd = ringCount + ringStart const ringEndInner = useDistancing ? ringEnd : ringEnd - outerRings for (let ringIdx = ringStart; ringIdx < ringEndInner; ringIdx++) { const circleSize = 2 * (circleR + circleSpacing) const ringRadius = ringIdx * circleSize const arcAngle = Math.PI / 2 const arcLength = arcAngle * ringRadius - 2 * variance const count = Math.floor(arcLength / circleSize) const circleSpace = count * circleSize const centeringSpace = (arcLength - circleSpace) / arcLength // We add circleSize / 2 because circles are positioned from their centers. const centeringOffset = centeringSpace / 2 + (circleSize / 2) / arcLength for (let circleIdx = 0; circleIdx < count; circleIdx++) { const angle = arcAngle * ((circleIdx / count) * (1 - centeringSpace) + centeringOffset) const distanceFromCenter = ((ringIdx - ringStart) / ringEndInner) const point = { x: ringRadius * Math.cos(angle) + (2 * Math.random() - 1) * variance, y: ringRadius * Math.sin(angle) + (2 * Math.random() - 1) * variance, ring: ringIdx, isDistancing: useDistancing && ringIdx < ringEnd - outerRings && Math.random() < distancingUse, isCountermeasures: useCountermeasures && Math.random() < countermeasuresUse * distanceFromCenter, countermeasuresHits: 0, } data.push(point) } } if (useDistancing) { const candidates = _.shuffle(data.filter(p => p.ring >= ringEnd - outerRings)) const distanced = data.filter(p => p.isDistancing && p.ring < ringEnd - outerRings) for (const p of distanced) { p.removed = true candidates.pop() } for (const p of candidates) { p.removed = true } data = data.filter(p => !p.removed) } for (const [i, p] of data.entries()) { p.idx = i } return data }34:[] 2f:{"title":"xkcd COVID-19 spread sketch","cells":[{"id":115,"value":"md`# xkcd COVID-19 spread sketch\n\nEarly in the COVID-19 pandemic, xkcd was exploring ways to visualize the impact an individual could have on slowing the spread. I created this prototype based on a sketch by Randall Munroe to simulate the impact of social distancing (distanced circles) and extra precautions (yellow circles). The concept was to show how these measures reduce the potential paths available to the disease.\n\nThis visualization is not intended to be an accurate simulation of infectious spread -- rather, the goal was to illustrate this idea and make it visually clear. To accomplish this, we explored various ways of biasing the spread to encourage outward, spindly growth. Stochastic simulations can be unruly and difficult to tune, and we didn't end up polishing this to the point of release. In the end, Randall released [a wonderful comic](https://xkcd.com/2287/) which hits many of the notes in a much warmer, more personal way.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"viewof baseColor = color({\n 'title': 'circle color',\n 'value': '#aeaeae',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"viewof countermeasuresColor = color({\n 'title': 'countermeasures circle color',\n 'value': '#c1b750',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"viewof countermeasuresHitColor = color({\n 'title': 'countermeasures circle hit color',\n 'value': '#735f07',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"viewof infectedColor = color({\n 'title': 'infected color',\n 'value': '#801515',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof fadeColor = color({\n 'title': 'post-infected color',\n 'value': '#b08080',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"viewof haltedColor = color({\n 'title': 'halted edge color',\n 'value': '#8c7369',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof circleR = slider({\n min: 2,\n max: 10,\n value: 5,\n title: 'circle radius',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof infectionP = slider({\n min: 0,\n max: 1,\n value: .9,\n title: 'probability of infection by neighbor',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"viewof angleThreshold = rangeSlider({\n min: 0,\n max: 1,\n value: [.2, .825],\n title: 'angle similarity falloff threshold',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof infectionTMu = slider({\n min: 1,\n max: 10,\n value: 3,\n title: 'infection time (mean)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"viewof infectionTSigma = slider({\n min: 0,\n max: .5,\n value: .35,\n title: 'infection time (std dev)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"viewof infectionMMu = slider({\n min: 0,\n max: 3,\n value: 1.25,\n title: 'infection count (mean)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"viewof infectionMSigma = slider({\n min: 0,\n max: .5,\n value: .15,\n title: 'infection count (std dev)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof animateTime = slider({\n min: 1,\n max: 1000,\n value: 300,\n title: 'time to animate generation',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof delay = slider({\n min: 1,\n max: 1000,\n value: 150,\n title: 'delay between steps',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"viewof fadeTime = slider({\n min: 1,\n max: 3000,\n value: 1500,\n title: 'time for colors to fade on inactive infected',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"viewof distancingUse = slider({\n min: 0,\n max: 1,\n value: .1,\n title: 'use of distancing',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"viewof countermeasuresUse = slider({\n min: 0,\n max: 1,\n value: .3,\n title: 'use of countermeasures',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"countermeasuresEffect = .5","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"circleSpacing = circleR / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"variance = .25 * circleR","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"strokeWidth = circleR / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":857,"value":"outerRings = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"ringStart = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"ringCount = Math.floor(size / (2 * (circleR + circleSpacing))) - ringStart","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"size = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"chartSize = Math.floor(size / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"chartMargin = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"spacing = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require('d3@5', 'd3-delaunay@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"import {color, slider} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"_ = require('lodash@4')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}