chart = { const root = document.createElement("figure"); root.className = "tl-federal"; root.setAttribute("aria-label", settings.title); root.prepend(styles.cloneNode(true)); const add = (tag, className, text, parent = root) => { const node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; parent.append(node); return node; }; const heading = add("div", "tl-heading"); if (settings.showLogo) { const logo = add("img", "tl-logo", null, heading); logo.src = settings.logoUrl; logo.alt = "Technical.ly"; logo.width = theme.header.logoSize; logo.height = theme.header.logoSize; } add("h2", "tl-title", settings.title, heading); add("p", "tl-subtitle", settings.subtitle); const legend = add("div", "tl-legend"); legend.setAttribute("aria-label", "Federal agency and award status"); for (const agency of ["EDA", "NSF", "SBA"]) { const item = add("span", "tl-legend-item", null, legend); const swatch = add("span", "tl-swatch", null, item); swatch.style.background = settings.agencyColors[agency]; swatch.setAttribute("aria-hidden", "true"); add("span", "", agency, item); } const canceledKey = add("span", "tl-legend-item", null, legend); const hatchKey = add("span", "tl-swatch tl-canceled-swatch", null, canceledKey); hatchKey.setAttribute("aria-hidden", "true"); add("span", "", "Announced, then canceled", canceledKey); const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); svg.classList.add("tl-plot"); svg.setAttribute("role", "group"); svg.setAttribute("aria-label", "Ten award rounds from 2021 through 2026. Amounts in dollars."); root.append(svg); const tooltip = add("div", "tl-tooltip"); tooltip.hidden = true; tooltip.setAttribute("role", "tooltip"); const uid = `tl-federal-${Math.random().toString(36).slice(2, 10)}`; tooltip.id = `${uid}-tip`; const tipProgram = add("div", "tl-tip-program", "", tooltip); const tipDate = add("div", "tl-tip-date", "", tooltip); const tipAmount = add("div", "tl-tip-amount", "", tooltip); const tipNote = add("div", "tl-tip-note", "", tooltip); const close = add("button", "tl-tip-close", "×", tooltip); close.type = "button"; close.setAttribute("aria-label", "Close award details"); close.hidden = true; const source = add("figcaption", "tl-source", settings.sourcePrefix); settings.sources.forEach((d, i) => { if (i) source.append(document.createTextNode(" · ")); const a = add("a", "", d.label, source); a.href = d.url; a.target = "_blank"; a.rel = "noopener"; }); const rows = data.map(d => ({...d, time: Date.parse(`${d.date}T00:00:00Z`)})).sort((a, b) => a.time - b.time); const dollars = n => n >= 1000 ? `$${n / 1000}B` : `$${n}M`; const dateFormat = new Intl.DateTimeFormat("en-US", {month: "short", day: "numeric", year: "numeric", timeZone: "UTC"}); let active = null; let pinned = false; let disposed = false; let lastWidth = 0; let frame = 0; let restoringFocus = false; function hide() { tooltip.hidden = true; pinned = false; close.hidden = true; tooltip.classList.remove("is-pinned"); root.querySelectorAll(".tl-bar.is-active").forEach(g => g.classList.remove("is-active")); active = null; } function placeTooltip(mark) { const bounds = root.getBoundingClientRect(); const b = mark.getBoundingClientRect(); const w = tooltip.offsetWidth; const h = tooltip.offsetHeight; const x = Math.max(8, Math.min(bounds.width - w - 8, b.x - bounds.x + b.width / 2 - w / 2)); const above = b.y - bounds.y - h - 10; const below = b.y - bounds.y + Math.min(b.height, 20) + 10; const y = Math.max(0, Math.min(root.offsetHeight - h, above >= 0 ? above : below)); tooltip.style.left = `${x}px`; tooltip.style.top = `${y}px`; } function show(d, mark, pin = false) { if (pinned && !pin) return; active = d.id; pinned = pin; tipProgram.textContent = d.program; tipDate.textContent = `${dateFormat.format(d.time)} · ${d.agency}`; tipAmount.textContent = `${dollars(d.amount)} · ${d.recipients}`; tipNote.textContent = d.note; tipNote.hidden = !d.note; close.hidden = !pin; tooltip.classList.toggle("is-pinned", pin); tooltip.hidden = false; root.querySelectorAll(".tl-bar").forEach(g => g.classList.toggle("is-active", g.dataset.id === active)); placeTooltip(mark); } close.addEventListener("click", () => { const focused = root.querySelector(`.tl-bar[data-id="${active}"]`); if (focused) focused.focus({preventScroll: true}); hide(); }); root.addEventListener("pointerdown", event => { if (!event.target.closest(".tl-bar, .tl-tooltip")) hide(); }); root.addEventListener("pointerleave", () => { if (!pinned) hide(); }); root.addEventListener("keydown", event => { if (event.key === "Escape") { event.preventDefault(); hide(); } }); root.addEventListener("focusout", event => { if (!pinned && !root.contains(event.relatedTarget)) hide(); }); function render(w) { const focusedId = root.querySelector(".tl-bar:focus")?.dataset.id; const shownId = active; const wasPinned = pinned; hide(); svg.replaceChildren(); const compact = w < 500; const narrow = w < 360; const margin = {top: compact ? 67 : 53, right: 10, bottom: 32, left: narrow ? 50 : 60}; const plotW = w - margin.left - margin.right; const plotH = compact ? settings.compactPlotHeight : settings.plotHeight; const h = margin.top + plotH + margin.bottom; const bottom = margin.top + plotH; svg.setAttribute("viewBox", `0 0 ${w} ${h}`); svg.setAttribute("width", w); svg.setAttribute("height", h); const s = (tag, attrs, text, parent = svg) => { const node = document.createElementNS(ns, tag); for (const [key, value] of Object.entries(attrs || {})) node.setAttribute(key, value); if (text != null) node.textContent = text; parent.append(node); return node; }; s("desc", {}, "Each bar is one announced award round, colored by federal agency. Build Back Better Regional Challenge reached $1 billion in 2022. One-time American Rescue Plan money funded the first three bars. The $210 million Tech Hubs slate in 2025 was canceled. Dates remain in chronological order; closely spaced bars are nudged apart. Focus or tap a bar for its program, date, amount, recipients and note."); const defs = s("defs"); const pattern = s("pattern", {id: `${uid}-hatch`, width: 6, height: 6, patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)"}, null, defs); s("rect", {width: 6, height: 6, fill: "white"}, null, pattern); s("line", {x1: 0, y1: 0, x2: 0, y2: 6, stroke: settings.agencyColors.EDA, "stroke-width": 2}, null, pattern); const start = Date.UTC(settings.firstYear, 0, 1); const end = Date.UTC(settings.lastYear + 1, 0, 1); const x = time => margin.left + (time - start) / (end - start) * plotW; const y = amount => bottom - amount / settings.yMax * plotH; const fontSize = compact ? 12 : 14; const barW = Math.max(settings.minBarWidth, Math.min(settings.maxBarWidth, plotW / 36)); const gap = compact ? settings.compactBarGap : settings.barGap; const spacing = barW + gap; // Isotonic packing: the closest possible chronological positions with no overlap. const blocks = []; rows.forEach((d, i) => { blocks.push({first: i, last: i, sum: x(d.time) - i * spacing, count: 1}); while (blocks.length > 1) { const b = blocks[blocks.length - 1]; const a = blocks[blocks.length - 2]; if (a.sum / a.count <= b.sum / b.count) break; blocks.splice(-2, 2, {first: a.first, last: b.last, sum: a.sum + b.sum, count: a.count + b.count}); } }); const positions = []; blocks.forEach(b => { for (let i = b.first; i <= b.last; i++) positions[i] = b.sum / b.count + i * spacing; }); for (const tick of settings.yTicks) { s("line", {x1: margin.left, x2: w - margin.right, y1: y(tick), y2: y(tick), stroke: tick === 0 ? theme.colors.gray.medium : theme.colors.gray.light, "stroke-width": 1}); s("text", {x: margin.left - 8, y: y(tick) + 4, "text-anchor": "end", "font-size": fontSize}, tick === 0 ? "$0" : dollars(tick)); } for (let year = settings.firstYear; year <= settings.lastYear; year++) { const left = x(Date.UTC(year, 0, 1)); const right = x(Date.UTC(year + 1, 0, 1)); s("line", {x1: left, x2: left, y1: bottom, y2: bottom + 5, stroke: theme.colors.gray.medium}); s("text", {x: (left + right) / 2, y: bottom + 22, "text-anchor": "middle", "font-size": fontSize}, year); } const arpX = rows.map((d, i) => d.arp ? positions[i] : null).filter(v => v != null); const ax1 = Math.min(...arpX) - barW / 2; const ax2 = Math.max(...arpX) + barW / 2; const bracketY = margin.top - 15; s("path", {d: `M${ax1},${bracketY + 6}V${bracketY}H${ax2}V${bracketY + 6}`, fill: "none", stroke: theme.colors.gray.medium, "stroke-width": 1}); const arpLines = compact ? settings.annotations.arpCompact : [settings.annotations.arp]; const arpLabel = s("text", {x: (ax1 + ax2) / 2, y: bracketY - 8 - (arpLines.length - 1) * 13, "text-anchor": "middle", "font-size": compact ? 10 : 11}); arpLines.forEach((line, i) => s("tspan", {x: (ax1 + ax2) / 2, dy: i ? 13 : 0}, line, arpLabel)); let arpBox = arpLabel.getBBox(); const shift = Math.max(0, 2 - arpBox.x) - Math.max(0, arpBox.x + arpBox.width - w + 2); if (shift) arpLabel.setAttribute("transform", `translate(${shift},0)`); const marks = []; const bars = []; rows.forEach((d, i) => { const px = positions[i]; const top = y(d.amount); bars.push({x: px - barW / 2, y: top, width: barW, height: bottom - top}); const g = s("g", { class: "tl-bar", role: "button", tabindex: 0, "data-id": d.id, "aria-describedby": tooltip.id, "aria-label": `${d.program}. ${dateFormat.format(d.time)}. ${d.agency}. ${dollars(d.amount)}. ${d.recipients}. ${d.note}` }); g.dataset.originalDate = d.date; g.dataset.nudge = (px - x(d.time)).toFixed(2); s("rect", { class: "tl-mark", x: px - barW / 2, y: top, width: barW, height: bottom - top, rx: Math.min(2, barW / 4), fill: d.canceled ? `url(#${uid}-hatch)` : settings.agencyColors[d.agency], stroke: d.canceled ? settings.agencyColors[d.agency] : "none", "stroke-width": d.canceled ? 1 : 0 }, null, g); s("rect", { x: px - (barW + gap - 1) / 2, y: Math.min(top, bottom - 32), width: barW + gap - 1, height: Math.max(32, bottom - top), fill: "transparent" }, null, g); g.addEventListener("pointerenter", event => { if (event.pointerType !== "touch") show(d, g); }); g.addEventListener("pointerleave", () => { if (!pinned && active === d.id) hide(); }); g.addEventListener("focus", () => { if (!restoringFocus) show(d, g); }); g.addEventListener("click", event => { event.stopPropagation(); if (pinned && active === d.id) hide(); else show(d, g, true); }); g.addEventListener("keydown", event => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); if (pinned && active === d.id) hide(); else show(d, g, true); } if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); hide(); marks[(i + (event.key === "ArrowRight" ? 1 : -1) + rows.length) % rows.length].focus(); } }); marks.push(g); }); const intersects = (a, b, pad = 3) => a.x < b.x + b.width + pad && a.x + a.width + pad > b.x && a.y < b.y + b.height + pad && a.y + a.height + pad > b.y; const occupied = []; rows.map((d, i) => ({d, i})).sort((a, b) => Number(!!a.d.canceled) - Number(!!b.d.canceled) || b.d.amount - a.d.amount).forEach(({d, i}) => { const lines = d.canceled ? (compact ? [dollars(d.amount), settings.annotations.canceled] : [`${dollars(d.amount)}, ${settings.annotations.canceled}`]) : [dollars(d.amount)]; const lineH = fontSize + 3; let labelY = y(d.amount) - 8 - (lines.length - 1) * lineH; let labelX = positions[i]; const anchor = d.canceled ? "start" : "middle"; const label = s("text", {class: "tl-value", "data-id": d.id, x: labelX, y: labelY, "text-anchor": anchor, "font-size": fontSize}); lines.forEach((line, j) => s("tspan", {x: labelX, dy: j ? lineH : 0}, line, label)); if (d.canceled) { const amountWidth = label.querySelector("tspan").getSubStringLength(0, dollars(d.amount).length); labelX = Math.min(positions[i] - amountWidth / 2, w - label.getBBox().width - 2); label.setAttribute("x", labelX); label.querySelectorAll("tspan").forEach(t => t.setAttribute("x", labelX)); } let box = label.getBBox(); let dx = 0; let placed = false; const step = Math.max(4, barW / 3); for (let lane = 0; lane < 30 && !placed; lane++) { box = label.getBBox(); const offsets = d.canceled ? [0, step, step * 2, step * 3] : [0, -step, step, -step * 2, step * 2, -step * 3, step * 3, -step * 4, step * 4, -step * 5, step * 5]; for (const offset of offsets) { const candidate = {x: box.x + offset, y: box.y, width: box.width, height: box.height}; if (candidate.x < margin.left - 12 || candidate.x + candidate.width > w - 2) continue; if (occupied.some(b => intersects(candidate, b))) continue; if (bars.some((b, j) => i !== j && intersects(candidate, b, 2))) continue; dx = offset; placed = true; break; } if (!placed) { labelY -= lineH + 2; label.setAttribute("y", labelY); } } if (dx) label.setAttribute("transform", `translate(${dx},0)`); box = label.getBBox(); occupied.push({x: box.x + dx, y: box.y, width: box.width, height: box.height}); }); restoringFocus = true; if (focusedId) root.querySelector(`.tl-bar[data-id="${focusedId}"]`)?.focus({preventScroll: true}); restoringFocus = false; if (shownId) { const i = rows.findIndex(d => d.id === shownId); if (i >= 0) show(rows[i], marks[i], wasPinned); } } function schedule(w) { if (disposed || w < 180 || Math.abs(w - lastWidth) < 0.5) return; lastWidth = w; cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { if (!disposed) render(w); }); } const observer = new ResizeObserver(entries => schedule(entries[0].contentRect.width)); observer.observe(root); document.fonts.ready.then(() => { if (!disposed && root.isConnected) render(root.getBoundingClientRect().width); }); invalidation.then(() => { disposed = true; observer.disconnect(); cancelAnimationFrame(frame); }); return root; }