2d:null 2e:["$","title",null,{"children":"Randomly generated timeseries network | Maeve Kane | Observable"}] 33:T527,slider = { let slider = html` Date: ${formatTime( timeScale.invert(numberOfMonths) )} `; let label = slider.querySelector('label'); let range = slider.querySelector('input'); range.value = numberOfMonths; range.oninput = () => { let threshold = range.valueAsNumber; label.innerHTML = `Date: ${formatTime(timeScale.invert(threshold))}`; var c_value = formatMonth(timeScale.invert(threshold)); var centrality_value = centrality + c_value; var date_compare = formatMonthDay(timeScale.invert(threshold)); var centralitySize = d3 .scaleLinear() .domain([ d3.min(json.nodes, function(d) { return d[centrality_value]; }), d3.max(json.nodes, function(d) { return d[centrality_value]; }) ]) .range([nodeMin, nodeMax]); d3.selectAll(".node") .attr("r", d => centralitySize(d[centrality_value])) .transition() .duration(300); let newLinks = json.links.filter( l => parseTime(l.date) <= parseTime(date_compare) ); chart.update(json.nodes, newLinks); }; return slider; }34:Tf36,chart = { const links = json.links.map((d) => Object.create(d)); const nodes = json.nodes.map((d) => Object.create(d)); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "white") .on("click", function () { d3.selectAll(".link").style("opacity", "1"); d3.selectAll(".node").style("opacity", "1"); }); var container = svg.append("g"); svg.call(zoom(container)); var link = container.append("g").attr("class", "links").selectAll("line"); var node = container.append("g").attr("class", "nodes").selectAll("circle"); // Make object of all neighboring nodes. let toggle = 0; var linkedByIndex = {}; // keep the clicked node in linkedByIndex for (let i = 0; i < nodes.length; i++) { linkedByIndex[i + "," + i] = 1; } // Get the neighboring nodes and put them in linkedByIndex json.links.forEach(function (d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; linkedByIndex[d.target.index + "," + d.source.index] = 1; }); // A function to test if two nodes are neighboring. function neighboring(a, b) { return linkedByIndex[a.index + "," + b.index]; } function connectedNodes() { if (toggle == 0) { let d = d3.select(this).node().__data__; var neighbors = []; node.style("opacity", function (o) { neighboring(d, o) || neighboring(o, d) ? neighbors.push(o.id) : null; return neighboring(d, o) || neighboring(o, d) ? 1 : 0.15; }); link.style("opacity", function (o) { return o.target == d || o.source == d ? 1 : 0.15; }); var contents = []; neighbors.forEach(function (item) { contents.push("

" + item + "

"); }); console.log(contents); return tooltip.html( // style the contents of your tooltip here. This will replace the hover tooltip contents in tooltip below "

" + d.id + "

" + contents.join("") + "" ); toggle = 1; } else { link.style("opacity", 1); node.style("opacity", 1); toggle = 0; } } return Object.assign(svg.node(), { update(nodes, links) { console.log(nodes.length); link = link.data(links, function (d) { return d.source.index + ", " + d.target.index; }); link.exit().remove(); var linkEnter = link .enter() .append("line") .attr("class", "link") .attr("stroke", "gray"); link = linkEnter.merge(link); node = node.data(nodes); node.exit().remove(); var c_value = formatMonth(timemax); // console.log(c_value); var centrality_value = centrality + c_value; var nodeEnter = node .enter() .append("circle") .attr("r", function (d, i) { return degreeSize(d[centrality_value]); }) .attr("fill", color) .attr("class", "node") .on("mouseover", (event, d) => tooltip_in(event, d)) .on("mouseout", tooltip_out) .on("click", connectedNodes) .call(drag(simulation)); node = nodeEnter.merge(node); simulation.nodes(nodes).on("tick", ticked); simulation.force("link").links(links); simulation.alpha(1).restart(); function ticked() { link .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", function (d) { return d.target.y; }); node .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }); } } }); }35:[{"id":"969c277984ec965778cc66d4584f261e55f44b5f32e6330215cfaf62a57479fdea2e2895bf21405587266a115742f985dca8a1b79a26403c47aa0b6e51b41bff","href":"https://static.observableusercontent.com/files/969c277984ec965778cc66d4584f261e55f44b5f32e6330215cfaf62a57479fdea2e2895bf21405587266a115742f985dca8a1b79a26403c47aa0b6e51b41bff","name":"random (4).json","type":"application/json","lastModified":1620089407225.529,"size":66624}] 31:{"id":"83c0a6d055fd38e7","slug":"randomly-generated-timeseries-network","title":"Randomly generated timeseries network","thumbnail":"32b8ebd5d84508af77b88d63311b81a629add2c91f7a93a2f0934674d8e669e3","access_level":"public","create_time":"$D2021-05-03T16:59:54.826Z","update_time":"$D2022-07-18T22:18:10.290Z","view_time":null,"first_public_time":"$D2021-05-03T23:07:39.871Z","has_unpublished_edits":null,"fork":{"id":"46101492e9a1e91f","slug":"debtors-network-with-zoom-connected-nodes-on-click-and-tool","title":"Debtors, network with zoom, connected nodes on click and tooltip","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"stars":1,"starred":false,"owner":{"type":"team","id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":"starter_2024"},"version":377,"publish_version":377,"role":null,"authored":false,"authors":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null}],"members":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"e958648df2406e1f","slug":"network-examples","title":"Network examples","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"type":"notebook","body":{"title":"Randomly generated timeseries network","cells":[{"id":0,"value":"md`# Randomly generated timeseries network\n\nBased on JR Ladd's [Marvel network example](https://observablehq.com/@jrladd/marvel-network), rewritten for d3v6.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`## Define timescale utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"formatTime = d3.timeFormat(\"%B %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"formatMonth = d3.timeFormat(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"formatMonthDay = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"timemin = d3.min(json.links.map(d => parseTime(d.date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"timemax = parseTime(\"2010-10-01\")\n// d3.max(json.links.map(d => parseTime(d.date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"centrality = \"degree_\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"timeScale = d3.scaleTime()\n .domain([timemin, timemax])\n\t.range([0, numberOfMonths])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"numberOfMonths = d3.timeMonth.count(timemin, timemax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`## Define tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\") \n .style(\"visibility\", \"hidden\") \n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"tooltip_in = function(event, d) { \n return tooltip\n .html(\"

\" + d.id + \"

\")\n .style(\"visibility\", \"visible\") \n .style(\"top\", event.pageY + \"px\")\n .style(\"left\", event.pageX + \"px\"); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tooltip_out = function() {\n return tooltip\n .transition()\n .duration(50) \n .style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"\nhtml`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## Size, color, and height utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"nodeMin = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"nodeMax = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"degreeSize = d3\n .scaleLinear()\n .domain([\n d3.min(json.nodes, function(d) {\n return d[\"degree_\" + formatMonth(timemax)];\n }),\n d3.max(json.nodes, function(d) {\n return d[\"degree_\" + formatMonth(timemax)];\n })\n ])\n .range([nodeMin, nodeMax])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"color = {\n const scale = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, 12));\n return d => scale(d.modularity);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Define drag, zoom, and network forces`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"zoom = container => {\n function zoomed(event, d) {\n container.attr(\"transform\", \"translate(\" + event.transform.x + \", \" + event.transform.y + \") scale(\" + event.transform.k + \")\");\n }\n \n return d3.zoom().on('zoom', zoomed)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"simulation = d3\n .forceSimulation()\n .force(\n \"link\",\n d3.forceLink().id(function(d) {\n return d.id;\n })\n )\n .force(\n \"charge\",\n d3\n .forceManyBody()\n .strength([-250])\n .distanceMax([500])\n )\n .force(\"center\", d3.forceCenter(width / 2, height / 2))\n .force(\n \"collide\",\n d3.forceCollide().radius(function(d) {\n return degreeSize(d[\"degree_\" + formatMonth(timemax)]);\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Get the data and draw the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"json = FileAttachment(\"random (4).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"chart.update(json.nodes,json.links)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"