2c:null 2d:["$","title",null,{"children":"Sankey Draft | May Mobility | Observable"}] 32:T2859,const chart = (() => { const F = 1.5; // text scale const FS = 12 * F, FS_SM = 11 * F, FS_TITLE = 16 * F; const FS_HDR = FS * 1.5, FS_HDR_SM = FS_SM * 1.5; // column header labels const H = 1300; // plot height const OFFSET = Math.round(H * 0.1), NW = 30, GAP = 70, PAD = 6 * F, MIN = 11 * F, TOP = 150; // NW = node width const LINK_OPACITY = 0.4, HIGHLIGHT_OPACITY = 0.45, DIM_OPACITY = 0.1; // normal / highlighted while hovering / faded while hovering const HDR_H = FS_HDR + FS_HDR_SM + 20; const ALL = columns.map((_, i) => i); const DEFAULT_ORDER = ALL.filter(i => !columns[i].hidden); const g2d = document.createElement("canvas").getContext("2d"); const tw = (s, f = `${FS}px sans-serif`) => (g2d.font = f, g2d.measureText(s).width); const split = v => v == null ? [null] : String(v).split(",").map(s => s.trim()).filter(Boolean); // "R1, R3" -> R1 and R3 const product = ls => ls.reduce((a, l) => a.flatMap(x => l.map(y => [...x, y])), [[]]); const leftLab = d => `${d.name} (${d.value})`; const nodeTip = d => riskDesc.has(d.name) ? `${d.name}: ${riskDesc.get(d.name)}\nTickets: ${d.value}` : `${d.name}\nTickets: ${d.value}`; const linkTip = d => `${d.source.name} → ${riskDesc.has(d.target.name) ? `${d.target.name} (${riskDesc.get(d.target.name)})` : d.target.name}: ${d.value}`; const pal = d3.scaleOrdinal(d3.schemeTableau10.concat(d3.schemeSet3)); const fill = d => pal(d.name.toLowerCase()); const colLabel = i => `${columns[i].name} (${columns[i].file.replace(".csv", "")})`; let order = DEFAULT_ORDER.slice(); // visible columns, in display order const chartHost = html`

`; const controls = html`

`; const host = html`

${controls}${chartHost}

`; function renderControls() { controls.replaceChildren(html`Show columns:`); ALL.forEach(i => { const box = html``; box.onchange = () => toggle(i, box.checked); controls.append(html`${box} ${colLabel(i)}`); }); const resetCols = html``; resetCols.onclick = () => setOrder(DEFAULT_ORDER.slice()); controls.append(resetCols); } function toggle(i, on) { if (!on) { if (order.length <= 2) return setOrder(order.slice()); // keep at least two columns return setOrder(order.filter(x => x !== i)); } const k = order.findIndex(x => x > i); // new columns go in their listed position setOrder(k < 0 ? [...order, i] : [...order.slice(0, k), i, ...order.slice(k)]); } function build(order) { const cols = order.map(i => columns[i]), permuted = rows.map(r => order.map(i => r[i])), n = cols.length; const nodes = new Map(), links = new Map(); const node = (c, name) => { const id = c + "|" + name; if (!nodes.has(id)) nodes.set(id, {id, name, col: c}); return nodes.get(id); }; for (const row of permuted) { const seen = new Set(); for (const p of product(row.map(split))) { const cs = p.map((v, c) => v == null ? null : c).filter(c => c !== null); for (let i = 0; i < cs.length - 1; i++) { const s = node(cs[i], p[cs[i]]), t = node(cs[i + 1], p[cs[i + 1]]), k = s.id + "→" + t.id; if (seen.has(k)) continue; seen.add(k); if (!links.has(k)) links.set(k, {source: s.id, target: t.id, value: 0}); links.get(k).value++; } } } const layout = sankey().nodeId(d => d.id).nodeAlign(d => d.col).nodeWidth(NW).nodePadding(14 * F).extent([[0, 1], [1000, H]]); const g = layout({nodes: [...nodes.values()], links: [...links.values()]}); // column x-positions driven by the longest label in each column const leftW = cols.map((_, c) => d3.max(g.nodes.filter(x => x.col === c), x => tw(leftLab(x))) ?? 0); const rightW = cols.map((_, c) => d3.max(g.links.filter(l => l.source.col === c), l => tw(String(l.value), `${FS_SM}px sans-serif`)) ?? 0); const headW = cols.map(h => Math.max(tw(h.name, `bold ${FS_HDR}px sans-serif`), tw(h.file, `${FS_HDR_SM}px sans-serif`))); const cx = [Math.max(leftW[0] + PAD + 4, headW[0] / 2 - NW / 2 + 6)]; for (let c = 0; c < n - 1; c++) cx.push(cx[c] + Math.max(NW + PAD + rightW[c] + GAP + leftW[c + 1] + PAD, (headW[c] + headW[c + 1]) / 2 + 24)); const W = cx[n - 1] + NW + Math.max(PAD + rightW[n - 1], headW[n - 1] / 2 - NW / 2) + 12; g.nodes.forEach(x => { x.x0 = cx[x.col]; x.x1 = x.x0 + NW; }); for (let c = 0; c < n; c++) { // a full-height column stays at the top; the rest start ~10% down const col = g.nodes.filter(x => x.col === c); if (!col.length) continue; const dy = Math.max(0, Math.min(OFFSET, H - d3.max(col, x => x.y1))); col.forEach(x => { x.y0 += dy; x.y1 += dy; }); } layout.update(g); const init = g.nodes.map(x => [x.y0, x.y1]); const root = d3.create("svg").attr("viewBox", `0 0 ${W} ${H + TOP + 20}`).attr("width", W) .style("max-width", "100%").style("height", "auto").style("font", `${FS}px sans-serif`); root.append("text").attr("y", FS_TITLE).attr("font-size", FS_TITLE).attr("font-weight", "bold").text('Ticket flow excluding "in queue" VANLT tickets'); root.append("text").attr("y", FS_TITLE + FS + 8).attr("fill", "#666").text("Hover a node to highlight its links. Drag a node up/down; drag a column header left/right to reorder."); const body = root.append("g").attr("transform", `translate(0,${TOP})`); // draggable column headers body.selectAll("g.hdr").data(cols).join("g").attr("class", "hdr").style("cursor", "grab").each(function (h, c) { const gx = d3.select(this), mx = cx[c] + NW / 2; gx.append("rect").attr("x", mx - headW[c] / 2 - 10).attr("y", -HDR_H).attr("width", headW[c] + 20).attr("height", HDR_H - 6) .attr("fill", "#f3f3f3").attr("rx", 4).append("title").text("Drag left or right to reorder columns"); gx.append("text").attr("x", mx).attr("y", -FS_HDR_SM - 14).attr("font-size", FS_HDR).attr("font-weight", "bold").attr("fill", "#444").attr("text-anchor", "middle").text(h.name).style("pointer-events", "none"); gx.append("text").attr("x", mx).attr("y", -12).attr("font-size", FS_HDR_SM).attr("fill", "#888").attr("text-anchor", "middle").text(h.file).style("pointer-events", "none"); let dx = 0; gx.call(d3.drag() .on("start", () => gx.raise().style("cursor", "grabbing")) .on("drag", e => { dx += e.dx; gx.attr("transform", `translate(${dx},0)`); }) .on("end", () => { const j = d3.minIndex(cx, x => Math.abs(x + NW / 2 - (mx + dx))); if (j === c) { dx = 0; gx.attr("transform", null).style("cursor", "grab"); return; } const next = order.slice(); const [moved] = next.splice(c, 1); next.splice(j, 0, moved); setOrder(next); })); }); const linkL = body.append("g").attr("fill", "none"), nodeL = body.append("g"); const nameL = body.append("g").attr("text-anchor", "end"), numL = body.append("g").attr("font-size", FS_SM).attr("fill", "#444"); // hover: a node's own links are emphasised; every other link fades almost out let hovered = null; const opacity = d => !hovered ? LINK_OPACITY : (hovered.sourceLinks.includes(d) || hovered.targetLinks.includes(d)) ? HIGHLIGHT_OPACITY : DIM_OPACITY; const applyOpacity = () => linkL.selectAll("path").attr("stroke-opacity", opacity); const hover = sel => sel.on("mouseenter", (e, d) => { hovered = d; applyOpacity(); }).on("mouseleave", () => { hovered = null; applyOpacity(); }); const drag = d3.drag().on("drag", (e, d) => { const h = d.y1 - d.y0, y0 = Math.max(1, Math.min(H - h, d.y0 + e.dy)); d.y0 = y0; d.y1 = y0 + h; layout.update(g); render(); }); const numbers = () => g.nodes.flatMap(x => { // one number per outgoing link, nudged apart const outs = x.sourceLinks.slice().sort((a, b) => a.y0 - b.y0); if (!outs.length) return []; const ys = outs.map(l => l.y0); for (let i = 1; i < ys.length; i++) ys[i] = Math.max(ys[i], ys[i - 1] + MIN); const shift = (ys.at(-1) - outs.at(-1).y0) / 2; return outs.map((l, i) => ({k: l.source.id + "→" + l.target.id, x: x.x1 + PAD, y: ys[i] - shift, v: l.value})); }); function render() { linkL.selectAll("path").data(g.links, d => d.index).join(e => e.append("path").call(p => p.append("title"))) .attr("d", sankeyLinkHorizontal()).attr("fill", "none").attr("stroke", d => fill(d.source)).attr("stroke-opacity", opacity) .attr("stroke-width", d => Math.max(1, d.width)) .select("title").text(linkTip); nodeL.selectAll("rect").data(g.nodes, d => d.id).join(e => e.append("rect").attr("width", NW).style("cursor", "ns-resize").call(r => r.append("title")).call(drag).call(hover)) .attr("x", d => d.x0).attr("y", d => d.y0).attr("height", d => Math.max(1, d.y1 - d.y0)).attr("fill", fill) .select("title").text(nodeTip); nameL.selectAll("text").data(g.nodes, d => d.id).join(e => e.append("text").attr("dy", "0.35em").style("cursor", "ns-resize").call(t => t.append("title")).call(t => t.append("tspan")).call(drag).call(hover)) .attr("x", d => d.x0 - 5).attr("y", d => (d.y0 + d.y1) / 2) .each(function (d) { d3.select(this).select("title").text(nodeTip(d)); d3.select(this).select("tspan").text(leftLab(d)); }); numL.selectAll("text").data(numbers(), d => d.k).join(e => e.append("text").attr("dy", "0.35em").style("pointer-events", "none")) .attr("x", d => d.x).attr("y", d => d.y).text(d => d.v); } render(); const resetLayout = html``; resetLayout.onclick = () => { g.nodes.forEach((x, i) => { [x.y0, x.y1] = init[i]; }); layout.update(g); render(); }; return html`

${resetLayout}${root.node()}

`; } function setOrder(next) { order = next; renderControls(); chartHost.replaceChildren(build(order)); } setOrder(order); return host; })(); display(chart);33:T547,const riskDesc = new Map(riskMap.map(d => [d.RiskCategory, d.description])); // scenario columns in their listed order; Map is last. hidden = unticked at the start. const scenarioCols = ["ScenarioType", "Map", "ManualExpertLogButtonCategory", "Actor", "ActorState", "EgoBehavior", "Platform", "Road", "Source", "Weather", "RiskCategory"]; const hiddenByDefault = new Set(["Actor", "ActorState", "EgoBehavior", "Platform", "Road", "Source", "Weather", "RiskCategory"]); const columns = [ {name: "status", file: "vanlt_tickets.csv"}, {name: "label", file: "modl_tickets.csv"}, {name: "status", file: "modl_tickets.csv"}, ...scenarioCols.map(name => ({name, file: "pr_scenarios.csv", hidden: hiddenByDefault.has(name)})) ]; // one row per ticket: [VANLT status, label, MODL status, ...scenario columns]; null = no data const rows = (() => { const V = new Map(vanlt.map(d => [d.vanlt_tkt, d])); const M = new Map(modl.map(d => [d.vanlt_tkt, d])); const S = new Map(scenarios.map(d => [d.description?.match(/VANLT-\d+/i)?.[0].toUpperCase(), d])); return [...new Set([...V.keys(), ...M.keys(), ...S.keys()])].map(k => { const v = V.get(k), m = M.get(k), s = S.get(k); return [v?.status, v ? "Expert-Demo-Ingress" : m?.label, m?.status, ...scenarioCols.map(c => s?.[c])].map(x => x ?? null); }).filter(r => r[0] !== "in queue"); })();34:[{"id":"fc6e09b17a96a20f64a6bfc0d70cb2b5b9decec0ffa6f8ebb014ed1ed6bd586602c3c4b44e4c253b2510a25912c8b472dedb32305ddd674ac26718305ca23c36","href":"https://static.observableusercontent.com/files/fc6e09b17a96a20f64a6bfc0d70cb2b5b9decec0ffa6f8ebb014ed1ed6bd586602c3c4b44e4c253b2510a25912c8b472dedb32305ddd674ac26718305ca23c36","name":"behavior_scenarios.csv","type":"text/csv","lastModified":1791211111395,"size":28234},{"id":"757e3a3f9f42d18fa75657118c2c45e5e8314432ddbb5142ed0bb44be26b262edd666aba79e94acae97d17303713b513a62c08d8f5244a9482379b9162642d9b","href":"https://static.observableusercontent.com/files/757e3a3f9f42d18fa75657118c2c45e5e8314432ddbb5142ed0bb44be26b262edd666aba79e94acae97d17303713b513a62c08d8f5244a9482379b9162642d9b","name":"modl_tickets.csv","type":"text/csv","lastModified":1791210850525,"size":2728},{"id":"837bf76a88bb44139806bcd02778965f1722b60779e57b1230816b99a1c143290c2b8796961b0652d6fbfde96c7e166cafd9d684883f2f41efac5fb256f3fdd8","href":"https://static.observableusercontent.com/files/837bf76a88bb44139806bcd02778965f1722b60779e57b1230816b99a1c143290c2b8796961b0652d6fbfde96c7e166cafd9d684883f2f41efac5fb256f3fdd8","name":"risk_category_mapping.csv","type":"text/csv","lastModified":1791210824637,"size":1241},{"id":"e46ed7b8df8600eb37d1c43c1beaeed17c41e52d33d5fd21d09926915dffa182e46648a778116c43ee4e1eaff1ccd9e1cd755d2a8b67e5f649a8604b68fa3eeb","href":"https://static.observableusercontent.com/files/e46ed7b8df8600eb37d1c43c1beaeed17c41e52d33d5fd21d09926915dffa182e46648a778116c43ee4e1eaff1ccd9e1cd755d2a8b67e5f649a8604b68fa3eeb","name":"vanlt_tickets.csv","type":"text/csv","lastModified":1791210862477,"size":27320},{"id":"fc6e09b17a96a20f64a6bfc0d70cb2b5b9decec0ffa6f8ebb014ed1ed6bd586602c3c4b44e4c253b2510a25912c8b472dedb32305ddd674ac26718305ca23c36","href":"https://static.observableusercontent.com/files/fc6e09b17a96a20f64a6bfc0d70cb2b5b9decec0ffa6f8ebb014ed1ed6bd586602c3c4b44e4c253b2510a25912c8b472dedb32305ddd674ac26718305ca23c36","name":"pr_scenarios.csv","type":"text/csv","lastModified":1791315553053,"size":28234}] 30:{"id":"5c85b51b234bd06a","slug":"sankey-draft","title":"Sankey Draft","thumbnail":"06bd145031d109e7dddd3924a167749dd25275c067e0df9340328e634dc37e31","access_level":"public","create_time":"$D2026-10-05T18:12:08.865Z","update_time":"$D2026-10-06T21:35:03.839Z","view_time":null,"first_public_time":"$D2026-10-06T19:20:29.956Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"49bc5f676103acc2","login":"maymobility","name":"May Mobility","avatar_url":"https://avatars-next.observableusercontent.com/86e8caae57c8c30f81385124ce8d480abca63bcfc425a3884902bdb738fcc156","tier":"pro","bio":""},"version":67,"publish_version":67,"role":null,"authored":false,"authors":[{"type":"individual","id":"10f3ba5d1b45248e","login":"alex-cao","name":"Alex Cao","avatar_url":"https://avatars-next.observableusercontent.com/aa83358918546bb4afb706470f794f043a21c035f81f31a50b35275cfb0ad69c","tier":null,"bio":""}],"members":[{"type":"team","id":"49bc5f676103acc2","login":"maymobility","name":"May Mobility","avatar_url":"https://avatars-next.observableusercontent.com/86e8caae57c8c30f81385124ce8d480abca63bcfc425a3884902bdb738fcc156","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey Draft","cells":[{"id":1,"value":"# Sankey Draft","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Data Wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const vanlt = await FileAttachment(\"vanlt_tickets.csv\").csv({typed: true});\nconst modl = await FileAttachment(\"modl_tickets.csv\").csv({typed: true});\nconst scenarios = await FileAttachment(\"pr_scenarios.csv\").csv({typed: true});\nconst riskMap = await FileAttachment(\"risk_category_mapping.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {sankey, sankeyLinkHorizontal} from \"npm:d3-sankey\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"