27:null 28:["$","title",null,{"children":"US Sports Viewership Sunburst | North Branch Media | Observable"}] 2d:Tb94,Data = (async () => { const rows = await FileAttachment("US_Sports_Viewership_2024-2025_Combined_09.28.2025.csv").csv({ typed: true }); // Colors const leagues = Array.from(new Set(rows.map(d => String(d.league)))).sort(); const overrideColors = new Map([ ["NFL", "#013369"], ["FBS", "#009CDE"], ["NBA", "#C8102E"], ["MLB", "#C6AA7B"], ["CBB", "#FA8007"], ["EPL", "#3D195B"], ["NHL", "#6E6E6E"], ["PGA", "#006847"], ["ATP", "#90EE90"], ["Paris Olympics", "#FFD400"], ["F1", "#000000"], ]); const hash = (s) => { let h = 5381; for (let i=0;i>>0; }; const fallbackColor = (name) => d3.hsl(hash(name)%360, 0.55, 0.50).formatHex(); const brighten = (hex, k = 0.5) => d3.color(hex).brighter(k).formatHex(); const baseColor = new Map(); for (const name of leagues) { baseColor.set(name, overrideColors.get(name) ?? fallbackColor(name)); } const sports = leagues.map(name => ({ name, color: baseColor.get(name) })); // Fill map const sportsFill = new Map(leagues.map(name => { const c = baseColor.get(name); return [name, overrideColors.has(name) ? c : brighten(c)]; })); // Grouping const TNT_LABEL = "TNT Sports"; function groupNetwork(raw) { if (!raw) return "Other"; const s = String(raw).toLowerCase().replace(/[^a-z0-9+]+/g, " ").trim(); const has = (...keys) => keys.some(k => s.includes(k)); if (has("abc","espn","espn2","espnu","espn+","espn plus","espn3","espnews","acc network","accn","sec network","secn","longhorn network","lhn")) return "ABC"; if (has("cbs","paramount+","paramount plus","paramount")) return "CBS"; if (has("fox","fs1","fs2","fox sports 1","fox sports 2","fox deportes")) return "FOX"; if (has("nbc","usa","usa network","peacock","nbcsn")) return "NBC"; if (has("tnt","tbs","trutv","tru tv","max","bleacher report","br sports","tnt sports")) return TNT_LABEL; return "Other"; } const data = rows.map(d => ({ sport: String(d.league), week: +d.viz_week_index, game: String(d.game), date_start: String(d.week_start_date_utc), date_end: String(d.week_end_date_utc), network: String(d.network), network_group: groupNetwork(d.network), avg: +d.avg_viewers_millions, color: sportsFill.get(String(d.league)) ?? "#999" })).filter(d => d.week >= 1 && d.week <= 52 && Number.isFinite(d.avg)); const GROUPS_BASE = ["ABC","CBS","FOX","NBC",TNT_LABEL,"Other"]; const groupTotals = new Map(GROUPS_BASE.map(g => [g, 0])); for (const [g, total] of d3.rollup(data, v => d3.sum(v, x => x.avg), d => d.network_group)) { groupTotals.set(g, (groupTotals.get(g) ?? 0) + total); } const NETWORK_GROUPS_ORDERED = Array.from(groupTotals.entries()) .sort((a,b) => d3.descending(a[1], b[1])) .map(d => d[0]); return { weeks: 52, data, sportsFill, sports, groupTotals, NETWORK_GROUPS_ORDERED }; })()2e:T1e2e,Viz = { const { data, sportsFill, groupTotals, NETWORK_GROUPS_ORDERED } = Data; const MANUAL_ROTATE_DEG = 94; const ARC_OFFSET = (MANUAL_ROTATE_DEG * Math.PI) / 180; const W = 1100, H = 1100; const C = Math.min(W, H) / 2; const innerR = 40; const band = 600; const MIN_PX = 1.5; const rot = -Math.PI / 2; const year = 2025, MS = 86400000; const jan1 = new Date(Date.UTC(year,0,1)); const jan1Next = new Date(Date.UTC(year+1,0,1)); const daysInYear = (jan1Next - jan1)/MS; const angle = d => rot + ((d - jan1)/(daysInYear*MS))*2*Math.PI; const firstSunday = d3.utcSunday.ceil(new Date(Date.UTC(year,0,1))); const wStart = w => d3.utcSunday.offset(firstSunday, w-1); const wEnd = w => d3.utcSunday.offset(firstSunday, w); // Container const wrap = DOM.element("div"); const style = document.createElement("style"); style.textContent = ` .chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px 0; font:12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } .chips .label { color:#374151; font-weight:700; margin-right:6px; } .chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:9999px; background:#f9fafb; color:#111827; cursor:pointer; user-select:none; transition:background .15s, border-color .15s, transform .03s; } .chip:hover { background:#f3f4f6; } .chip:active { transform:translateY(1px); } .chip[aria-pressed="true"] { background:#111827; color:#fff; border-color:#111827; } .chip .metric { opacity:.75; } .chip.secondary { background:#ffffff; } `; wrap.append(style); // Filters const controls = d3.select(DOM.element("div")).attr("class","chips"); controls.append("span").attr("class","label").text("Network groups:"); const fmtM = d3.format(".1f"); const GROUPS = NETWORK_GROUPS_ORDERED; const activeGroups = new Set(GROUPS); // default: all on const chipEls = new Map(); for (const g of GROUPS) { const total = groupTotals.get(g) ?? 0; const el = controls.append("button") .attr("class","chip") .attr("type","button") .attr("aria-pressed","true") .on("click", () => { const on = el.attr("aria-pressed") === "true"; el.attr("aria-pressed", on ? "false" : "true"); if (on) activeGroups.delete(g); else activeGroups.add(g); updateOpacity(); }); el.append("span").text(g); el.append("span").attr("class","metric").text(`· Σ ${fmtM(total)}M`); chipEls.set(g, el); } // Actions controls.append("button") .attr("class","chip secondary").attr("type","button").text("All") .on("click", () => { activeGroups.clear(); GROUPS.forEach(x => activeGroups.add(x)); chipEls.forEach(el => el.attr("aria-pressed","true")); updateOpacity(); }); controls.append("button") .attr("class","chip secondary").attr("type","button").text("None") .on("click", () => { activeGroups.clear(); chipEls.forEach(el => el.attr("aria-pressed","false")); updateOpacity(); }); wrap.append(controls.node()); // SVG const svg = d3.create("svg") .attr("width", W).attr("height", H) .attr("viewBox", [-W/2, -H/2 - 60, W, H + 60]) .attr("preserveAspectRatio", "xMidYMid meet"); wrap.append(svg.node()); const g = d3.select(svg.node()).append("g"); const arc = d3.arc().cornerRadius(2); // Months const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; for (let m=0; m<12; m++){ const a0 = angle(new Date(Date.UTC(year,m,1))); g.append("line") .attr("x1",0).attr("y1",0) .attr("x2",Math.cos(a0)*(C-12)) .attr("y2",Math.sin(a0)*(C-12)) .attr("stroke","#ddd").attr("stroke-dasharray","2,2").attr("stroke-width",0.6); g.append("text") .attr("x",Math.cos(a0)*(C-20)) .attr("y",Math.sin(a0)*(C-20)) .attr("text-anchor",Math.cos(a0)>=0?"start":"end") .attr("alignment-baseline","middle") .attr("font-size",16).attr("font-weight","bold").attr("fill","#444") .text(months[m]); } // Thickness const maxAvg = d3.max(data, d => d.avg) || 1; const thick = (avg) => Math.max(MIN_PX, (avg / maxAvg) * band); const meanBySport = d3.rollup(data, v => d3.mean(v, d => d.avg), d => d.sport); const sportOrder = Array.from(meanBySport.keys()).sort((a,b)=>meanBySport.get(b)-meanBySport.get(a)); // Tooltip let selectedSport = null; const tip = d3.select(DOM.element("div")) .style("position","fixed").style("pointer-events","none") .style("background","rgba(0,0,0,0.9)").style("color","#fff") .style("padding","10px 12px").style("border-radius","8px") .style("font","12px sans-serif").style("line-height","1.3").style("opacity",0); wrap.append(tip.node()); function renderTooltip(d){ const views = Number.isFinite(d.avg) ? `${d.avg.toFixed(2)}M` : "—"; tip.html( `

${d.sport}

` + `

${d.game}

` + `

${d.date_start} – ${d.date_end}

` + `

Network: ${d.network || "—"} (${d.network_group})

` + `

Views: ${views}

` ); } function baseOpacity(p) { if (!activeGroups.has(p.network_group)) return 0.08; // filtered out if (selectedSport && p.sport !== selectedSport) return 0.25; // sport dim when pinned return 1; } function updateOpacity() { g.selectAll("path.arc").style("opacity", p => baseOpacity(p)); } const byWeek = d3.group(data, d => +d.week); for (const [w, recs] of byWeek) { const a0 = angle(wStart(w)) + ARC_OFFSET + 0.002; const a1 = angle(wEnd(w)) + ARC_OFFSET - 0.002; let r0 = innerR; for (const d of recs.filter(x=>x.avg>0).sort((a,b)=>sportOrder.indexOf(a.sport)-sportOrder.indexOf(b.sport))) { const r1 = r0 + thick(d.avg); g.append("path") .attr("class","arc") .attr("d", arc({innerRadius:r0+0.5, outerRadius:r1-0.5, startAngle:a0, endAngle:a1})) .attr("fill", sportsFill.get(d.sport) ?? "#999") .attr("stroke","#fff").attr("stroke-width",0.4) .style("cursor","pointer") .style("opacity", baseOpacity(d)) .datum({ ...d, week: w }); r0 = r1; } } // Interactions g.selectAll("path.arc") .on("mouseenter", function(event, d) { if (selectedSport) return; g.selectAll("path.arc") .style("opacity", p => !activeGroups.has(p.network_group) ? 0.08 : (p.sport === d.sport ? 1 : 0.25)); d3.select(this).attr("opacity", 0.95); tip.style("opacity", 1); renderTooltip(d); }) .on("mousemove", function(event) { if (selectedSport) return; tip.style("left", (event.clientX + 12) + "px").style("top", (event.clientY + 12) + "px"); }) .on("mouseleave", function() { if (selectedSport) return; updateOpacity(); tip.style("opacity", 0); }) .on("click", function(event, d) { event.stopPropagation(); selectedSport = (selectedSport === d.sport) ? null : d.sport; updateOpacity(); if (selectedSport) { tip.style("opacity", 1); renderTooltip(d); tip.style("left", (event.clientX + 12) + "px").style("top", (event.clientY + 12) + "px"); } else { tip.style("opacity", 0); } }); d3.select(svg.node()).on("click", () => { selectedSport = null; updateOpacity(); tip.style("opacity", 0); }); return wrap; }2f:[{"id":"b1bef6cb7e8e6b72b48167708e5e87d783f5129baee3e4098ad7bf977eee34106d868a1a2b69907888e6f85720b0ddbc02d063e71387afa9ba56f0d919dd7031","href":"https://static.observableusercontent.com/files/b1bef6cb7e8e6b72b48167708e5e87d783f5129baee3e4098ad7bf977eee34106d868a1a2b69907888e6f85720b0ddbc02d063e71387afa9ba56f0d919dd7031","name":"US_Sports_Viewership_2024-2025_Combined_09.28.2025.csv","type":"text/csv","lastModified":1759801129066.988,"size":137858}] 2b:{"id":"160e3f09561cd8b2","slug":null,"title":"US Sports Viewership Sunburst","thumbnail":"9e9aa0d1c668fe9f41ea97d2fb0000e41bf5eb62ae9bd1f5be790d9ea9b16f5c","access_level":"public","create_time":"$D2025-10-07T01:37:43.644Z","update_time":"$D2026-05-15T18:54:23.372Z","view_time":null,"first_public_time":"$D2025-10-07T01:37:43.644Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/76819e141d8360b0fb326704433556feaf213b308230b2c1906d59298189200a","tier":"starter_2024"},"version":15,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a4a5420f054ddf6","login":"north-branch-media","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/c80485c224f42cb4baa7e0bcefcda23343f268e832e216af1cc503d13623ea1c","tier":null}],"members":[{"type":"team","id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/76819e141d8360b0fb326704433556feaf213b308230b2c1906d59298189200a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"1a4a5420f054ddf6","login":"north-branch-media","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/c80485c224f42cb4baa7e0bcefcda23343f268e832e216af1cc503d13623ea1c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d5b2371adbe5262e","slug":"tweets","title":"Tweets","owner":{"id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media"}},"type":"notebook","body":{"title":"US Sports Viewership Sunburst","cells":[{"id":0,"value":"# US Sports Viewership Sunburst","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"