29:null 2a:["$","title",null,{"children":"[Template] Timeline Graphic | PEI Data Journalism | Observable"}] 2f:T93a5,chart = { // fonts; // ← keep this line if your notebook has the fonts-loader cell // ───────────────────────────────────────────── // CONFIG // ───────────────────────────────────────────── const CONFIG = { COL_DATE : "Completion Date", COL_TARGET : "Target", COL_BUYER : "Buyer/Investor", COL_SELLER : "Seller", COL_INDUSTRY : "Target Industry", COL_VALUE_BN : "Deal Value ($bn)", COL_VALUE_M : "Deal Value ($M)", MEGA_THRESHOLD : 10 }; const LEGAL = new Set([ "N.V.", "N.V", "B.V.", "Limited", "Ltd", "Ltd.", "plc", "PLC", "LLC", "L.P.", "GmbH", "S.A.", "S.A", "AG", "S.p.A.", "Inc.", "Corp.", "Co." ]); const cleanName = raw => { const parts = String(raw).split(",")[0].trim().split(/\s+/); if (parts.length > 1 && LEGAL.has(parts[parts.length - 1])) parts.pop(); return parts.join(" "); }; // ───────────────────────────────────────────── // DATA (uploaded file overrides the attached CSV) // ───────────────────────────────────────────── const text = uploaded ? await uploaded.text() : await FileAttachment("top-deals-timeline.csv").text(); const rows = d3.csvParse(text); if (!rows.length) throw new Error("The file has no rows."); const hasBn = rows.columns.includes(CONFIG.COL_VALUE_BN); const hasM = rows.columns.includes(CONFIG.COL_VALUE_M); if (!rows.columns.includes(CONFIG.COL_DATE) || !rows.columns.includes(CONFIG.COL_TARGET)) throw new Error(`Missing "${CONFIG.COL_DATE}" and/or "${CONFIG.COL_TARGET}".`); if (!rows.columns.includes(CONFIG.COL_BUYER) || !rows.columns.includes(CONFIG.COL_SELLER)) throw new Error(`Missing "${CONFIG.COL_BUYER}" and/or "${CONFIG.COL_SELLER}".`); if (!hasBn && !hasM) throw new Error(`Missing a value column ("${CONFIG.COL_VALUE_BN}" or "${CONFIG.COL_VALUE_M}").`); const parseDate = d3.timeParse("%Y-%m-%d"); const deals = rows.map((r, index) => { const value = hasBn ? +r[CONFIG.COL_VALUE_BN] : (+r[CONFIG.COL_VALUE_M]) / 1000; return { id : index, name : cleanName(r[CONFIG.COL_TARGET]), buyer : String(r[CONFIG.COL_BUYER] || "").trim() || "Not provided", seller : String(r[CONFIG.COL_SELLER] || "").trim() || "Not provided", value : +value.toFixed(1), date : parseDate(String(r[CONFIG.COL_DATE]).slice(0, 10)) }; }).filter(d => d.date && isFinite(d.value)); if (!deals.length) throw new Error("No rows with a valid date and value were found."); deals.sort((a, b) => d3.ascending(a.date, b.date) || d3.descending(a.value, b.value) ); // ───────────────────────────────────────────── // LAYOUT // ───────────────────────────────────────────── const W = 600; let H = 354; let SPINE_Y = 178; const AXIS_L = 45; const AXIS_R = 525; let BRACKET_Y = 320; let MONTH_Y = 336; let YEAR_Y = 350; // The Illustrator source is 646.82px wide with a largest radius around 55px. // At a 600px artboard, 52px is the closest proportional match. const MAX_R = 52; const FONT_FAMILY = "Avenir Next LT Pro"; const FONT = 14; const LINE_H = 16.8; const NAME_WRAP_W = 125; const LABEL_EDGE_PAD = 6; const LABEL_GAP_X = 8; const LABEL_GAP_Y = 4; const LABEL_BUBBLE_PAD = 1; const LINE_LABEL_PAD = 3; const LINE_LINE_PAD = 2; const CONNECTOR_TEXT_GAP = 4; // Illustrator-style side elbows meet the label beside its first name line, // about 4px above that line's baseline (Worldpay and Clario in the source SVG). const ELBOW_LABEL_BASELINE_OFFSET = 4; const AXIS_LABEL_GAP = 22; // The SVG uses two nearby rows above the bubbles: // a normal row and a lower, bubble-adjacent row for labels such as Worldpay. const UP_VALUE_ROWS = [110, 122, 93, 76, 59]; // Below the bubbles, crowded labels move downward in full text rows, // as JDE Peet's does in the Illustrator source. const DOWN_NAME_ROWS = [264, 282, 300, 318, 336]; const WRAP_WIDTHS = [125, 110, 95, 82]; // Labels may move locally, but never travel across unrelated bubbles. const CENTRE_SHIFTS = [0, -12, 12, -24, 24, -36, 36]; const SIDE_OFFSETS = [24, 32, 40, 48, 56]; const MAX_LABEL_SHIFT = 74; // Optional small, editorial label adjustments by cleaned target name. // Negative values move the label left; positive values move it right. // The layout solver still checks the adjusted label and connector for collisions. const LABEL_NUDGE_X = new Map([ ["Confluent", -7], ["Pension Insurance Corporation Group", -7] ]); const labelNudgeX = d => LABEL_NUDGE_X.get(d.name) || 0; const preferredLabelCentreX = d => d.x + labelNudgeX(d); // A named editorial nudge is directional, not merely a soft preference. // For example, a -7px nudge may stay at -7px or move farther left if the // collision solver needs it, but it may never drift back to the right. const respectsLabelNudge = (d, candidate) => { const nudge = labelNudgeX(d); if (!nudge) return true; const candidateCentre = (candidate.box.x0 + candidate.box.x1) / 2; const nudgedCentre = d.x + nudge; return nudge < 0 ? candidateCentre <= nudgedCentre + 0.1 : candidateCentre >= nudgedCentre - 0.1; }; // The Illustrator elbows are short: about 20–25px in the source. // 48px allows a little flexibility without creating chart-spanning leaders. const MAX_ELBOW_RUN = 48; const MAX_CONNECTOR_LENGTH = 150; const MAX_CANDIDATES_PER_DEAL = 90; const MAX_SEARCH_STATES = 80000; const LEGEND_CLEAR_Y = 38; const DEBUG_LAYOUT = false; // ───────────────────────────────────────────── // COLOURS // ───────────────────────────────────────────── const CLR = { orange : "#f47920", gold : "#ffb81c", ink : "#1d1d1b", gray : "#555", bracket : "#8a8a8a", stroke : "#ffffff" }; const fillFor = d => d.value >= CONFIG.MEGA_THRESHOLD ? CLR.orange : CLR.gold; // ───────────────────────────────────────────── // SCALES // ───────────────────────────────────────────── const d0 = d3.timeMonth.floor(d3.min(deals, d => d.date)); const d1 = d3.timeDay.offset( d3.timeMonth.offset(d3.timeMonth.floor(d3.max(deals, d => d.date)), 1), -1 ); const xScale = d3.scaleTime() .domain([d0, d1]) .range([AXIS_L, AXIS_R]); const rScale = d3.scaleSqrt() .domain([0, d3.max(deals, d => d.value)]) .range([0, MAX_R]); const fmtVal = v => "$" + d3.format(".1f")(v) + "bn"; // ───────────────────────────────────────────── // SVG ROOT // ───────────────────────────────────────────── const chartWrap = d3.create("div") .style("position", "relative") .style("width", "100%") .style("max-width", `${W}px`) .style("font-family", FONT_FAMILY); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H) .style("display", "block") .style("width", "100%") .style("height", "auto") .style("background", "#fff") .style("max-width", W) .style("font-family", FONT_FAMILY); chartWrap.node().appendChild(svg.node()); // ───────────────────────────────────────────── // TOOLTIP // ───────────────────────────────────────────── const tooltip = chartWrap.append("div") .style("position", "absolute") .style("z-index", 10) .style("pointer-events", "none") .style("visibility", "hidden") .style("opacity", 0) .style("max-width", "340px") .style("padding", "10px 12px") .style("background", "rgba(255,255,255,0.98)") .style("border", `1px solid ${CLR.ink}`) .style("border-radius", "3px") .style("box-shadow", "0 2px 10px rgba(0,0,0,0.16)") .style("font-size", "12px") .style("line-height", 1.35) .style("color", CLR.ink); const setTooltipContent = d => { tooltip.selectAll("*").remove(); tooltip.append("div") .style("font-size", "13px") .style("font-weight", "700") .style("margin-bottom", "6px") .text(`${d.name} · ${fmtVal(d.value)}`); const buyerLine = tooltip.append("div").style("margin-bottom", "5px"); buyerLine.append("span").style("font-weight", "700").text("Buyer: "); buyerLine.append("span").text(d.buyer); const sellerLine = tooltip.append("div"); sellerLine.append("span").style("font-weight", "700").text("Seller: "); sellerLine.append("span").text(d.seller); }; const moveTooltip = event => { const [px, py] = d3.pointer(event, chartWrap.node()); const wrapBox = chartWrap.node().getBoundingClientRect(); const tip = tooltip.node(); const pad = 8; let left = px + 14; let top = py + 14; if (left + tip.offsetWidth > wrapBox.width - pad) left = px - tip.offsetWidth - 14; if (top + tip.offsetHeight > wrapBox.height - pad) top = py - tip.offsetHeight - 14; tooltip .style("left", `${Math.max(pad, left)}px`) .style("top", `${Math.max(pad, top)}px`); }; const showTooltip = (event, d) => { setTooltipContent(d); tooltip.style("visibility", "visible").style("opacity", 1); moveTooltip(event); }; const hideTooltip = () => { tooltip.style("visibility", "hidden").style("opacity", 0); }; // Canvas text measurement is reliable before the SVG is attached in Observable. const _ctx = document.createElement("canvas").getContext("2d"); const measure = (text, size, weight = "normal") => { _ctx.font = `${weight} ${size}px ${FONT_FAMILY}`; return _ctx.measureText(text).width; }; // ───────────────────────────────────────────── // LEGEND // ───────────────────────────────────────────── const legendDefs = [ { label: `Mega deals (+$${CONFIG.MEGA_THRESHOLD}bn)`, fill: CLR.orange }, { label: "Others", fill: CLR.gold } ]; const LEG_Y = 11; const DOT_R = 6.5; const DOT_TEXT_GAP = 11; const ITEM_GAP = 22; let lx = 16; legendDefs.forEach(({ label, fill }) => { const g = svg.append("g").attr("transform", `translate(${lx}, ${LEG_Y})`); g.append("circle").attr("r", DOT_R).attr("fill", fill); g.append("text") .attr("x", DOT_R + DOT_TEXT_GAP) .attr("dy", "0.34em") .attr("font-size", FONT) .attr("fill", CLR.ink) .text(label); lx += DOT_R + DOT_TEXT_GAP + measure(label, FONT) + ITEM_GAP; }); // ───────────────────────────────────────────── // TEXT + BASIC GEOMETRY // ───────────────────────────────────────────── // Wrap only between complete words. Never split a company name inside a word. // A long word may exceed the preferred wrap width; the collision engine will // use its true measured width when positioning the label. const wrapName = (name, maxWidth = NAME_WRAP_W) => { const words = String(name).trim().split(/\s+/).filter(Boolean); const lines = []; let line = ""; for (const word of words) { const test = line ? `${line} ${word}` : word; if (line && measure(test, FONT, "bold") > maxWidth) { lines.push(line); line = word; } else { line = test; } } if (line) lines.push(line); return lines; }; const labelWidth = (lines, value) => Math.max( ...lines.map(line => measure(line, FONT, "bold")), measure(fmtVal(value), FONT) ); const boxesOverlap = (a, b, gapX = LABEL_GAP_X, gapY = LABEL_GAP_Y) => a.x0 < b.x1 + gapX && a.x1 > b.x0 - gapX && a.y0 < b.y1 + gapY && a.y1 > b.y0 - gapY; const pointToRectDistance = (x, y, box) => { const dx = Math.max(box.x0 - x, 0, x - box.x1); const dy = Math.max(box.y0 - y, 0, y - box.y1); return Math.hypot(dx, dy); }; const boxTouchesBubble = box => deals.some(b => pointToRectDistance(b.x, SPINE_Y, box) < b.r + LABEL_BUBBLE_PAD ); const lineLength = segment => Math.hypot(segment.x2 - segment.x1, segment.y2 - segment.y1); const segmentIntersectsBox = (segment, box, pad = LINE_LABEL_PAD) => { const x0 = box.x0 - pad; const x1 = box.x1 + pad; const y0 = box.y0 - pad; const y1 = box.y1 + pad; // Every connector produced below is horizontal or vertical. if (Math.abs(segment.x1 - segment.x2) < 0.001) { const x = segment.x1; const sy0 = Math.min(segment.y1, segment.y2); const sy1 = Math.max(segment.y1, segment.y2); return x >= x0 && x <= x1 && sy1 >= y0 && sy0 <= y1; } if (Math.abs(segment.y1 - segment.y2) < 0.001) { const y = segment.y1; const sx0 = Math.min(segment.x1, segment.x2); const sx1 = Math.max(segment.x1, segment.x2); return y >= y0 && y <= y1 && sx1 >= x0 && sx0 <= x1; } return false; }; const segmentsIntersect = (a, b, pad = LINE_LINE_PAD) => { const aVertical = Math.abs(a.x1 - a.x2) < 0.001; const bVertical = Math.abs(b.x1 - b.x2) < 0.001; if (aVertical && bVertical) { if (Math.abs(a.x1 - b.x1) > pad) return false; const a0 = Math.min(a.y1, a.y2); const a1 = Math.max(a.y1, a.y2); const b0 = Math.min(b.y1, b.y2); const b1 = Math.max(b.y1, b.y2); return a1 >= b0 - pad && b1 >= a0 - pad; } if (!aVertical && !bVertical) { if (Math.abs(a.y1 - b.y1) > pad) return false; const a0 = Math.min(a.x1, a.x2); const a1 = Math.max(a.x1, a.x2); const b0 = Math.min(b.x1, b.x2); const b1 = Math.max(b.x1, b.x2); return a1 >= b0 - pad && b1 >= a0 - pad; } const v = aVertical ? a : b; const h = aVertical ? b : a; const vx = v.x1; const hy = h.y1; const vy0 = Math.min(v.y1, v.y2); const vy1 = Math.max(v.y1, v.y2); const hx0 = Math.min(h.x1, h.x2); const hx1 = Math.max(h.x1, h.x2); return vx >= hx0 - pad && vx <= hx1 + pad && hy >= vy0 - pad && hy <= vy1 + pad; }; const horizontalSegmentTouchesBubble = segment => deals.some(b => { const x0 = Math.min(segment.x1, segment.x2); const x1 = Math.max(segment.x1, segment.x2); const nearestX = Math.max(x0, Math.min(x1, b.x)); return Math.hypot(nearestX - b.x, segment.y1 - SPINE_Y) < b.r + 1; }); deals.forEach(d => { d.x = xScale(d.date); d.r = rScale(d.value); d.defaultLines = wrapName(d.name, NAME_WRAP_W); d.defaultWidth = labelWidth(d.defaultLines, d.value); }); const FIRST_DEAL = d3.least(deals, d => d.x); // ───────────────────────────────────────────── // ABOVE / BELOW ASSIGNMENT // ───────────────────────────────────────────── let toggle = "down"; for (const [, group] of d3.groups(deals, d => +d.date)) { if (group.length === 1) { group[0].side = toggle; } else { group .sort((a, b) => d3.descending(a.value, b.value)) .forEach((d, i) => { d.side = i % 2 === 0 ? "down" : "up"; }); } toggle = toggle === "down" ? "up" : "down"; } // ───────────────────────────────────────────── // CLUSTERS + PREFERRED ROWS // ───────────────────────────────────────────── // Neighboring labels are intentionally staggered into the two closest rows. // This reproduces the Cidara/Worldpay and Clario/JDE Peet's pattern in the SVG. for (const side of ["up", "down"]) { const sideDeals = deals .filter(d => d.side === side) .sort((a, b) => d3.ascending(a.x, b.x)); let cluster = []; const finishCluster = () => { cluster.forEach((d, i) => { d.preferredRow = i % 2; }); cluster = []; }; sideDeals.forEach((d, i) => { if (!cluster.length) { cluster.push(d); return; } const previous = cluster[cluster.length - 1]; const threshold = previous.defaultWidth / 2 + d.defaultWidth / 2 + LABEL_GAP_X + 8; if (d.x - previous.x < threshold) { cluster.push(d); } else { finishCluster(); cluster.push(d); } if (i === sideDeals.length - 1) finishCluster(); }); if (sideDeals.length === 1) finishCluster(); } // ───────────────────────────────────────────── // LABEL CANDIDATES // ───────────────────────────────────────────── const rowOrder = d => { const rows = d.side === "up" ? UP_VALUE_ROWS : DOWN_NAME_ROWS; const preferred = Math.min(d.preferredRow || 0, rows.length - 1); return [preferred, ...d3.range(rows.length).filter(i => i !== preferred)]; }; const makeLabelCandidate = (d, lines, rowIndex, labelX, anchor, mode, shiftCost) => { const width = labelWidth(lines, d.value); const n = lines.length; const firstBaseline = d.side === "up" ? UP_VALUE_ROWS[rowIndex] - n * LINE_H : DOWN_NAME_ROWS[rowIndex]; const valueBaseline = firstBaseline + n * LINE_H; const x0 = anchor === "start" ? labelX : anchor === "end" ? labelX - width : labelX - width / 2; const x1 = anchor === "start" ? labelX + width : anchor === "end" ? labelX : labelX + width / 2; const box = { x0, x1, y0: firstBaseline - FONT * 0.88, y1: valueBaseline + FONT * 0.26 }; if (box.x0 < LABEL_EDGE_PAD || box.x1 > W - LABEL_EDGE_PAD) return null; if (Math.abs((box.x0 + box.x1) / 2 - d.x) > MAX_LABEL_SHIFT + width / 2) return null; if (boxTouchesBubble(box)) return null; return { dealId: d.id, lines, rowIndex, labelX, anchor, mode, firstBaseline, valueBaseline, box, intrinsicScore: Math.abs(rowIndex - (d.preferredRow || 0)) * 24 + rowIndex * 4 + shiftCost + (NAME_WRAP_W - Math.min(NAME_WRAP_W, width)) * 0.03 + Math.max(0, lines.length - 1) * 1.5 }; }; const labelCandidatesFor = d => { const candidates = []; const preferredX = preferredLabelCentreX(d); for (const rowIndex of rowOrder(d)) { for (const wrapWidth of WRAP_WIDTHS) { const lines = wrapName(d.name, wrapWidth); const width = labelWidth(lines, d.value); for (const shift of CENTRE_SHIFTS) { const centre = Math.max( width / 2 + LABEL_EDGE_PAD, Math.min(W - width / 2 - LABEL_EDGE_PAD, preferredX + shift) ); const candidate = makeLabelCandidate( d, lines, rowIndex, centre, "middle", "centre", Math.abs(shift) * 0.45 ); if (candidate && respectsLabelNudge(d, candidate)) candidates.push(candidate); } for (const offset of SIDE_OFFSETS) { const right = makeLabelCandidate( d, lines, rowIndex, preferredX + offset, "start", "right", 10 + offset * 0.35 ); const left = makeLabelCandidate( d, lines, rowIndex, preferredX - offset, "end", "left", 10 + offset * 0.35 ); if (right && respectsLabelNudge(d, right)) candidates.push(right); if (left && respectsLabelNudge(d, left)) candidates.push(left); } } } return candidates; }; // ───────────────────────────────────────────── // LOCAL ORTHOGONAL CONNECTORS // ───────────────────────────────────────────── // Return the boundary of the connector's own target bubble at x. // Do not use the outside envelope of every overlapping bubble: when a // smaller circle sits inside a larger one, the connector must continue // across the larger background circle until it reaches the smaller target. const targetBubbleY = (d, x) => { const dx = Math.max(-d.r, Math.min(d.r, x - d.x)); const dy = Math.sqrt(Math.max(0, d.r * d.r - dx * dx)); return SPINE_Y + (d.side === "up" ? -dy : dy); }; const connectorTargetY = (d, candidate) => d.side === "up" ? candidate.box.y1 + CONNECTOR_TEXT_GAP : candidate.box.y0 - CONNECTOR_TEXT_GAP; const pathFromSegments = segments => { const first = segments[0]; let path = `M${first.x1},${first.y1} L${first.x2},${first.y2}`; for (let i = 1; i < segments.length; i++) { path += ` L${segments[i].x2},${segments[i].y2}`; } return path; }; const routeVariantsFor = (d, candidate) => { const routes = []; const straightTargetY = connectorTargetY(d, candidate); // Match the Illustrator source: a side elbow rises to the shoulder of the // first label line, rather than turning immediately above the bubble. const elbowTargetY = candidate.firstBaseline - ELBOW_LABEL_BASELINE_OFFSET; const labelInset = 5; const cap = d.r * 0.72; // 1. Straight vertical line. It may be slightly left or right of the bubble // centre, as long as it stays inside both the label footprint and bubble cap. const overlap0 = Math.max(d.x - cap, candidate.box.x0 + labelInset); const overlap1 = Math.min(d.x + cap, candidate.box.x1 - labelInset); if (overlap0 <= overlap1) { const straightXs = [ Math.max(overlap0, Math.min(overlap1, d.x)), overlap0, overlap1, Math.max(overlap0, Math.min(overlap1, (candidate.box.x0 + candidate.box.x1) / 2)) ]; for (const x of [...new Set(straightXs.map(v => +v.toFixed(2)))]) { const startY = targetBubbleY(d, x); const hasRoom = d.side === "up" ? straightTargetY <= startY - 1 : straightTargetY >= startY + 1; if (!hasRoom) continue; const segments = [{ x1: x, y1: startY, x2: x, y2: straightTargetY }]; const totalLength = d3.sum(segments, lineLength); if (totalLength <= MAX_CONNECTOR_LENGTH) { routes.push({ kind: "straight", segments, path: pathFromSegments(segments), score: totalLength * 0.08 + Math.abs(x - d.x) * 0.18 }); } } } // 2. Illustrator-style compact elbow. The horizontal run occurs beside the // label, never across the chart, and its length is strictly capped. const boxCentre = (candidate.box.x0 + candidate.box.x1) / 2; let directions; if (candidate.mode === "right") directions = [1]; else if (candidate.mode === "left") directions = [-1]; else if (boxCentre > d.x + 2) directions = [1, -1]; else if (boxCentre < d.x - 2) directions = [-1, 1]; else directions = [1, -1]; for (const dir of directions) { const targetX = dir > 0 ? candidate.box.x0 - CONNECTOR_TEXT_GAP : candidate.box.x1 + CONNECTOR_TEXT_GAP; const anchorOffsets = [0, d.r * 0.18, d.r * 0.35]; for (const offset of anchorOffsets) { const anchorX = d.x + dir * offset; const horizontalRun = Math.abs(targetX - anchorX); if (horizontalRun < 3 || horizontalRun > MAX_ELBOW_RUN) continue; const startY = targetBubbleY(d, anchorX); const hasRoom = d.side === "up" ? elbowTargetY <= startY - 1 : elbowTargetY >= startY + 1; if (!hasRoom) continue; const vertical = { x1: anchorX, y1: startY, x2: anchorX, y2: elbowTargetY }; const horizontal = { x1: anchorX, y1: elbowTargetY, x2: targetX, y2: elbowTargetY }; if (horizontalSegmentTouchesBubble(horizontal)) continue; const segments = [vertical, horizontal]; const totalLength = d3.sum(segments, lineLength); if (totalLength <= MAX_CONNECTOR_LENGTH) { routes.push({ kind: "elbow", segments, path: pathFromSegments(segments), score: 10 + totalLength * 0.09 + horizontalRun * 0.18 + Math.abs(anchorX - d.x) * 0.08 }); } } } return routes; }; const completeCandidatesFor = d => { const complete = []; for (const labelCandidate of labelCandidatesFor(d)) { for (const route of routeVariantsFor(d, labelCandidate)) { complete.push({ ...labelCandidate, route, score: labelCandidate.intrinsicScore + route.score }); } } // Remove nearly identical candidates and keep the best local options. const seen = new Set(); const unique = []; complete .sort((a, b) => d3.ascending(a.score, b.score)) .forEach(candidate => { const key = [ candidate.rowIndex, candidate.anchor, Math.round(candidate.box.x0), Math.round(candidate.box.x1), candidate.route.kind, ...candidate.route.segments.flatMap(segment => [ Math.round(segment.x1), Math.round(segment.y1), Math.round(segment.x2), Math.round(segment.y2) ]) ].join("|"); if (!seen.has(key)) { seen.add(key); unique.push(candidate); } }); return unique.slice(0, MAX_CANDIDATES_PER_DEAL); }; // ───────────────────────────────────────────── // COLLISION TESTS // ───────────────────────────────────────────── const candidateConflicts = (candidate, placed) => { for (const other of placed) { if (boxesOverlap(candidate.box, other.box)) return true; // A connector may not cross another label. if (candidate.route.segments.some(segment => segmentIntersectsBox(segment, other.box) )) return true; // A newly placed label may not sit on top of an existing connector. if (other.route.segments.some(segment => segmentIntersectsBox(segment, candidate.box) )) return true; // Connector paths may not cross or overlap one another. for (const a of candidate.route.segments) { for (const b of other.route.segments) { if (segmentsIntersect(a, b)) return true; } } } return false; }; // ───────────────────────────────────────────── // GLOBAL SIDE LAYOUT // ───────────────────────────────────────────── // This is a small branch-and-bound search. With a normal top-10 chart it is // fast, and unlike a greedy pass it can move an earlier label when that makes // the whole cluster cleaner. const solveSide = side => { const sideDeals = deals .filter(d => d.side === side) .sort((a, b) => d3.ascending(a.x, b.x)); const candidateMap = new Map( sideDeals.map(d => [d.id, completeCandidatesFor(d)]) ); for (const d of sideDeals) { if (!candidateMap.get(d.id).length) { throw new Error(`No local label/connector candidate could be built for "${d.name}".`); } } let best = null; let bestScore = Infinity; let states = 0; const search = (index, placed, score) => { states += 1; if (states > MAX_SEARCH_STATES || score >= bestScore) return; if (index === sideDeals.length) { best = [...placed]; bestScore = score; return; } const d = sideDeals[index]; const candidates = candidateMap.get(d.id); for (const candidate of candidates) { if (candidateConflicts(candidate, placed)) continue; placed.push(candidate); search(index + 1, placed, score + candidate.score); placed.pop(); } }; search(0, [], 0); if (!best) { throw new Error( `The ${side} labels cannot be laid out locally without a collision. ` + `Reduce the number of deals or increase W; the template will not draw long leaders as a fallback.` ); } best.forEach(candidate => { const d = deals.find(item => item.id === candidate.dealId); Object.assign(d, candidate); }); }; solveSide("up"); solveSide("down"); // ───────────────────────────────────────────── // VERTICAL EXPANSION // ───────────────────────────────────────────── // If an upper row approaches the legend, shift the entire plot downward. // Relative label/connector geometry remains unchanged. const highestLabel = d3.min(deals, d => d.box.y0); const topShift = Math.max(0, Math.ceil(LEGEND_CLEAR_Y - highestLabel)); if (topShift > 0) { SPINE_Y += topShift; BRACKET_Y += topShift; deals.forEach(d => { d.firstBaseline += topShift; d.valueBaseline += topShift; d.box.y0 += topShift; d.box.y1 += topShift; d.route.segments.forEach(segment => { segment.y1 += topShift; segment.y2 += topShift; }); d.route.path = pathFromSegments(d.route.segments); }); } const lowestLabel = d3.max(deals, d => d.box.y1); BRACKET_Y = Math.max(BRACKET_Y, Math.ceil(lowestLabel + AXIS_LABEL_GAP)); MONTH_Y = BRACKET_Y + 16; YEAR_Y = MONTH_Y + 14; H = YEAR_Y + 4; svg.attr("viewBox", `0 0 ${W} ${H}`).attr("height", H); // ───────────────────────────────────────────── // SPINE // ───────────────────────────────────────────── const spine = svg.append("g"); const byX = [...deals].sort((a, b) => d3.ascending(a.x, b.x)); byX.forEach((a, i) => { const b = byX[i + 1]; if (!b) return; const x1 = a.x + a.r; const x2 = b.x - b.r; if (x2 - x1 > 1) { spine.append("line") .attr("x1", x1) .attr("y1", SPINE_Y) .attr("x2", x2) .attr("y2", SPINE_Y) .attr("stroke", CLR.ink) .attr("stroke-width", 0.9); } }); // ───────────────────────────────────────────── // BUBBLES + CONNECTORS // ───────────────────────────────────────────── // Draw every bubble first, then draw every connector above the bubble layer. // The route itself already begins on the boundary of its own target bubble, // so no line enters that bubble. Drawing connectors afterward is important // for overlapping circles: another foreground bubble must not hide the // vertical leg of an L-shaped leader. This keeps both legs visible for // Worldpay-style elbows and lets nested labels such as Cidara, Clario and // Pension Insurance connect all the way to their actual target circles. const bubbles = svg.append("g"); [...deals] .sort((a, b) => d3.descending(a.r, b.r) || d3.ascending(a.x, b.x) ) .forEach(d => { bubbles.append("circle") .datum(d) .attr("cx", d.x) .attr("cy", SPINE_Y) .attr("r", d.r) .attr("fill", fillFor(d)) .attr("stroke", CLR.stroke) .attr("stroke-width", 1.6) .style("cursor", "pointer") .on("mouseenter", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip); }); const connectors = svg.append("g") .attr("fill", "none") .attr("stroke", CLR.ink) .attr("stroke-width", 0.9) .attr("stroke-linejoin", "miter") .attr("stroke-linecap", "square") .attr("pointer-events", "none"); deals.forEach(d => { connectors.append("path") .attr("d", d.route.path); }); // ───────────────────────────────────────────── // LABELS // ───────────────────────────────────────────── const labels = svg.append("g").attr("pointer-events", "none"); deals.forEach(d => { const text = labels.append("text") .attr("text-anchor", d.anchor) .attr("fill", CLR.ink); d.lines.forEach((line, i) => { text.append("tspan") .attr("x", d.labelX) .attr("y", d.firstBaseline + i * LINE_H) .attr("font-size", FONT) .attr("font-weight", "bold") .text(line); }); text.append("tspan") .attr("x", d.labelX) .attr("y", d.valueBaseline) .attr("font-size", FONT) .text(fmtVal(d.value)); }); // Optional visual diagnostics while tuning future templates. if (DEBUG_LAYOUT) { const debug = svg.append("g").attr("pointer-events", "none"); deals.forEach(d => { debug.append("rect") .attr("x", d.box.x0) .attr("y", d.box.y0) .attr("width", d.box.x1 - d.box.x0) .attr("height", d.box.y1 - d.box.y0) .attr("fill", "none") .attr("stroke", "magenta") .attr("stroke-width", 0.5); }); } // ───────────────────────────────────────────── // DATE AXIS // ───────────────────────────────────────────── const axis = svg.append("g"); const BRACKET_L = FIRST_DEAL.x; const BRACKET_R = Math.min(W - 5, AXIS_R + 70); const LAST_MONTH_SHIFT_X = 50; axis.append("path") .attr( "d", `M${BRACKET_L},${BRACKET_Y + 4} ` + `L${BRACKET_L},${BRACKET_Y} ` + `L${BRACKET_R},${BRACKET_Y} ` + `L${BRACKET_R},${BRACKET_Y + 4}` ) .attr("fill", "none") .attr("stroke", CLR.bracket) .attr("stroke-width", 1); const months = d3.timeMonths( d0, d3.timeMonth.offset(d3.timeMonth.floor(d1), 1) ); months.slice(1).forEach((month, i) => { const monthIndex = i + 1; const next = d3.timeMonth.offset(month, 1); const midpoint = new Date((+month + +next) / 2); const tickX = xScale(midpoint) + (monthIndex === months.length - 1 ? LAST_MONTH_SHIFT_X : 0); axis.append("line") .attr("x1", tickX) .attr("x2", tickX) .attr("y1", BRACKET_Y) .attr("y2", BRACKET_Y + 4) .attr("stroke", CLR.bracket) .attr("stroke-width", 1); }); months.forEach((month, i) => { const next = d3.timeMonth.offset(month, 1); const midpoint = new Date( (Math.max(+month, +d0) + Math.min(+next, +d3.timeDay.offset(d1, 1))) / 2 ); const monthX = i === 0 ? BRACKET_L : xScale(midpoint) + (i === months.length - 1 ? LAST_MONTH_SHIFT_X : 0); axis.append("text") .attr("x", monthX) .attr("y", MONTH_Y) .attr("text-anchor", "middle") .attr("font-size", FONT) .attr("fill", CLR.gray) .text(d3.timeFormat("%B")(month)); if (i === 0) { axis.append("text") .attr("x", monthX) .attr("y", YEAR_Y) .attr("text-anchor", "middle") .attr("font-size", FONT) .attr("fill", CLR.gray) .text(month.getFullYear()); } }); return chartWrap.node(); }30:[{"id":"bda232ea6d56e2087aa72459e71e2523bdf9b106cbbb627a680c9be96becc4410c2f3a8d0668c9cbdc9d57a814493726ca43de2666d5dcea6b66514474cbe7c8","href":"https://static.observableusercontent.com/files/bda232ea6d56e2087aa72459e71e2523bdf9b106cbbb627a680c9be96becc4410c2f3a8d0668c9cbdc9d57a814493726ca43de2666d5dcea6b66514474cbe7c8","name":"AvenirNextLTPro-Bold.otf","type":"font/otf","lastModified":1784299022369.125,"size":74076},{"id":"f2fba1ff8207f2afb19af12d4b7404a78b89538d74aabf34795a77e795fd13dbff988abab2b795236aa2832867214e5329e6b272bd619e1d84f6696d7fbb0ef4","href":"https://static.observableusercontent.com/files/f2fba1ff8207f2afb19af12d4b7404a78b89538d74aabf34795a77e795fd13dbff988abab2b795236aa2832867214e5329e6b272bd619e1d84f6696d7fbb0ef4","name":"AvenirNextLTPro-Regular.otf","type":"font/otf","lastModified":1784299022369.125,"size":71284},{"id":"9b67424d30dd3851f4dc471adf35ca9896874298731c6d430fdefb4cf6056917ff32592e18534182f14e9958c5ec3f84e04b5890d68bee3cb85e286bef7eab79","href":"https://static.observableusercontent.com/files/9b67424d30dd3851f4dc471adf35ca9896874298731c6d430fdefb4cf6056917ff32592e18534182f14e9958c5ec3f84e04b5890d68bee3cb85e286bef7eab79","name":"top-deals-timeline.csv","type":"text/csv","lastModified":1784299022369.125,"size":2976}] 2d:{"id":"df868535d00e177d","slug":null,"title":"[Template] Timeline Graphic","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-07-17T14:37:02.369Z","update_time":"$D2026-07-20T13:52:55.982Z","view_time":null,"first_public_time":"$D2026-08-10T14:08:24.299Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2b3af34f3056a0a6","login":"pei-data-journalism","name":"PEI Data Journalism","avatar_url":"https://avatars-next.observableusercontent.com/c8d249aadbb928146cc264ede73d584b24449194628ab0242199e6fdd0c019df","tier":"pro_2024"},"version":177,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b444554931c7799","login":"mariam-lobjanidze","name":"Mariam Lobjanidze","avatar_url":"https://avatars-next.observableusercontent.com/fb4d2ff1d9a17900f37ddd75a33b4fbd6a927b32161fae236dd8f686503a3cf9","tier":null}],"members":[{"type":"individual","id":"3b444554931c7799","login":"mariam-lobjanidze","name":"Mariam Lobjanidze","avatar_url":"https://avatars-next.observableusercontent.com/fb4d2ff1d9a17900f37ddd75a33b4fbd6a927b32161fae236dd8f686503a3cf9","tier":null,"role":"editor"},{"type":"team","id":"2b3af34f3056a0a6","login":"pei-data-journalism","name":"PEI Data Journalism","avatar_url":"https://avatars-next.observableusercontent.com/c8d249aadbb928146cc264ede73d584b24449194628ab0242199e6fdd0c019df","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"[Template] Timeline Graphic","cells":[{"id":0,"value":"# [Template] Timeline Graphic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"## Load in data extract","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"// source: https://observablehq.com/@jakoblistabarth/load-custom-fonts \naddFonts = async (fonts) => {\n const fontNames = await Promise.all(fonts.map(async (f) => {\n const fontFace = new FontFace(f.fontFamily, `url(${f.url})`, {\n style: f.style,\n weight: f.weight,\n stretch: f.stretch\n });\n await fontFace.load(); // ← wait for the fetch + decode to finish\n document.fonts.add(fontFace);\n return f;\n }));\n return fontNames;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"fonts = addFonts([\n {\n fontFamily: \"Avenir Next LT Pro\",\n url: await FileAttachment(\"AvenirNextLTPro-Bold.otf\").url(),\n style: \"normal\",\n weight: \"bold\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Avenir Next LT Pro\",\n url: await FileAttachment(\"AvenirNextLTPro-Regular.otf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"## Generate graphic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"await FileAttachment(\"top-deals-timeline.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"viewof uploaded = Inputs.file({ label: \"Deals CSV\", accept: \".csv\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"