25:["$","title",null,{"children":"Disjoint Force-Directed with directional links and multiple multi auto select | PersLEARN Visualization | Observable"}] 49:T81f,function multiAutoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, list = "options" } = Array.isArray(config) ? { options: config } : config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, attributes: { disabled }, action: fm => { const addSelectedOption = d => { const ele = html`${d} `; ele.querySelector("button").addEventListener("click", b => { fm.value.splice(fm.value.indexOf(d), 1); renderSelection(); fm.dispatchEvent(new CustomEvent("input")); fm.input.focus(); }); return ele; }; function renderSelection() { fm.output.innerHTML = ""; for (let o of fm.value) { fm.output.appendChild(addSelectedOption(o)); } } fm.input.value = ""; fm.value = value || []; fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); if ( optionsSet.has(fm.input.value) && fm.value.indexOf(fm.input.value) === -1 ) { fm.value.push(fm.input.value); renderSelection(); fm.dispatchEvent(new CustomEvent("input")); fm.input.value = ""; } }; renderSelection(); }, form: html` ` }); form.output.style["margin-left"] = "0px"; return form; }4a:T885,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); //console.info("hello-hello-hello-hello-hello-hello-hello-hello-hello"); //console.info(links); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-400)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "12px sans-serif"); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(types) .join("marker") .attr("id", d => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", colorLink) .attr("d", "M0,-5L10,0L0,5"); const link = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("path") .data(links) .join("path") .attr("stroke", d => colorLink(d.type)) .attr("opacity", d => fadeLink(d.source.id, d.target.id)) .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); const node = svg.append("g") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .selectAll("g") .data(nodes) .join("g") .attr("fill", d => colorNode(d.statusName)) .attr("opacity", d => fadeNode(d.owner, d.when.name)) .call(drag(simulation)); node.append("circle") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("r", 4); node.append("text") .attr("x", 8) .attr("y", "0.31em") .text(d => d.id) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); simulation.on("tick", () => { link.attr("d", linkArc); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }4b:[{"id":"0cc49a06d6df0eb1a108dc070703e77b960901256edd568a56e2a86a338c9d4746738e679ba31ec467a49b2681d2a2e546268c08d9622f223044e5854d441f97","href":"https://static.observableusercontent.com/files/0cc49a06d6df0eb1a108dc070703e77b960901256edd568a56e2a86a338c9d4746738e679ba31ec467a49b2681d2a2e546268c08d9622f223044e5854d441f97","name":"fiction_with_when@3.json","type":"application/json","lastModified":1667993852576.541,"size":6311}] 29:{"id":"8af4cbfebc3b5d24","slug":null,"title":"Disjoint Force-Directed with directional links and multiple multi auto select","thumbnail":"bef47030b97507d5adf4335300c75f1ec203b7eb851d7bef6af7dff069cc8275","access_level":"public","create_time":"$D2022-11-09T11:37:32.576Z","update_time":"$D2022-11-09T11:37:32.576Z","view_time":null,"first_public_time":"$D2022-11-09T11:37:32.576Z","has_unpublished_edits":null,"fork":{"id":"210bb248817e92f1","slug":"disjoint-force-directed-with-directional-links-and-multip","title":"Disjoint Force-Directed with directional links and multiple multi auto select","owner":{"id":"c31e7c7070dca421","login":"carpemojo","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"36483f424f742e53","login":"perslearn-visualization","name":"PersLEARN Visualization","avatar_url":"https://avatars-next.observableusercontent.com/b25d2664f92296b5cdfcd73c898dc4ba2f7e9d5b0522fe04771f808de89c0ec0","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"205405e4dd57b9eb","login":"xiwenchuan","name":"Xi Wenchuan","avatar_url":"https://avatars-next.observableusercontent.com/d6c459682e45c7dbff5d1b38a93a39310c241e77061c4a5a82c41f64062a1111","tier":null,"bio":"student majoring in Finance. interested in front-end visuallization. working in PersLEARN, Peking University.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"36483f424f742e53","login":"perslearn-visualization","name":"PersLEARN Visualization","avatar_url":"https://avatars-next.observableusercontent.com/b25d2664f92296b5cdfcd73c898dc4ba2f7e9d5b0522fe04771f808de89c0ec0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"205405e4dd57b9eb","login":"xiwenchuan","name":"Xi Wenchuan","avatar_url":"https://avatars-next.observableusercontent.com/d6c459682e45c7dbff5d1b38a93a39310c241e77061c4a5a82c41f64062a1111","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Disjoint Force-Directed with directional links and multiple multi auto select","cells":[{"id":1,"value":"md`# Disjoint Force-Directed with directional links and multiple multi auto select\n\nMultiautoselect from @john-guerra/multiAutoSelect. Attempts to include via . . .\n~~~js\nimport {multiAutoSelect} from \"@john-guerra/multiAutoSelect\"\n~~~\n. . . resulted only in . . .\n~~~js\nTypeError: error loading dynamically imported module\n~~~\n. . . for reasons unknown to me.\n\nNext, in forks of this thing, I would like to: \n\n* Ensure that use of the multiAutoSelect highlights the corresponding set of nodes and links as happens now, but without the entire chart being re-drawn from scratch and re-positioning all the nodes.\n\n* Turn the links from being one solid colour from beginning-to-end to being a gradient: pale at the start of the arrow, bright at the arrow-head end of it. Such a gradient would better indicate which end of a link is its source and which is its target. As seen in the arrows on the chart at https://observablehq.com/@mbostock/inequality-in-american-cities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`Link type:`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"swatches({color: colorLink})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`Node state:`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"swatches({color: colorNode})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof maso = multiAutoSelect({\n list: \"owners\",\n options: owners,\n placeholder: \"Select owners . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"viewof masw = multiAutoSelect({\n list: \"whens\",\n options: whens,\n placeholder: \"Select when . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"fiction_with_when@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"types = Array.from(new Set(data.links.map(d => d.type)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"statuses = Array.from(new Set(data.nodes.map(d => d.statusName)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"owners = Array.from(new Set(data.nodes.map(d => d.owner)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"whens = Array.from(new Set(data.nodes.map(d => d.when.name)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"colorLink = d3.scaleOrdinal(types, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"colorNode = d3.scaleOrdinal(statuses, d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"fadeNode = function(dOwner, dWhen) {\n let nothingSelected = maso.length == 0 && masw.length == 0;\n let ownersSelectedButNoWhens = maso.indexOf(dOwner) > -1 && masw.length == 0;\n let whenSelectedButNoOwners = masw.indexOf(dWhen) > -1 && maso.length == 0;\n let ownersAndWhensSelected = maso.indexOf(dOwner) > -1 && masw.indexOf(dWhen) > -1;\n return nothingSelected || ownersSelectedButNoWhens || whenSelectedButNoOwners || ownersAndWhensSelected ? 1 : 0.2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"fadeLink = function(dSource, dTarget) {\n let iDsOfNodesOfSelectedOwners = data.nodes.filter(n => maso.indexOf(n.owner) > -1).map(n => n.id);\n let iDsOfNodesOfSelectedWhens = data.nodes.filter(n => masw.indexOf(n.when.name) > -1).map(n => n.id);\n \n var iDsOfNodesSelected = [];\n if (maso.length > 0 && masw.length > 0) {\n iDsOfNodesSelected = iDsOfNodesOfSelectedOwners.filter(n => iDsOfNodesOfSelectedWhens.includes(n));\n } else if (maso.length > 0 && masw.length == 0) {\n iDsOfNodesSelected = iDsOfNodesOfSelectedOwners;\n } else if (maso.length == 0 && masw.length > 0) {\n iDsOfNodesSelected = iDsOfNodesOfSelectedWhens;\n }\n \n let selected = iDsOfNodesSelected.indexOf(dSource) > -1 && iDsOfNodesSelected.indexOf(dTarget) > -1;\n return selected || (maso.length == 0 && masw.length == 0) ? 1 : 0.2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function linkArc(d) {\n const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n return `\n M${d.source.x},${d.source.y}\n A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"import {input} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null