// 01 · The Spectrum function TabSpectrum() { const data = window.ownershipTimeline; const [hoverYear, setHoverYear] = React.useState(null); // Chart geometry const W = 1140, H = 380, padL = 56, padR = 56, padT = 28, padB = 40; const innerW = W - padL - padR, innerH = H - padT - padB; const yearMin = 1934, yearMax = 2024; const xs = (y) => padL + ((y - yearMin) / (yearMax - yearMin)) * innerW; // Y scales const ownerMax = Math.max(...data.map(d => d.owners)); const ownerMin = Math.min(...data.map(d => d.owners)); const ysOwners = (v) => padT + (1 - (v - 0) / (ownerMax * 1.1)) * innerH; const hhiMax = Math.max(...data.map(d => d.hhi)); const ysHhi = (v) => padT + (1 - (v - 0) / (hhiMax * 1.15)) * innerH; // Build paths const ownerPath = data.map((d, i) => `${i === 0 ? 'M' : 'L'}${xs(d.year)},${ysOwners(d.owners)}`).join(' '); const ownerArea = ownerPath + ` L${xs(data[data.length - 1].year)},${ysOwners(0)} L${xs(data[0].year)},${ysOwners(0)} Z`; const hhiPath = data.map((d, i) => `${i === 0 ? 'M' : 'L'}${xs(d.year)},${ysHhi(d.hhi)}`).join(' '); // Gridlines const ownerTicks = [0, 1000, 2000, 3000, 4000, 5000]; const hhiTicks = [0, 1000, 2000, 3000, 4000]; const decadeTicks = [1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020]; // Hover const hovered = hoverYear ? data.find(d => d.year === hoverYear) : null; const handleMouseMove = (e) => { const svg = e.currentTarget; const rect = svg.getBoundingClientRect(); const svgX = ((e.clientX - rect.left) / rect.width) * W; const year = Math.round(yearMin + ((svgX - padL) / innerW) * (yearMax - yearMin)); const clamped = Math.max(yearMin, Math.min(yearMax, year)); const closest = data.reduce((best, d) => Math.abs(d.year - clamped) < Math.abs(best.year - clamped) ? d : best, data[0]); setHoverYear(closest.year); }; // Annotations const peakData = data.reduce((best, d) => d.owners > best.owners ? d : best, data[0]); const amfmData = data.find(d => d.year === 2000); // Market sparklines const sparkMarkets = [ { name: 'New York', data: data.filter(d => d.year >= 1990 && d.year <= 2010) }, { name: 'Los Angeles', data: data.filter(d => d.year >= 1990 && d.year <= 2010) }, { name: 'Chicago', data: data.filter(d => d.year >= 1990 && d.year <= 2010) }, { name: 'Dallas', data: data.filter(d => d.year >= 1990 && d.year <= 2010) }, { name: 'Phoenix', data: data.filter(d => d.year >= 1990 && d.year <= 2010) }, ]; return (
{/* Stat block */}
{window.SPECTRUM_STATS.map((s, i) => (
{s.pulse && ( )}
{s.label}
{s.value}
{s.sub}
))}
{/* Main chart */}
Broadcast station owners vs. market concentration (HHI), 1934–2024
Owner count (blue, left axis) · Herfindahl-Hirschman Index (red, right axis)
Owners HHI
setHoverYear(null)}> {/* Horizontal gridlines */} {ownerTicks.map(v => ( ))} {/* Left axis labels (owners) */} {ownerTicks.map(v => ( {v === 0 ? '0' : (v / 1000).toFixed(0) + 'k'} ))} {/* Right axis labels (HHI) */} {hhiTicks.map(v => ( {v === 0 ? '0' : v.toLocaleString()} ))} {/* Decade tick marks */} {decadeTicks.map(y => ( {y} ))} {/* 1996 vertical marker */} TELECOM ACT 1996 {/* Owner area fill */} {/* Owner line */} {/* HHI line */} {/* Annotation: Peak owners */} {peakData && ( PEAK: {peakData.owners.toLocaleString()} OWNERS )} {/* Annotation: Clear Channel acquires AMFM */} {amfmData && ( CLEAR CHANNEL ACQUIRES AMFM )} {/* Hover crosshair */} {hovered && ( )} {/* Hover readout panel */}
{hovered ? 'YEAR' : '— · — · —'}
{hovered ? hovered.year : '— — — —'}
Owners · {hovered ? hovered.owners.toLocaleString() : '—'}
HHI · {hovered ? hovered.hhi.toLocaleString() : '—'}
{hovered ? (window.noteForYear(hovered.year) || 'No annotation for this year.') : 'Hover the chart to inspect a year.'}
n = {data.length} years · FCC license records SOURCE = FCC BROADCAST LICENSE DATABASE
{/* Below chart: sparklines + thesis */}
{/* Left: mini sparklines */}
The Consolidation Wave
Owner count by market, 1990–2010. The cliff at 1996 is the Telecom Act.
{sparkMarkets.map((market, mi) => ( ))}
{/* Right: thesis quote */}
— THE THESIS —
"The airwaves belong to you."
— Communications Act of 1934, Section 301
); } function SparkMini({ name, data, index }) { const W = 200, H = 40, pad = 4; const iW = W - pad * 2, iH = H - pad * 2; if (!data || data.length === 0) return null; const yMin = 1990, yMax = 2010; const xs = (y) => pad + ((y - yMin) / (yMax - yMin)) * iW; // Synthesize local owner count: starts high, cliff at 1996, stays low const localData = []; for (let y = 1990; y <= 2010; y++) { const seed = (name.charCodeAt(0) * 31 + y) & 0xFFFF; const noise = ((seed % 100) / 100 - 0.5) * 2; let owners; if (y < 1996) { owners = 18 + (index * 2) + noise * 2; } else if (y === 1996) { owners = 14 + (index * 1.5) + noise; } else { const decay = Math.min(1, (y - 1996) / 6); owners = 14 + (index * 1.5) - decay * (8 + index) + noise; } localData.push({ year: y, owners: Math.max(2, owners) }); } const vMax = Math.max(...localData.map(d => d.owners)); const vMin = Math.min(...localData.map(d => d.owners)); const ys = (v) => pad + (1 - (v - vMin) / (Math.max(1, vMax - vMin))) * iH; const path = localData.map((d, i) => `${i === 0 ? 'M' : 'L'}${xs(d.year)},${ys(d.owners)}`).join(' '); const area = path + ` L${xs(2010)},${ys(vMin)} L${xs(1990)},${ys(vMin)} Z`; return (
{/* 1996 marker */}
{name}
); } Object.assign(window, { TabSpectrum });