43:["$","title",null,{"children":"Hierarchical Edge Bundling - simple test | instancia paris | Observable"}] 4b:T920,chart = { const root = tree(bilink(d3.hierarchy(data) .sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name)))); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -width / 2, width, width]); const node = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .append("text") .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI ? "start" : "end") .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null) .text(d => d.data.name) .each(function(d) { d.text = this; }) .on("mouseover", overed) .on("mouseout", outed) .call(text => text.append("title").text(d => `${id(d)} -> contient ${d.outgoing.length} elements materiel -> est contenu dans ${d.incoming.length} elements materiel`)); const link = svg.append("g") .attr("stroke", colornone) .attr("fill", "none") .selectAll("path") .data(root.leaves().flatMap(leaf => leaf.outgoing)) .join("path") .style("mix-blend-mode", "multiply") .attr("d", ([i, o]) => line(i.path(o))) .each(function(d) { d.path = this; }); function overed(event, d) { link.style("mix-blend-mode", null); d3.select(this).attr("font-weight", "bold"); d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", colorin).raise(); d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", colorin).attr("font-weight", "bold"); d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", colorout).raise(); d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", colorout).attr("font-weight", "bold"); } function outed(event, d) { link.style("mix-blend-mode", "multiply"); d3.select(this).attr("font-weight", null); d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", null); d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", null).attr("font-weight", null); d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", null); d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", null).attr("font-weight", null); } return svg.node(); }4c:T4b6,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }4d:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.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 (format) format = typeof format === "function" ? format : d3format.format(format); 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(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }4e:[] 47:{"id":"f32e2cd35715c575","slug":"hierarchical-edge-bundling-simple-test","title":"Hierarchical Edge Bundling - simple test","thumbnail":"45953cfbf76d4df2248b7a4692811a8a994d0b11fb663f406ee3c7be4e610fc2","access_level":"public","create_time":"$D2021-08-27T08:47:27.509Z","update_time":"$D2021-09-18T15:01:51.453Z","view_time":null,"first_public_time":"$D2021-08-29T22:24:36.878Z","has_unpublished_edits":null,"fork":{"id":"22ac214fe83d7053","slug":"hierarchical-edge-bundling","title":"Hierarchical edge bundling","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f525e1fa7de7eeea","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":563,"publish_version":563,"role":null,"authored":false,"authors":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c720f06b17f65910","login":"instancia","name":"instancia paris","avatar_url":"https://avatars-next.observableusercontent.com/b8cf00be3a3727ab5aa4bab069887f457447b22a3a928328cfcfb7e8f68a2e40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchical Edge Bundling - simple test","cells":[{"id":1,"value":"md`# Hierarchical Edge Bundling - simple test\n\nThis chart shows relationships among classes in a software hierarchy. Hover a class to reveal its imports (outgoing edges) and classes that import it (incoming edges).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`Require D3V6 - D3Format - (INPUT - SELECT) from @jashkenas/inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof choice_site = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"dataRaw = {\n let mydata;\n switch (choice_site) {\n case \"edges_BGCL\": mydata = await FileAttachment(\"edges_BGCL@1.json\").json(); break;\n case \"edges_BUREAUX\": mydata = await FileAttachment(\"edges_BUREAUX@1.json\").json(); break;\n case \"edges_CANTINE\": mydata = await FileAttachment(\"edges_CANTINE@1.json\").json(); break;\n case \"edges_SGDSN\": mydata = await FileAttachment(\"edges_SGDSN@1.json\").json(); break;\n case \"edges_MUSEE\": mydata = await FileAttachment(\"edges_MUSEE.json\").json(); break;\n case \"edges_GENDARMES\": mydata = await FileAttachment(\"edges_GENDARMES.json\").json(); break;\n }\n return mydata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"/*\nviewof choice = html``\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"//choice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"/*\ndataRaw = {\n let mydata;\n switch (choice) {\n case \"edges_BGCL\": mydata = await FileAttachment(\"edges_BGCL@1.json\").json(); break;\n case \"edges_S1Z1\": mydata = await FileAttachment(\"edges_S1Z1.json\").json(); break;\n case \"edges_S1Z2\": mydata = await FileAttachment(\"edges_S1Z2.json\").json(); break;\n case \"edges_S2Z1\": mydata = await FileAttachment(\"edges_S2Z1.json\").json(); break;\n case \"edges_S2Z2\": mydata = await FileAttachment(\"edges_S2Z2.json\").json(); break;\n case \"edges_S3Z1\": mydata = await FileAttachment(\"edges_S3Z1.json\").json(); break;\n case \"edges_S3Z2\": mydata = await FileAttachment(\"edges_S3Z2.json\").json(); break;\n case \"edges_S4Z1\": mydata = await FileAttachment(\"edges_S4Z1.json\").json(); break;\n case \"edges_S4Z2\": mydata = await FileAttachment(\"edges_S4Z2.json\").json(); break;\n }\n return mydata;\n}\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"//data = hierarchy(await FileAttachment(\"flare.json\").json())\n\ndata = hierarchy(dataRaw)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function hierarchy(data, delimiter = \".\") {\n let root;\n const map = new Map;\n data.forEach(function find(data) {\n const {name} = data;\n if (map.has(name)) return map.get(name);\n const i = name.lastIndexOf(delimiter);\n map.set(name, data);\n if (i >= 0) {\n find({name: name.substring(0, i), children: []}).children.push(data);\n data.name = name.substring(i + 1);\n } else {\n root = data;\n }\n return data;\n });\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"function bilink(root) {\n const map = new Map(root.leaves().map(d => [id(d), d]));\n for (const d of root.leaves()) d.incoming = [], d.outgoing = d.data.imports.map(i => [d, map.get(i)]);\n for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function id(node) {\n return `${node.parent ? id(node.parent) + \".\" : \"\"}${node.data.name}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"colorin = \"#00f\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"colorout = \"#f00\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"colornone = \"#ccc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"radius = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"line = d3.lineRadial()\n .curve(d3.curveBundle.beta(0.85))\n .radius(d => d.y)\n .angle(d => d.x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"tree = d3.cluster()\n .size([2 * Math.PI, radius - 100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"//import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null