25:["$","title",null,{"children":"Edge Explorations | Fabian Iwand | Observable"}] 49:T8a4,{ const guideProps = { curve: "step-before", //stroke: "#aaa", //strokeDasharray: [1, 2], }; const gradientId = DOM.uid().id; const hueA = 40; const hueB = 200; const {nodes, edges} = graph; return Plot.plot({ x: {axis: false}, y: { ticks: nodes.length, reverse: true, label: null, }, margin: 10, marginLeft: 200, marginRight: 200, insetLeft: -6, insetRight: -6, width: 200 + 10 * edges.length + 200, height: 10 + 10 * nodes.length + 10, marks: [ () => htl.svg` `, //Plot.rect(nodes, {y: "n", inset: -.5, fill: (d, i) => i % 2 ? "#0000" : "#0001"}), [{anchor: "left", dy: -.5}, {anchor: "right", dy: .5}].map(props => Plot.axisY(nodes, { y: (d, n) => n, tickSize: 5, tickPadding: 5, tickFormat: (d, n) => labelOf(n), fontFamily: "var(--monospace, monospace)", fontSize: 9, ...props })), // Outgoing guides (left) Plot.link(edges, { y2: d => d[0], y1: d => d[0], dy: -.5, x1: -1, x2: (d, i) => i, stroke: `hsl(${hueA},100%,50%)`, ...guideProps, }), // Incoming guides (right) Plot.link(edges, { y1: d => d[1], y2: d => d[1], dy: .5, x1: edges.length, x2: (d, i) => i, stroke: `hsl(${hueB},100%,50%)`, ...guideProps, }), Plot.barY(edges, { y1: d => d[0], y2: d => d[1], x: (d, i) => i, insetLeft: 2, insetRight: 2, insetTop: -1, insetBottom: -1, rx1y2: 2, rx2y1: 2, fill: `url(#${gradientId})`, }), // Plot.link(graph.edges, { // y1: d => d[0] + .25, // y2: d => d[1] - .25, // x: (d, i) => i, // markerStart: "dot", // markerEnd: "dot", // }) ], }); }4a:T6a8,{ const {nodes, edges} = graph; const { gridStep, gridAspect, edgeWidth, margin, nodeRatio, fontRatio, fontAspect, } = options3; const {gridMarkerRatio, gridMarkerOpacity} = options3; const {sx, sy, sr, w, h, marginRight} = getScaling({graph, gridStep, gridAspect, margin, fontRatio, fontAspect, labelOf}); const $svg = d3.create("svg").call(attrs, { viewBox: `0 0 ${w} ${h}`, style: `outline: 2px solid #aaa; max-width: ${w}px` }); const $root = $svg.append("g").attr("transform", `translate(${margin + sx(.5)},${margin + sy(.5)})`); if(gridMarkerRatio && gridMarkerOpacity) { // Grid markers $root.append("path") .call(attrs, { stroke: "black", fill: "none", "stroke-opacity": gridMarkerOpacity, d: gridPath({size: nodes.length, ratio: gridMarkerRatio, sx, sy, sr}) }); } // Edges $root.append("g") .call(attrs, {stroke: "black", fill: "none", "stroke-width": edgeWidth}) .selectAll("path") .data(edges) .join("path") .attr("d", ([a, b]) => { const x = sx(a); const y = sy(b); const r = sr(nodeRatio); return "M" + [x, sy(a) + r, x, y, sx(b) - r, y]; }); // Bend markers $root.append("g") .call(attrs, {stroke: "none", fill: "black", "fill-opacity": 1}) .selectAll("rect") .data(edges) .join("rect") .call(attrs, ([a, b]) => { const x = sx(a); const y = sy(b); const r = sr(nodeRatio); return ({x: x - r, y: y - r, width: r * 2, height: r * 2}) }); $root.append(() => renderNodes({graph, sx, sy, sr, nodeRatio, fontRatio, fontAspect, labelOf})); return $svg.node(); }4b:T4a5,{ const {nodes, edges} = graph; const { gridStep = 15, gridAspect = 1, margin = 20, edgeWidth = 1, nodeRatio = 1/3, fontRatio = .7, fontAspect = 1/2, // % fontRatio bendType = "arc", bendRatio = .75, crossType = "gap", crossRatio = .5, joinType = "dot", joinRatio = .25, } = options1; const {o, sx, sy, sr, w, h, marginRight} = getScaling({graph, gridStep, gridAspect, margin, fontRatio, fontAspect, labelOf}); const $svg = d3.create("svg").call(attrs, { viewBox: `0 0 ${w} ${h}`, style: `outline: 2px solid #aaa; max-width: ${w}px` }); const $root = $svg.append("g").attr("transform", `translate(${margin + sx(.5)},${margin + sy(.5)})`); const styles = { start: edgeStyles.start.default, end: edgeStyles.end.default, crossVertical: edgeStyles.crossVertical[crossType], bend: edgeStyles.bend[bendType], join: edgeStyles.join[joinType], }; $root.append(() => renderEdges({graph, styles, sx, sy, sr, edgeWidth, nodeRatio, crossRatio, joinRatio, bendRatio})); $root.append(() => renderNodes({graph, sx, sy, sr, nodeRatio, fontRatio, fontAspect, labelOf})); return $svg.node(); }4c:T85a,function renderLanes(graph, options) { const {incoming} = graph; const { gridStep, gridAspect, margin, nodeRatio, fontRatio, fontAspect, crossType, crossRatio, labelOf, } = options; const { laneCount, // constant edge spacing up to n lanes laneRatio, // total spread width } = options; const {sx, sy, sr, w, h, marginRight} = getScaling({graph, gridStep, gridAspect, margin, fontRatio, fontAspect, labelOf}); const st = (i, i2) => i2 < 1 ? 0 : laneRatio * i2 / Math.max(i2, laneCount) * (.5 - i / i2); const $svg = d3.create("svg").call(attrs, { viewBox: `0 0 ${w} ${h}`, style: `outline: 2px solid #aaa; max-width: ${w}px` }); const $root = $svg.append("g").attr("transform", `translate(${margin + sx(.5)},${margin + sy(.5)})`); const styles = { start: ({x0, x, y, r}) => "M" + [x0, y, x, y + r], end: ({y0, x, y, r}) => "L" + [x - r, y, x, y0], bend: edgeStyles.bend.arc, cross: edgeStyles.crossVertical[crossType], }; const edges = getEdgeOffsets(graph); const edgePath = ({a, b, i, i2, j, j2}) => { const x = sx(a) + sr(st(i, i2)); const y = sy(b) + sr(st(j, j2)); const segments = [styles.start({x0: sx(a), x, y: sy(a), r: sr(nodeRatio)})]; if(styles.cross) { for(let n = a + 1; n < b; n++) { if(a > incoming[n][0]) { const i = incoming[n].findLastIndex(d => d < a); const i2 = incoming[n].length - 1; const y1 = sy(n) + sr(st(i, i2)); const y2 = sy(n) + sr(st(0, i2)); segments.push(styles.cross({x, y1, y2, r: sy(crossRatio / 2)})); } } } segments.push(styles.bend({x, y, r: sr(.5)})); segments.push(styles.end({y0: sy(b), x: sx(b), y, r: sr(nodeRatio)})); return segments.join(""); }; // Edges $root.append("g") .call(attrs, {stroke: "black", fill: "none", "stroke-width": 1}) .selectAll("path") .data(edges) .join("path") .attr("d", edgePath); $root.append(() => renderNodes({graph, sx, sy, sr, nodeRatio, fontRatio, fontAspect, labelOf})); return $svg.node(); }4d:T42c,{ const ri = .5; const ro = 2; const d = d3.cross([-1, 1], [-1, 1], (x, y) => "M" + [x*ro, y*ro, x*ri, y*ri]).join(""); const id = "n" + performance.now().toString(36); // Can't set to display:none - see https://issues.chromium.org/issues/40324398 const marker = htl.svg`

${marker}