30:T737,{ const wrapper = d3.create("div"); wrapper.append("style").html(style); const table = wrapper.append("div").attr("class", "table"); table.append("div").attr("class", "title").text("Count"); const rows = table .selectAll(".row") .data(["Healthy", "Sick", "Immune"]) .enter() .append("div") .attr("class", (d) => `row ${d.toLowerCase()}`); const chart = wrapper.append("div").attr("class", "chart"); chart.append("div").attr("class", "title").text("Change over time"); const margin = { left: 0, right: 0, top: 0, bottom: 0 }; const w = width - 130 - margin.left - margin.right; const h = 70 - margin.top - margin.bottom; const svg = chart .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); const x = d3.scaleLinear().domain([0, totalTicks]).range([0, w]); const y = d3 .scaleLinear() .domain([0, simulation.people.length]) .range([h, 0]); const area = d3 .area() .x((d) => x(d.data.tick)) .y0((d) => y(d[0])) .y1((d) => y(d[1])); g.append("rect") .attr("class", "background") .attr("width", w) .attr("height", h); while (simulation.ticks <= totalTicks) { const datum = simulation.state[simulation.state.length - 1]; if (datum) { rows.html( (d) => `

${d}

${ datum[d.toLowerCase()] }

` ); const series = stack(simulation.state); const areas = g.selectAll(".area").data(series); areas .enter() .append("path") .attr("class", (d) => `area ${d.key}`) .merge(areas) .attr("d", area); } yield wrapper.node(); } }31:T1b00,// Our simulator class class Simulitis { constructor(options) { this.width = options && options.width ? options.width : width; this.height = options && options.height ? options.height : 500; this.people = []; // these are all the people in the simulation this.state = []; this.ticks = 0; // track how many ticks have passed in the simulation this.sicknessTicks = options && options.sicknessTicks ? options.sicknessTicks : 500; // how long someone stays sick before becoming immune this.tree = new SimulitisBush(); return this; // enables method chaining (doing one thing, then the next...) } // Add a new person to the simulation add(person) { const radius = person.radius || 5; // Object.assign allows you to have some defaults that you can overwrite this.people.push( Object.assign( { radius, position: [ d3.randomUniform(radius, this.width - radius)(), d3.randomUniform(radius, this.height - radius)() ], speed: speed, angle: d3.randomUniform(0, 360)(), state: "healthy" // people are healthy by default }, person ) ); return this; // again, allows method chaining } // A convenience function to iterate through the people in the simulation each(fn) { for (let i = 0, l = this.people.length; i < l; i++) { fn(this.people[i], i, this.people); } return this; } // Compare a person to the people around them compare(person, personIndex, fn) { const diameter = person.radius * 2; const candidates = this.tree.search({ minX: person.position[0] - diameter, minY: person.position[1] - diameter, maxX: person.position[0] + diameter, maxY: person.position[1] + diameter }); for (let i = 0, l = candidates.length; i < l; i++) { fn(person, personIndex, candidates[i], i); } return this; } // Whenever time progesses ("ticks" forwards) tick() { this.tree.clear(); this.tree.load(this.people); let healthy = 0; let sick = 0; let immune = 0; // Update the position for each person (based on their angle and speed) this.each((person, personIndex) => { person.hasCollided = false; // Make them immune after a certain amount of ticks () if ( person.state === "sick" && this.ticks - person.sickTick > this.sicknessTicks ) { person.state = "immune"; } const [x, y] = person.position; // more destructuring! // Let's compare the distance between the centers (for every pair of circles?) // If they intersect, let's flip their angles and speeds (not physically accurate, but looks good) this.compare( person, personIndex, (person, personIndex, target, targetIndex) => { // Don't compare each dot to itself if ( personIndex !== targetIndex && !person.hasCollided && !target.hasCollided ) { const distance = geometric.lineLength([ person.position, target.position ]); const radii = person.radius + target.radius; // If they are overlapping, flip their angles and speeds if (distance <= radii) { // Where the person and target *would* go (and the distance between them) const personPosition = geometric.pointTranslate( person.position, person.angle, person.speed ); const targetPosition = geometric.pointTranslate( target.position, target.angle, target.speed ); const newDistance = geometric.lineLength([ personPosition, targetPosition ]); // Measure the swap distance (check what would happen before we do it to avoid sticking) const personPositionSwapped = geometric.pointTranslate( person.position, target.angle, target.speed ); const targetPositionSwapped = geometric.pointTranslate( target.position, person.angle, person.speed ); const swappedDistance = geometric.lineLength([ personPositionSwapped, targetPositionSwapped ]); // If the distance after the swap is greater, swap them! if (swappedDistance > newDistance) { person.hasCollided = true; target.hasCollided = true; // Swap them 🤯 [person.angle, target.angle] = [target.angle, person.angle]; [person.speed, target.speed] = [target.speed, person.speed]; // Make the healthy person sick if (person.state === "sick" && target.state === "healthy") { target.state = "sick"; target.sickTick = this.ticks; // track when they got sick } else if ( target.state === "sick" && person.state === "healthy" ) { person.state = "sick"; person.sickTick = this.ticks; // track when they got sick } } } } } ); // Let's keep everyone in the box // If they try to escape from the sides, flip the angle (horizontally) if (x <= person.radius || x >= this.width - person.radius) { person.angle = geometric.angleReflect(person.angle, 90); // turn them around! } // If they go above or below the box, flip the angle vertically if (y <= person.radius || y >= this.height - person.radius) { person.angle = geometric.angleReflect(person.angle, 0); } person.position = geometric.pointTranslate( person.position, person.angle, person.speed ); // Update the count if (person.state === "healthy") healthy++; if (person.state === "sick") sick++; if (person.state === "immune") immune++; }); // If the state has changed, add a new item to the state array const stateLength = this.state.length; const statePrev = stateLength > 1 ? this.state[stateLength - 1] : { healthy: null, sick: null, immune: null }; if ( statePrev.healthy === healthy && statePrev.sick === sick && statePrev.immune === immune ) { this.state[stateLength - 1].tick = this.ticks; } else { this.state.push({ tick: this.ticks, healthy, sick, immune }); } this.ticks++; // move time forwards return this; } }32:[] 2e:{"title":"Simulitis","cells":[{"id":0,"value":"md`# Simulitis\n\nAs seen in [The Washington Post](https://www.washingtonpost.com/graphics/2020/world/corona-simulator/). If you want to use this simulation, you can import it into another notebook:\n~~~js\nimport { Simulitis } from \"@ambassadors/simulitis\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof restart = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// Create a visual representation of the simulation\n{\n const canvas = DOM.canvas(simulation.width, simulation.height);\n canvas.style.border = \"1px solid black\";\n const context = canvas.getContext(\"2d\");\n\n // Keep ticking until we've reached the totalTicks number\n while (simulation.ticks <= totalTicks) {\n context.clearRect(0, 0, simulation.width, simulation.height); // clear it out everytime\n\n // Iterate through the people of the simulation to draw them\n simulation\n .each(person => {\n context.fillStyle = colors[person.state];\n context.beginPath();\n context.arc(...person.position, person.radius, 0, Math.PI * 2);\n context.fill();\n })\n .tick(); // Method chaining!\n\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof speed = Inputs.range([1, 100], {\n step: 1,\n label: \"Speed\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof num_people = Inputs.range([10, 1000], {\n step: 1,\n label: \"Number of people\",\n value: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof totalTicks = Inputs.range([500, 5000], {\n value: 2000,\n step: 1,\n label: \"How long a simulation runs\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof sicknessTicks = Inputs.range([100, 1000], {\n value: 500,\n step: 1,\n label: \"How long a person stays sick\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// Create an instance of the simulation\nsimulation = {\n restart;\n const simulation = new Simulitis({\n sicknessTicks\n });\n\n // Let's add people to the simulation\n for (let i = 0; i < num_people; i++) {\n simulation.add({\n radius: 5, // radius defaults to 5\n state: i === 0 ? \"sick\" : \"healthy\", // Make the first person sick -- everyone else healthy\n sickTick: i === 0 ? 1 : null // keep track of when each person becomes sick,\n });\n }\n\n return simulation;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"style = `\n.title {\n font-weight: bold;\n margin-bottom: 4px;\n}\n.table, .chart {\n display: inline-block;\n font-family: sans-serif;\n vertical-align: bottom;\n}\n.table {\n margin-right: 20px;\n}\n.table .row .key, .table .row .value {\n border-bottom: 1px solid #eee;\n display: inline-block;\n}\n.table .row .key {\n width: 80px;\n}\n.table .row .value {\n text-align: right;\n width: 30px;\n}\n.table .row:last-of-type .key, .table .row:last-of-type .value {\n border-bottom: none;\n}\n.table .row.healthy .value {\n color: ${d3.color(colors.healthy).darker()}\n}\n.table .row.sick .value {\n color: ${colors.sick}\n}\n.table .row.immune .value {\n color: ${d3.color(colors.immune).darker()}\n}\n\n.chart .background {\n fill: #f5f5f5;\n}\n.chart .area.healthy {\n fill: ${colors.healthy};\n}\n.chart .area.sick {\n fill: ${colors.sick};\n}\n.chart .area.immune {\n fill: ${colors.immune};\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"colors = ({\n sick: \"#e31a1c\",\n healthy: \"#b2df8a\",\n immune: d3.color(\"#a6cee3\").darker(0.2)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"stack = d3.stack().keys(Object.keys(colors))","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"// Quickly showing d3.randomUniform: returns a *function* that generates the number\nd3.randomUniform(0, 100)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"// A quick example of desctructuring\n{\n const a = [1, 2];\n return [...a, 3];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"class SimulitisBush extends rbush {\n toBBox(person) {\n return {\n minX: person.position[0],\n minY: person.position[1],\n maxX: person.position[0],\n maxY: person.position[1]\n };\n }\n compareMinX(a, b) {\n return a.position[0] - b.position[0];\n }\n compareMinY(a, b) {\n return a.position[1] - b.position[1];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof restart2 = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"{\n restart2;\n\n const simulation = new Simulitis({\n height: 40,\n sicknessTicks: 200\n });\n\n simulation\n .add({\n state: \"sick\",\n position: [20, 20],\n angle: 0,\n radius: 10,\n speed: 3,\n sickTick: 1\n })\n .add({\n position: [width - 20, 20],\n angle: 180,\n radius: 10,\n speed: 3\n });\n\n const canvas = DOM.canvas(simulation.width, simulation.height);\n canvas.style.border = \"1px solid black\";\n const context = canvas.getContext(\"2d\");\n while (true) {\n context.clearRect(0, 0, simulation.width, simulation.height);\n\n simulation\n .each(person => {\n context.fillStyle = colors[person.state];\n context.beginPath();\n context.arc(...person.position, person.radius, 0, Math.PI * 2);\n context.fill();\n })\n .tick();\n\n yield canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"// Load in a libary from NPM\ngeometric = require(\"geometric@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"rbush = require(\"rbush@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}