2d:null 2e:["$","title",null,{"children":"Untitled | dnlprocess | Observable"}] 33:Tb04,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); let div = html`

Network with search

`; div.append(searchf); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") const link = g.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width",d => 10*(d.value**8)); const globalNode = g.append("g") .attr("stroke", "#fff") .attr("stroke-width", 0.75); const node = globalNode //const node = g.append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => 3 + Math.sqrt(d.popularity)*0.9) .attr("fill", color) .call(drag(simulation)); let zoomLvl = 1; let lastK = 0; node.append("title") .text(d => d.id); const textElements = g.append('g') .selectAll('text') .data(nodes) .enter().append('text') .text(node => node.id) .attr('font-size', 10) .attr("font-family", "Nunito") .attr("fill", "#555") .attr('dx', 10) .attr('dy', 4) var searchNode = function(){ debugger; if (selectedNode === "none") { node.style("stroke", "white").style("stroke-width", "1"); } else { let selected = nodes.filter( d => d.id != selectedNode ); selected.style("opacity", "0"); link.style("opacity", "0"); d3.selectAll(".node, .link").transition() .duration(5000) .style("opacity", 1); } }; simulation.on("tick", () => { 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); textElements .attr("x", d => d.x) .attr("y", d => d.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 80]) .on("zoom", zoomed)); function zoomed() { let e = d3.event if(e.transform.k > 2 && lastK != e.transform.k){ lastK = e.transform.k; console.log("zoomed"); zoomLvl = Math.log2(e.transform.k); g.append("g").attr("stroke-width", 1.5/zoomLvl ); link.attr("stroke-width", d => Math.sqrt(d.value)/(zoomLvl)); } g.attr("transform", e.transform); } return svg.node(); div.appendChild(svg.node()); return div; }34:T465,function autoSelect(config = {}) { let { value, title, description, autocomplete = "off", placeholder, size, options, list = "options" } = config; if (Array.isArray(config)) options = config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, action: fm => { fm.value = fm.input.value = value || ""; fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); fm.value = fm.input.value; if (optionsSet.has(fm.input.value)) fm.dispatchEvent(new CustomEvent("input")); }; }, form: html` ` }); form.output.remove(); return form; }35:[{"id":"42778158d75c138f3a892c00654b557b51515cae3a24ffc0f87703ae11f53d56765577a55e6d3fff27319e219e18618459f1fd1a233a16581d493603d4374c24","href":"https://static.observableusercontent.com/files/42778158d75c138f3a892c00654b557b51515cae3a24ffc0f87703ae11f53d56765577a55e6d3fff27319e219e18618459f1fd1a233a16581d493603d4374c24","name":"halakhachart@1.json","type":"application/json","lastModified":1597438410454.267,"size":54518}] 31:{"id":"4c8e0dcc438bf018","slug":"untitled","title":"","thumbnail":"cafe21e144e640d76e574b8e771061460d5864d714422bb289a4c4c8d1c395b9","access_level":"public","create_time":"$D2020-08-12T19:41:33.798Z","update_time":"$D2021-02-11T21:07:16.772Z","view_time":null,"first_public_time":"$D2020-08-21T15:06:49.475Z","has_unpublished_edits":null,"fork":{"id":"5739efca3ccc7f2e","slug":"force-directed-graph-with-zoom-and-stroke-scaling-svg","title":"Force-Directed Graph with zoom and stroke scaling (svg)","owner":{"id":"5fe82c555943a562","login":"scax","name":"Scax"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6202158818be875d","login":"dnlprocess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/532ba35a29d79ff66d6b2737dc89adf584402e52d58414ea05f45e6a5b280e78","tier":"starter_2024"},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2d5c38ecfe950a8","login":"dnlprocess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/532ba35a29d79ff66d6b2737dc89adf584402e52d58414ea05f45e6a5b280e78","tier":null}],"members":[{"type":"individual","id":"a2d5c38ecfe950a8","login":"dnlprocess","name":"","avatar_url":"https://avatars-next.observableusercontent.com/532ba35a29d79ff66d6b2737dc89adf584402e52d58414ea05f45e6a5b280e78","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"searchf = html`

${viewof selectedNode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof selectedNode = autoSelect({\n options: data.nodes.map(d => d.id),\n placeholder: \"Search a name . . .\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"import {input} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"halakhachart@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"width = 1100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"