31:T53d,staticnetwork = { const links = edges.map(d => Object.create(d)); const nodes = vertices.map(d => Object.create(d)); const width = 900; const height = 600; const strokeWeight = 120.0; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).strength(0.002)) .force("charge", d3.forceManyBody().strength([-200])) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collide", d3.forceCollide()) .on("tick", ticked); const svg = d3.select(DOM.svg(width, height)); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => d.duration/strokeWeight); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", 5) .attr("fill", color); node.append("title") .text(d => d.id); function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } return svg.node(); }32:T7cf,temporalnetwork = { const width = 900; const height = 600; const strokeWeight = 120.0; let el = this; if (!el) { // Create el = DOM.svg(width, height); el.alllinks = edges.map(d => Object.create(d)); el.nodes = vertices.map(d => Object.create(d)); var links = el.alllinks.filter(function(link){return link.hour==hour}); el.simulation = d3.forceSimulation(el.nodes) .force("link", d3.forceLink(links).id(d => d.id).strength(0.01)) .force("charge", d3.forceManyBody().strength([-50])) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collide", d3.forceCollide()) .on("tick", ticked); const svg = d3.select(el); el.link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => d.duration/strokeWeight); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(el.nodes) .enter().append("circle") .attr("r", 5) .attr("fill", color); node.append("title") .text(d => d.id); function ticked() { el.link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } } else { // Update var links = el.alllinks.filter(function(link){return link.hour==hour}); el.link = el.link.data(links, function(d) { return d.source.id + "-" + d.target.id; }); el.link.exit().remove(); el.link = el.link.enter().append("line").attr("stroke-width", d => d.duration/strokeWeight).merge(el.link); el.simulation.force("link").links(links); el.simulation.alpha(1).restart(); } return el; }33:T57f,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = value; form.value = value; if (verb != "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (!submit) form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }34:[] 2f:{"title":"Visualisation of contact networks","cells":[{"id":0,"value":"md`\n# Visualisation of contact networks\n\nThese data come from a household study in rural coastal Kenya by [Kiti et al.](https://epjdatascience.springeropen.com/articles/10.1140/epjds/s13688-016-0084-2), which employed proximity sensors to measure the duration of contacts within and between households. The data were downloaded from [here](http://www.sociopatterns.org/datasets/kenyan-households-contact-network/).\n\n## Downloading the data\n\nI set up a gist that contained within-household data for a single household (E) for a single day.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"vertices = d3.csv(\"https://gist.githubusercontent.com/sdwfrost/a12e1cfba137f1af8be09cc5df2d2b9d/raw/f78ce328f434662ba2c1ad8f093f1e92b781ec7e/nodes.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"edges = d3.csv(\"https://gist.githubusercontent.com/sdwfrost/a12e1cfba137f1af8be09cc5df2d2b9d/raw/f78ce328f434662ba2c1ad8f093f1e92b781ec7e/edges.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`\n## Aggregated network\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.age);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`\n## Temporal network\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof hour = slider({\n min: 7, \n max: 20, \n step: 1, \n value: 7, \n title: \"Hour\", \n description: \"Hour\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof play = button(\"Play / Pause\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"playloop = {\n play;\n if (!this) {\n \tvar h = 7;\n \tfor (var h = 7; h <= 20; h++) {\n yield h;\n \t viewof hour.input.value = h;\n \t viewof hour.dispatchEvent(new CustomEvent(\"input\"));\n \t await Promises.delay(2000);\n \t}\n }\n yield false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n## Dependencies\n\n- \\`d3\\`\n- \\`slider\\`, \\`input\\`, and \\`button\\` from [https://beta.observablehq.com/@jashkenas/inputs](https://beta.observablehq.com/@jashkenas/inputs)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n return input({\n type: \"range\", title, description, submit,\n attributes: {min, max, step, value},\n getValue: input => Math.round(input.valueAsNumber * precision) / precision\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"function button(config = {}) {\n let {value, title, description, disabled} = config;\n if (typeof config == \"string\") value = config;\n if (!value) value = \"Ok\";\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value}\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}