chart = { const root = html`

${variables.title}

${variables.subtitle}

`; root.prepend(styles.cloneNode(true)); const maxWidth = Number.isFinite(variables.maxWidth) && variables.maxWidth > 0 ? variables.maxWidth : Infinity; if (Number.isFinite(maxWidth)) root.style.maxWidth = maxWidth + "px"; const stage = root.querySelector(".fw-pop-stage"); const number = new Intl.NumberFormat("en-US"); const rows = data.slice().sort((a, b) => a.rank - b.rank); const percent = value => "+" + value.toFixed(1).replace(/\.0$/, "") + "%"; const populationLabel = value => value >= 1000000 ? (value / 1000000).toFixed(1).replace(/\.0$/, "") + "M" : value / 1000 + "K"; const svgNode = (name, attributes = {}, text) => { const node = document.createElementNS("http://www.w3.org/2000/svg", name); for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value); if (text !== undefined) node.textContent = text; return node; }; let previousWidth = 0; const draw = availableWidth => { const chartWidth = Math.max(1, Math.round(Math.min(availableWidth, maxWidth))); if (chartWidth === previousWidth) return; previousWidth = chartWidth; const compact = chartWidth < variables.compactBreakpoint; const rowHeight = compact ? variables.compactRowHeight : variables.rowHeight; const left = compact ? 4 : variables.marginLeft; const right = variables.marginRight; const top = variables.marginTop; const annotationIndex = Math.max(0, rows.findIndex(d => d.city === variables.annotationCity)); const annotationExtra = compact ? variables.annotationRowExtra : 0; const rowTop = index => top + index * rowHeight + (index > annotationIndex ? annotationExtra : 0); const rowSize = index => rowHeight + (index === annotationIndex ? annotationExtra : 0); const chartHeight = top + rowHeight * rows.length + annotationExtra + variables.marginBottom; const x = value => left + (value - variables.populationDomain[0]) / (variables.populationDomain[1] - variables.populationDomain[0]) * (chartWidth - left - right); const rowY = index => rowTop(index) + (compact ? 37 : rowHeight / 2); const svg = svgNode("svg", {class: "fw-pop-svg", viewBox: `0 0 ${chartWidth} ${chartHeight}`, width: chartWidth, height: chartHeight, "aria-hidden": "true"}); svg.append(svgNode("text", {class: "fw-pop-axis-title", x: left, y: 12}, "Population")); const ticks = compact ? variables.compactPopulationTicks : variables.populationTicks; for (const value of ticks) { svg.append(svgNode("line", {class: "fw-pop-grid-line", x1: x(value), x2: x(value), y1: 38, y2: chartHeight - variables.marginBottom})); svg.append(svgNode("text", {class: "fw-pop-axis-label", x: x(value), y: 29, "text-anchor": "middle"}, populationLabel(value))); } const rowGroups = rows.map((d, index) => { const y = rowY(index); const group = svgNode("g", {class: "fw-pop-row" + (d.city === variables.highlightCity ? " is-highlighted" : ""), "data-city": d.city}); group.append(svgNode("rect", {class: "fw-pop-row-bg", x: 0, y: rowTop(index), width: chartWidth, height: rowSize(index)})); group.append(svgNode("line", {class: "fw-pop-row-guide", x1: left, x2: chartWidth - 2, y1: y, y2: y})); group.append(svgNode("text", {class: "fw-pop-city", x: 0, y: compact ? y - 19 : y, dy: "0.35em"}, `${d.city}, ${d.state}`)); const start = x(d.population2020); const end = x(d.population2025); const head = Math.min(6, Math.max(2.5, (end - start) * 0.4)); group.append(svgNode("path", {class: "fw-pop-arrow", d: `M${start},${y}H${end}M${end-head},${y-head}L${end},${y}L${end-head},${y+head}`})); group.append(svgNode("text", {class: "fw-pop-rate", x: end + 9, y, dy: "0.35em"}, percent(d.percentChange))); if (index === annotationIndex) { const direction = compact ? 1 : -1; const leaderY = y + direction * 10; const labelY = y + (compact ? 24 : -15); group.append(svgNode("path", {class: "fw-pop-annotation-leader", d: `M${start},${y + direction * 4}V${leaderY}H${start - 5}`})); group.append(svgNode("path", {class: "fw-pop-annotation-leader", d: `M${end},${y + direction * 4}V${leaderY}H${end + 5}`})); group.append(svgNode("text", {class: "fw-pop-annotation", x: start - 6, y: labelY, "text-anchor": "end"}, compact ? variables.compactAnnotationStartLabel : variables.annotationStartLabel)); group.append(svgNode("text", {class: "fw-pop-annotation", x: end + 6, y: labelY, "text-anchor": "start"}, compact ? variables.compactAnnotationEndLabel : variables.annotationEndLabel)); } svg.append(group); return group; }); const tooltip = html``; const tooltipId = "fw-pop-tip-" + Math.random().toString(36).slice(2); tooltip.id = tooltipId; stage.replaceChildren(svg, tooltip); let pinnedIndex = null; let activeIndex = null; const clear = () => { tooltip.hidden = true; activeIndex = null; rowGroups.forEach(group => group.classList.remove("is-active")); }; const position = (index, event) => { const bounds = stage.getBoundingClientRect(); const hasPointer = event && Number.isFinite(event.clientX) && event.type !== "focus"; const anchorX = hasPointer ? event.clientX - bounds.left : x(rows[index].population2025); const anchorY = hasPointer ? event.clientY - bounds.top : rowY(index); const tooltipWidth = tooltip.offsetWidth; const tooltipHeight = tooltip.offsetHeight; let tooltipX = anchorX + 14; if (tooltipX + tooltipWidth > chartWidth - 6) tooltipX = anchorX - tooltipWidth - 14; tooltipX = Math.max(6, Math.min(tooltipX, chartWidth - tooltipWidth - 6)); let tooltipY = anchorY + 14; if (tooltipY + tooltipHeight > chartHeight - 4) tooltipY = anchorY - tooltipHeight - 14; tooltip.style.left = tooltipX + "px"; tooltip.style.top = Math.max(0, tooltipY) + "px"; }; const show = (index, event) => { const d = rows[index]; if (activeIndex !== index) { tooltip.replaceChildren(html`

April 2020 base: ${number.format(d.population2020)}
July 2025 estimate: ${number.format(d.population2025)}
Residents added: +${number.format(d.change)}
Population growth: ${percent(d.percentChange)}
Growth rank: ${d.rank} of 50

`); activeIndex = index; rowGroups.forEach((group, groupIndex) => group.classList.toggle("is-active", groupIndex === index)); } tooltip.hidden = false; position(index, event); }; rows.forEach((d, index) => { const hit = document.createElement("button"); hit.type = "button"; hit.className = "fw-pop-hit"; hit.style.top = rowTop(index) + "px"; hit.style.height = rowSize(index) + "px"; hit.setAttribute("aria-label", `${d.city}, ${d.state}. April 2020 base: ${number.format(d.population2020)}. July 2025 estimate: ${number.format(d.population2025)}. Residents added: ${number.format(d.change)}. Growth: ${percent(d.percentChange)}. Growth rank: ${d.rank} of the 50 largest US cities. Show details.`); hit.setAttribute("aria-describedby", tooltipId); hit.addEventListener("pointerenter", event => { if (pinnedIndex === null) show(index, event); }); hit.addEventListener("pointermove", event => { if (pinnedIndex === null) show(index, event); }); hit.addEventListener("pointerleave", () => { if (pinnedIndex === null) clear(); }); hit.addEventListener("focus", event => show(index, event)); hit.addEventListener("blur", () => { if (pinnedIndex === null) clear(); }); hit.addEventListener("click", event => { if (pinnedIndex === index) { pinnedIndex = null; clear(); } else { pinnedIndex = index; show(index, event); } }); hit.addEventListener("keydown", event => { if (event.key === "Escape") { pinnedIndex = null; clear(); } }); stage.append(hit); }); }; draw(width); const observer = new ResizeObserver(entries => { const availableWidth = entries[0].contentRect.width; if (availableWidth > 0) draw(availableWidth); }); observer.observe(root); invalidation.then(() => observer.disconnect()); return root; }