2b:null 2c:["$","title",null,{"children":"Arc diagram | brettforbes | Observable"}] 31:T1fad,chart = { // Specify the chart’s dimensions. const width = 640; const step = 28; const marginTop = 20; const marginRight = 20; const marginBottom = 20; const marginLeft = 130; const nodeWidth = 150; const height = (nodes.length - 1) * step + marginTop + marginBottom; const y = d3.scalePoint(orders.get("by name"), [marginTop, height - marginBottom]); // A color scale for the nodes and links. const color = d3.scaleOrdinal() .domain(nodes.map(d => d.group).sort(d3.ascending)) .range(d3.schemeCategory10) .unknown("#aaa"); // A function of a link, that checks that source and target have the same group and returns // the group; otherwise null. Used to color the links. const groups = new Map(nodes.map(d => [d.id, d.group])); function samegroup({ source, target }) { return groups.get(source) === groups.get(target) ? groups.get(source) : null; } // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;") .call(zoom) // .on("wheel.zoom", null); // The current position, indexed by id. Will be interpolated. const Y = new Map(nodes.map(({id}) => [id, y(id)])); // Add an arc for each link. function arc(d) { const y1 = Y.get(d.source); const y2 = Y.get(d.target); const r = Math.abs(y2 - y1) / 2; return `M${marginLeft},${y1} A${100},${r} 0,0,${y1 < y2 ? 0 : 1} ${marginLeft},${y2}`; } const path = svg.insert("g", "*") .attr("fill", "none") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .selectAll("path") .data(links) .join("path") .attr("stroke", d => color(samegroup(d))) .attr("d", arc); // Add a text label and a dot for each node. const label = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "start") .selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${marginLeft},${Y.get(d.id)})`) .call(g => g.append("text") .attr("x", 10) .attr("dy", "0.35em") .attr("fill", d => d3.lab(color(d.group)).darker(2)) .text(d => d.id)) // .call(g => g.append("circle") // .attr("r", 3) // .attr("fill", d => color(d.group))); const numbersSection = label.append("g") .attr("fill", "red") .attr("width", 3) .attr("height", step-10) .attr('rx', 0) .attr('ry', 0) .attr("x", 0) .attr("y", (-step / 2)+5) //+ value should be half of what is getting - in height .append("text") .attr("x", 120) .attr("dy", "0.35em") .text(d => d.group) // Add invisible rects that update the class of the elements on mouseover. label.append("rect") .attr("fill", "none") .attr("width", marginLeft + 40) .attr("height", step) .attr("x", -marginLeft) .attr("y", -step / 2) .attr("fill", "none") .attr("pointer-events", "all") .on("pointerenter", (event, d) => { svg.classed("hover", true); label.classed("primary", n => n === d); label.classed("secondary", n => links.some(({source, target}) => ( n.id === source && d.id == target || n.id === target && d.id === source ))); path.classed("primary", l => l.source === d.id || l.target === d.id).filter(".primary").raise(); }) .on("pointerout", () => { svg.classed("hover", false); label.classed("primary", false); label.classed("secondary", false); path.classed("primary", false).order(); }); // Add rects that act as a node to entity. const rectangluarNode = label.append("rect") .attr("fill", "none") // .attr("style", "outline: 1px solid #ABA5A5;") .attr('stroke','#ABA5A5') .attr('stroke-width', 1) .attr("box-shadow", "0px 4px 4px 0px rgba(0,0, 0, 0.25)") // .attr("style", ": ;border: 1px solid #ABA5A5;background: #FFF;box-shadow: 0px 4px 4px 0px rgba(0,0, 0, 0.25);") .attr("width", nodeWidth) .attr("height", step-10) .attr('rx', 4) .attr('ry', 4) .attr("x", 0) .attr("y", (-step / 2)+5); //+ value should be half of what is getting - in height const coloredLeftLegend = label.append("rect") .attr("fill", "red") .attr("width", 3) .attr("height", step-10) .attr('rx', 0) .attr('ry', 0) .attr("x", 0) .attr("y", (-step / 2)+5); //+ value should be half of what is getting - in height const y2 = d3.scaleBand().range([marginTop, height - marginBottom]); // use .range to overwrite and update the range of scaleBand. Give it a range of 30 to 270. update range for scaleBand to match our svg dimensions let x2 = d3.scaleLinear().range([marginLeft + nodeWidth + 20, width-marginRight+100]); y2.domain(nodeDomain) x2.domain([0,11]).nice(); // ANSWER FOR PADDINGiNNER // scaleBand.paddingInner(0.2); const yAxis = d3.axisLeft().scale(y2).tickSize(0).tickFormat(""); const xAxis = d3.axisTop(x2); svg .append('g') .call(yAxis) .attr('transform',d => `translate(${marginLeft + nodeWidth + 20},0)`); svg .append('g') .attr("class", "x-axis") .call(xAxis) .attr('transform',d => `translate(0,30)`); svg .append('g') .attr("class", "bars") .selectAll("g") .data(data) .enter() .append("circle") .attr("cx", d => x2(d.group)) .attr("cy", d => y(d.id)) // .attr("cy", d => Y.get(d.id)) .attr("r", d => 5) .attr("fill", d => color(d.group)) // .append('g') // .enter() // .join("g") // .join(enter => enter.append("rect")) //alternatively //.enter().append("rect") // .attr('x', d => x2(d.group)) // .attr('y', d => y2(d.id)) // .attr('width', 20) // .attr('height', 50) // .call(g => g.append("circle") // .attr("r", 3) // .attr('x', d => 50) // .attr('y', d => y2(d.id)) // .attr("fill", d => color(d.group))); function zoom(svg) { console.log("called zoom meth"); const extent = [[marginLeft + nodeWidth + 20, marginTop], [width - marginRight, height - marginTop]]; //marginLeft + nodeWidth + 20 svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed(event) { x2.range([marginLeft + nodeWidth + 20, width - marginRight].map(d => event.transform.applyX(d))); svg.selectAll(".bars circle") .attr("cx", d => x2(d.group)) .style('fill-opacity', d =>{ if(x2(d.group)width - marginRight){ return 0; }else{ return 1; } }); svg.selectAll(".x-axis").call(xAxis); } } // Add styles for the hover interaction. svg.append("style").text(` .hover text { fill: #aaa; } .hover g.primary text { font-weight: bold; fill: #333; } .hover g.secondary text { fill: #333; } .hover path { stroke: #ccc; } .hover path.primary { stroke: #333; } `); // A function that updates the positions of the labels and recomputes the arcs // when passed a new order. function update(order) { y.domain(order); label .sort((a, b) => d3.ascending(Y.get(a.id), Y.get(b.id))) .transition() .duration(750) .delay((d, i) => i * 20) // Make the movement start from the top. .attrTween("transform", d => { const i = d3.interpolateNumber(Y.get(d.id), y(d.id)); return t => { const y = i(t); Y.set(d.id, y); return `translate(${marginLeft},${y})`; } }); path.transition() .duration(750 + nodes.length * 20) // Cover the maximum delay of the label transition. .attrTween("d", d => () => arc(d)); } return Object.assign(svg.node(), {update}); }32:[{"id":"31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","href":"https://static.observableusercontent.com/files/31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","name":"miserables.json","type":"application/octet-stream","lastModified":1781262345328.42,"size":18844}] 2f:{"id":"c1c6f4aae7e48956","slug":null,"title":"Arc diagram","thumbnail":"d1a19d85a601b87ee991353f7d8e45506eb007995395f705474484de26cbfd3d","access_level":"public","create_time":"$D2026-06-12T11:05:45.328Z","update_time":"$D2026-06-12T11:05:45.328Z","view_time":null,"first_public_time":"$D2026-06-12T11:05:45.328Z","has_unpublished_edits":null,"fork":{"id":"a9e17e46366c29d8","slug":null,"title":"Arc diagram","owner":{"id":"1b839cba4b5055bc","login":"coder08","name":"Piyush"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f846f459b144e893","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":"starter_2024"},"version":483,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null}],"members":[{"type":"individual","id":"e3ae8b6a8e4f693b","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":null,"role":"editor"},{"type":"team","id":"f846f459b144e893","login":"brettforbes","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90abd4233f342d3bde898a6f28cf0f1a64652b13845939fedb9e12eda77f7bd0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Arc diagram","cells":[{"id":0,"value":"

Arc diagram

D3 › Gallery

\n\n# Arc diagram\n\nThis diagram places nodes in a horizontal or vertical line, with circular arcs for links. Unlike other network visualizations such as a [force layout](/@d3/force-directed-graph), the appearance (and usefulness) of an arc diagram is highly dependent on the order of nodes. Hover over a node below to inspect its connections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"{\n const select = Inputs.select(orders, { label: \"Order\" });\n\n select.addEventListener(\"input\", () => (clearTimeout(t), chart.update(select.value)));\n\n // Soon after the page starts, trigger a synthetic input event to demonstrate the interactivity\n const t = setTimeout(() => {\n select.value = orders.get(\"by group\");\n select.dispatchEvent(new Event(\"input\", {bubbles: true}));\n }, 2000);\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"---\n*Data preparation*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"miserables = FileAttachment(\"miserables.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"nodeDomain = data.map(ele=> ele.id).sort();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"data = miserables.nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"nodes = miserables.nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"orders = {\n const degree = d3.rollup(\n links.flatMap(({ source, target, value }) => [\n { node: source, value },\n { node: target, value }\n ]),\n (v) => d3.sum(v, ({ value }) => value),\n ({ node }) => node\n );\n return new Map([\n [\"by name\", d3.sort(nodes.map((d) => d.id))],\n [\"by group\", d3.sort(nodes, ({group}) => group, ({id}) => id).map(({id}) => id)],\n// [\"input\", nodes.map(({id}) => id)],\n [\"by degree\", d3.sort(nodes, ({id}) => degree.get(id), ({id}) => id).map(({id}) => id).reverse()]\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"links = miserables.links","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"