2d:null 2e:["$","title",null,{"children":"S for search force directed graph | Malik Koné | Observable"}] 33:T637,chart = { let div = html`

Network with search

`; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) // by default all nodes are repulsing each other .force("center", d3.forceCenter(width /2, height / 2)); // Keeps the nodes center mass in the center let svg = d3.create("svg") .attr("viewBox", [0,0, width, height]) .attr('id', 'svg'); // draw the links const glinks = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr('class', '.line') .attr("stroke-width", d => Math.sqrt(d.value)); // draw the nodes const gnodes = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr('class', '.node') .attr("r", 5) .attr("fill", color) .call(drag(simulation)); //debugger; // add the name of the node on mouseover gnodes.append("title") .text(d => d.id); // define how to move links and nodes on each simulation tick simulation.on("tick", () => { glinks .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); gnodes .attr("cx", d => d.x) .attr("cy", d => d.y); }); div.appendChild(svg.node()); let searchf = html`

${viewof selectedNode}`, sbutton = html``; sbutton.onclick = () => div.append(searchf); 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:[] 31:{"id":"b3bec317d96bbf0c","slug":"s-for-search-force-directed-graph","title":"S for search force directed graph","thumbnail":"34a9d64359776852f433a568f88234db99d8c374a97e73464d9cc9b218895f8b","access_level":"public","create_time":"$D2019-07-07T11:18:05.246Z","update_time":"$D2021-09-23T08:08:29.086Z","view_time":null,"first_public_time":"$D2019-07-07T18:43:24.874Z","has_unpublished_edits":null,"fork":{"id":"318501fd26857b88","slug":"force-directed-graph-a-to-z","title":"Enhancing a force directed graph","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":4,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":1652,"publish_version":1652,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"2bb334656104620f","slug":"networks","title":"Networks","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"S for search force directed graph","cells":[{"id":1,"value":"md`# S for search force directed graph\nFrom http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/\nother features in https://observablehq.com/@maliky/force-directed-graph-a-to-z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"md`Note: Something is broken in the search form`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"md`### helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"md`#### views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"viewof selectedNode = autoSelect({\n options: 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":1428,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"nodes = data.nodes.map(d => Object.create(d));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"links = {\n let links = data.links.map(createO);\n function createO(d){\n let o = Object.create(d);\n //debugger;\n return o;\n }\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`### For display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 400","pinned":false,"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":false,"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}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"