2e:null 2f:["$","title",null,{"children":"Covid-19 | neatlogic | Observable"}] 34:T813,canvas_net = { const newly_infected = last(infection_info.history).new_infections; const canvas = DOM.canvas(width * 2, height * 2); const context = canvas.getContext("2d"); // Make canvas look good on high res screens canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; context.scale(2, 2); // Clear previous content context.clearRect(0, 0, width, height); // Draw edges edges.forEach(({ source, target }) => { context.beginPath(); context.strokeStyle = color_edge(source, target); context.moveTo(source.x, source.y); context.lineTo(target.x, target.y); context.stroke(); }); // Draw nodes nodes.forEach(node => { context.beginPath(); let radius = node.radius; let border_width = 1; if (node.all_neighbors_infected) { context.fillStyle = colors.inactive; context.strokeStyle = "white"; } else if (newly_infected.includes(node.id)) { context.fillStyle = colors.newly_infected; context.strokeStyle = colors.newly_infected; border_width *= 2; radius *= 1.5; } else if (node.infected) { context.fillStyle = colors.infected; context.strokeStyle = colors.infected; } else { context.fillStyle = colors.healthy; context.strokeStyle = "white"; } context.lineWidth = border_width; context.moveTo(node.x + radius, node.y); context.arc(node.x, node.y, radius, 0, 2 * Math.PI); context.fill(); context.stroke(); }); d3.select(canvas).on("click", function() { const node = node_quadtree.find(...d3.mouse(this)); node.infected = !node.infected; mutable initial_infections = node.infected ? insert_el(initial_infections, node.id) : remove_el(initial_infections, node.id); }); function color_edge(source, target) { return target.infected && source.infected ? colors.inactive_edge : (target.infected && !source.infected) || (source.infected && !target.infected) ? colors.danger_edge : colors.safe_edge; } return canvas; }35:T8fe,infection_info = { // This is the actual simulation let time = 0; const hist = [ { total_infections: initial_infections.length, new_infections: initial_infections, n_new: initial_infections.length, potential_infectors: initial_infections.length, time: time++ } ]; // Reset all nodes before starting nodes.forEach(node => { node.infected = false; node.all_neighbors_infected = false; }); yield { ids: initial_infections, history: hist }; // const potential_infectors = new Set(nodes.map(d => d.id)); const potential_infectors = new Set(initial_infections); const infections = new Set(initial_infections); while (potential_infectors.size > 0) { const to_remove_from_infectors = []; const new_infections = new Set(); potential_infectors.forEach(node_id => { const node = nodes[node_id]; node.t0 = node.t0 || 1; let num_neighbors_infected = 0; node.neighbors.forEach(neighbor => { if (neighbor.infected) { num_neighbors_infected += 1; } else if ( time <= node.t0 + params.contagious_period && Math.random() < params.prob_of_infect ) { new_infections.add(neighbor.id); } }); node.all_neighbors_infected = num_neighbors_infected == node.neighbors.length; if ( node.all_neighbors_infected || time > node.t0 + params.contagious_period ) { to_remove_from_infectors.push(node.id); } }); // Run through newly infected nodes and set to infected new_infections.forEach(node_id => { nodes[node_id].infected = true; nodes[node_id].t0 = time; infections.add(node_id); potential_infectors.add(node_id); }); // Remove nodes who have all neighbors infected from potential infectors to_remove_from_infectors.forEach(node_id => { potential_infectors.delete(node_id); }); // Update state history hist.push({ total_infections: infections.size, new_infections: [...new_infections], n_new: new_infections.size, potential_infectors: potential_infectors.size, time: time++ }); yield Promises.tick(sim_speed, { ids: [...infections], history: hist }); } }36:T540,raw_data = { // Generates the network data new_data; const nodes = d3 .range(params.num_nodes) .map(i => ({ id: i, x: Math.random() * w + margins.left, y: Math.random() * h + margins.top, infected: false, time_since_infection: 0, neighbors: [], all_neighbors_infected: false })); let edges = []; const num_friends = Math.max(gen_pois(params.avg_num_friends), 1); nodes.forEach(node => { // Assemble an array of the n_closest nodes to this node nodes .map(neighbor => { const distance = dist(node, neighbor); return { dist: distance, inv_dist: 1 / distance, node: neighbor }; }) .sort((a, b) => a.dist - b.dist) .slice(1, num_friends + 1) .forEach(neighbor => { if (neighbor.dist < largest_allowed_sep) { edges.push({ source: node, target: neighbor.node }); } }); }); // Loop through all the edges to connect nodes to eachother edges.forEach(({ source, target }) => { insert_el(source.neighbors, target); insert_el(target.neighbors, source); }); const Radius = d3 .scaleSqrt() .domain(d3.extent(nodes, n => n.neighbors.length)) .range([1, largest_node_r]); nodes.forEach(n => { n.radius = Radius(n.neighbors.length); }); return { nodes, edges }; }37:Tafc,html``38:[] 32:{"id":"9a1e49edd4236fdb","slug":"covid-19","title":"Covid-19","thumbnail":"9957574b6300c86fd8da7494d9a4e129a6c0d2948267358ff17b12b859e289f5","access_level":"public","create_time":"$D2020-03-26T10:20:37.111Z","update_time":"$D2020-03-26T11:39:19.488Z","view_time":null,"first_public_time":"$D2020-03-26T11:39:23.494Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"6d67dfd94a24d24a","login":"neatlogic","name":"neatlogic","avatar_url":"https://avatars-next.observableusercontent.com/50f13db5274436ca7d925fcc80a9277c2df95a71be050333063d2f7c45bc76ec","tier":"starter_2024"},"version":132,"publish_version":132,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b6304a2a7245cc9","login":"neatlogic","name":"neatlogic","avatar_url":"https://avatars-next.observableusercontent.com/50f13db5274436ca7d925fcc80a9277c2df95a71be050333063d2f7c45bc76ec","tier":null}],"members":[{"type":"individual","id":"4b6304a2a7245cc9","login":"neatlogic","name":"neatlogic","avatar_url":"https://avatars-next.observableusercontent.com/50f13db5274436ca7d925fcc80a9277c2df95a71be050333063d2f7c45bc76ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Covid-19","cells":[{"id":0,"value":"md`# Covid-19`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"nodes = raw_data.nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"edges = raw_data.edges","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mutable initial_infections = {\n reset;\n nodes.forEach(n => (n.infected = false));\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function debounce(input, delay = 1000) {\n return Generators.observe(notify => {\n let timer = null;\n let value;\n\n // On input, check if we recently reported a value.\n // If we did, do nothing and wait for a delay;\n // otherwise, report the current value and set a timeout.\n function inputted() {\n if (timer !== null) return;\n notify((value = input.value));\n timer = setTimeout(delayed, delay);\n }\n\n // After a delay, check if the last-reported value is the current value.\n // If it’s not, report the new value.\n function delayed() {\n timer = null;\n if (value === input.value) return;\n notify((value = input.value));\n }\n\n input.addEventListener(\"input\", inputted), inputted();\n return () => input.removeEventListener(\"input\", inputted);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"function last(arr) {\n return arr[arr.length - 1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"defaults = ({\n num_nodes: 1200,\n avg_num_friends: 10,\n prob_of_infect: 0.25,\n sim_speed: 100,\n contagious_period: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function change_brightness(color, k = 1) {\n const { l, c, h } = d3.lch(color);\n return d3.lch(l + 18 * k, c, h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"colors = {\n const infected = \"#e41a1c\";\n const healthy = \"#377eb8\";\n const safe_edge = \"#d9d9d9\";\n const interactive = \"#2690ce\";\n const inactive = change_brightness(infected, -1);\n const newly_infected = change_brightness(infected, 1);\n const danger_edge = d3.interpolateHslLong(safe_edge, infected)(0.5);\n const inactive_edge = d3.interpolateHslLong(safe_edge, inactive)(0.1);\n\n return {\n infected,\n inactive,\n newly_infected,\n healthy,\n safe_edge,\n inactive_edge,\n danger_edge,\n interactive\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mutable params = defaults","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function dist(node_a, node_b) {\n return Math.sqrt(\n Math.pow(node_a.x - node_b.x, 2) + Math.pow(node_a.y - node_b.y, 2)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"node_quadtree = d3\n .quadtree()\n .extent([[0, 0], [width, height]])\n .x(d => d.x)\n .y(d => d.y)\n .addAll(nodes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function gen_pois(lambda, max_its = 1000) {\n let i = -1,\n cum_sum = 0;\n while (cum_sum < 1 && i < max_its) {\n i++;\n cum_sum += -Math.log(1 - Math.random()) / lambda; // Or use gen_expon()\n }\n return i;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"max_rel_distance = 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"largest_node_r = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"largest_allowed_sep = {\n const largest_possible_sep = Math.sqrt(\n Math.pow(width, 2) + Math.pow(height, 2)\n );\n return max_rel_distance * largest_possible_sep;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function insert_el(arr, el) {\n if (!arr.includes(el)) {\n arr.push(el);\n }\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margins = ({ left: 20, right: 20, top: 10, bottom: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"h = height - margins.top - margins.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"w = width - margins.left - margins.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof new_data = new View(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof reset = new View(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function remove_el(arr, el) {\n return arr.filter(d => d != el);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function legend_circ(color, radius = 9) {\n return d3\n .select(DOM.svg(2 * radius, 2 * radius))\n .call(svg =>\n svg\n .append(\"circle\")\n .attr(\"cx\", radius)\n .attr(\"cy\", radius)\n .attr(\"r\", radius)\n .attr(\"fill\", color)\n )\n .node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function inline_slider({\n min = 0,\n max = 1,\n start = 0.5,\n step = 0.1,\n precision = 3,\n int = false\n}) {\n min = min / step;\n max = max / step;\n start = start / step;\n\n const div = html`\n \n ${start *\n step}\n `;\n const range = div.querySelector(\"[type=range]\");\n const value_disp = div.querySelector('span');\n div.value = value_disp.innerHTML = start * step;\n\n range.addEventListener(\"input\", () => {\n const newValue = range.valueAsNumber * step;\n div.value = newValue;\n value_disp.innerHTML = int\n ? Math.round(newValue)\n : newValue.toPrecision(precision);\n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"function button(text) {\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof sim_speed = new View(defaults.sim_speed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof contagious_period = new View(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof num_nodes = new View(defaults.num_nodes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof avg_num_friends = new View(defaults.avg_num_friends)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof prob_of_infect = new View(defaults.prob_of_infect)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"