chart = { function buildBusinessChart({data, theme, variables, styles, initialWidth = 900, invalidation}) { const root = document.createElement("figure"); root.className = "tl-business"; root.style.setProperty("--tl-font", theme.fontFamily); root.style.setProperty("--tl-ink", theme.colors.gray.dark); root.style.setProperty("--tl-secondary", theme.colors.blue.dark); root.style.setProperty("--tl-guide", theme.colors.gray.light); root.style.setProperty("--tl-likely", theme.colors.green.light); root.style.setProperty("--tl-unlikely", theme.colors.blue.base); root.innerHTML = `

Likely to hire an employeeUnlikely to hire anyone

Hover or tap to explore each year.

`; const style = document.createElement("style"); style.textContent = styles; root.prepend(style); root.querySelector("h2").textContent = variables.title; root.querySelector(".tl-subtitle").textContent = variables.subtitle; const source = root.querySelector(".tl-source"); source.append("Source: Technical.ly analysis of "); const sourceLink = document.createElement("a"); sourceLink.href = variables.sourceUrl; sourceLink.target = "_blank"; sourceLink.rel = "noopener"; sourceLink.textContent = "US Census Bureau Business Formation Statistics"; source.append(sourceLink, ", national totals, not seasonally adjusted, monthly filings summed by calendar year"); // Keep the copied share separate from the calculated complementary share. const series = data.map(d => ({...d, unlikelyShare: Math.round((100 - d.likelyShare) * 10) / 10})); const pct = value => `${value.toFixed(1)}%`; const formatCount = value => new Intl.NumberFormat("en-US").format(value); const table = document.createElement("table"); table.className = "tl-sr-only"; table.innerHTML = `Annual US business applications, 2005–2025. Shares are percentages of all applications.YearLikely to hire an employee, percentUnlikely to hire anyone, percentLikely to hire, applicationsUnlikely to hire, applicationsTotal applications${series.map(d => `${d.year}${pct(d.likelyShare)}${pct(d.unlikelyShare)}${d.likely}${d.unlikely}${d.total}`).join("")}`; root.append(table); const stage = root.querySelector(".tl-stage"); const tooltip = root.querySelector(".tl-tooltip"); let selected = 0; let pinned = false; let lastWidth = 0; const ns = "http://www.w3.org/2000/svg"; const el = (name, attrs = {}, text) => { const node = document.createElementNS(ns, name); for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, value); if (text !== undefined) node.textContent = text; return node; }; function render(requestedWidth) { const W = Math.max(200, Math.round(requestedWidth)); if (W === lastWidth) return; lastWidth = W; pinned = false; tooltip.hidden = true; tooltip.classList.remove("is-pinned"); const narrow = W < 500; const H = narrow ? 326 : Math.max(350, Math.min(460, Math.round(W * 0.47))); const margin = {top: 30, right: 12, bottom: 38, left: narrow ? 46 : 52}; const plotRight = W - margin.right; const plotBottom = H - margin.bottom; const plotWidth = plotRight - margin.left; const plotHeight = plotBottom - margin.top; const firstYear = series[0].year; const lastYear = series.at(-1).year; const x = year => margin.left + (year - firstYear) / (lastYear - firstYear) * plotWidth; const y = share => plotBottom - share / 100 * plotHeight; const svg = el("svg", {viewBox: `0 0 ${W} ${H}`, width: W, height: H, class: "tl-plot", role: "group", "aria-label": "100% stacked area chart of business application shares by year"}); svg.append(el("desc", {}, "The share likely to hire fell from 59.2% in 2005 to 30.1% in 2025. Focus the chart and use the left and right arrow keys to explore each year. A table with all values follows the chart.")); svg.append(el("text", {x: margin.left, y: 15, class: "tl-axis-title"}, "Share of all US business applications")); const boundary = series.map(d => `${x(d.year)},${y(d.likelyShare)}`); svg.append(el("path", {d: `M${margin.left},${margin.top}H${plotRight}L${boundary.slice().reverse().join("L")}Z`, fill: theme.colors.blue.base, class: "tl-area-unlikely"})); svg.append(el("path", {d: `M${margin.left},${plotBottom}L${boundary.join("L")}L${plotRight},${plotBottom}Z`, fill: theme.colors.green.light, class: "tl-area-likely"})); const grid = el("g", {class: "tl-grid", "aria-hidden": "true"}); for (const share of [0, 25, 50, 75, 100]) { grid.append(el("line", {x1: margin.left, x2: plotRight, y1: y(share), y2: y(share), stroke: "#FFFFFF", "stroke-opacity": share === 0 || share === 100 ? 0 : 0.38, "stroke-width": 1})); grid.append(el("text", {x: margin.left - 9, y: y(share), dy: "0.35em", "text-anchor": "end", class: "tl-tick"}, `${share}%`)); } svg.append(grid); svg.append(el("path", {d: `M${boundary.join("L")}`, fill: "none", stroke: theme.colors.blue.deep, "stroke-width": 2.25, "stroke-linejoin": "round", "stroke-linecap": "round"})); const xTicks = W < 340 ? [2005, 2015, 2025] : [2005, 2010, 2015, 2020, 2025]; for (const year of xTicks) { svg.append(el("text", {x: x(year), y: plotBottom + 24, "text-anchor": year === firstYear ? "start" : year === lastYear ? "end" : "middle", class: "tl-tick"}, year)); } const annotations = el("g", {class: "tl-annotations", "pointer-events": "none", "aria-hidden": "true"}); for (const [index, anchor, offset] of [[0, "start", 10], [series.length - 1, "end", -10]]) { const d = series[index]; const labelEndYear = Math.min(lastYear, firstYear + (10 + (W >= 600 ? 120 : 50)) / plotWidth * (lastYear - firstYear)); const labelIndex = Math.min(series.length - 2, Math.floor(labelEndYear - firstYear)); const labelFraction = labelEndYear - series[labelIndex].year; const edgeShare = series[labelIndex].likelyShare + labelFraction * (series[labelIndex + 1].likelyShare - series[labelIndex].likelyShare); const safeShare = index === 0 ? Math.min(edgeShare, ...series.slice(0, labelIndex + 1).map(row => row.likelyShare)) : d.likelyShare; const label = el("text", {x: x(d.year) + offset, y: y(safeShare) + 25, "text-anchor": anchor, class: "tl-endpoint", fill: theme.colors.blue.deep}); if (W >= 600) { label.textContent = `${pct(d.likelyShare)} in ${d.year}`; } else { label.append(el("tspan", {x: x(d.year) + offset}, pct(d.likelyShare)), el("tspan", {x: x(d.year) + offset, dy: 18, class: "tl-endpoint-year"}, d.year)); } annotations.append(label); } if (W >= 640) { const labelX = margin.left + plotWidth * 0.53; annotations.append(el("text", {x: labelX, y: y(77), "text-anchor": "middle", class: "tl-series-label", fill: "#FFFFFF"}, "Unlikely to hire anyone")); annotations.append(el("text", {x: labelX, y: y(17), "text-anchor": "middle", class: "tl-series-label", fill: theme.colors.blue.deep}, "Likely to hire an employee")); } svg.append(annotations); const cursor = el("g", {class: "tl-cursor", "pointer-events": "none", visibility: "hidden", "aria-hidden": "true"}); const cursorLine = el("line", {y1: margin.top, y2: plotBottom, stroke: theme.colors.blue.deep, "stroke-width": 1.3, "stroke-dasharray": "3 3"}); const cursorDot = el("circle", {r: 4.5, fill: "#FFFFFF", stroke: theme.colors.blue.deep, "stroke-width": 2}); cursor.append(cursorLine, cursorDot); svg.append(cursor); const hit = el("rect", {x: margin.left, y: margin.top, width: plotWidth, height: plotHeight, fill: "transparent", tabindex: 0, role: "slider", "aria-label": "Explore yearly business application shares; use left and right arrows", "aria-valuemin": firstYear, "aria-valuemax": lastYear, "aria-valuenow": series[selected].year, "aria-valuetext": `${series[selected].year}: ${formatCount(series[selected].unlikely)} applications unlikely to hire (${pct(series[selected].unlikelyShare)}); ${formatCount(series[selected].likely)} likely to hire (${pct(series[selected].likelyShare)}); ${formatCount(series[selected].total)} total applications`, class: "tl-hit"}); svg.append(hit); stage.querySelector("svg")?.remove(); stage.prepend(svg); function hide() { tooltip.hidden = true; cursor.setAttribute("visibility", "hidden"); pinned = false; tooltip.classList.remove("is-pinned"); } function show(index) { selected = Math.max(0, Math.min(series.length - 1, index)); const d = series[selected]; hit.setAttribute("aria-valuenow", d.year); hit.setAttribute("aria-valuetext", `${d.year}: ${formatCount(d.unlikely)} applications unlikely to hire (${pct(d.unlikelyShare)}); ${formatCount(d.likely)} likely to hire (${pct(d.likelyShare)}); ${formatCount(d.total)} total applications`); cursorLine.setAttribute("x1", x(d.year)); cursorLine.setAttribute("x2", x(d.year)); cursorDot.setAttribute("cx", x(d.year)); cursorDot.setAttribute("cy", y(d.likelyShare)); cursor.setAttribute("visibility", "visible"); tooltip.innerHTML = `${d.year}

Unlikely to hire anyone${formatCount(d.unlikely)}

Likely to hire an employee${formatCount(d.likely)}

Total applications${formatCount(d.total)}

`; tooltip.hidden = false; tooltip.classList.toggle("is-pinned", pinned); tooltip.style.width = `${Math.min(310, W - 16)}px`; const tipW = tooltip.getBoundingClientRect().width; const tipH = tooltip.getBoundingClientRect().height; let tipX = x(d.year) + 14; if (tipX + tipW > W - 8) tipX = x(d.year) - tipW - 14; tooltip.style.left = `${Math.max(8, Math.min(W - tipW - 8, tipX))}px`; tooltip.style.top = `${Math.max(32, Math.min(H - tipH - 12, y(d.likelyShare) - tipH - 14))}px`; tooltip.querySelector("button").addEventListener("click", event => { event.stopPropagation(); hit.focus({preventScroll: true}); hide(); }); } function indexFromEvent(event) { const rect = svg.getBoundingClientRect(); const svgX = (event.clientX - rect.left) * W / rect.width; return Math.round((svgX - margin.left) / plotWidth * (series.length - 1)); } hit.addEventListener("pointermove", event => { if (!pinned && event.pointerType !== "touch") show(indexFromEvent(event)); }); hit.addEventListener("pointerleave", () => { if (!pinned && document.activeElement !== hit) hide(); }); hit.addEventListener("click", event => { const index = Math.max(0, Math.min(series.length - 1, indexFromEvent(event))); if (pinned && index === selected) hide(); else { pinned = true; show(index); } }); hit.addEventListener("focus", () => show(selected)); hit.addEventListener("blur", event => { if (!pinned && !tooltip.contains(event.relatedTarget)) hide(); }); hit.addEventListener("keydown", event => { let next; if (event.key === "ArrowRight" || event.key === "ArrowUp") next = selected + 1; else if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = selected - 1; else if (event.key === "Home") next = 0; else if (event.key === "End") next = series.length - 1; else if (event.key === "Escape") { event.preventDefault(); hide(); return; } else if (event.key === "Enter" || event.key === " ") { event.preventDefault(); pinned = !pinned; show(selected); return; } else return; event.preventDefault(); show(next); }); } render(initialWidth); const observer = new ResizeObserver(entries => { const entry = entries[0]; if (entry.contentRect.width > 0) render(entry.contentRect.width); }); observer.observe(root); invalidation?.then(() => observer.disconnect()); return root; } return buildBusinessChart({data, theme, variables, styles, initialWidth: width, invalidation}); }