44:["$","title",null,{"children":"Disney+ Analysis | Sneha Aggarwal | Observable"}] 4c:T407,chart_added = H.interactive( Inputs.form({ grain: Inputs.radio(new Map([["By year", "year"], ["By month", "month"]]), { label: "Grain", value: "year" }) }), ({ grain }) => { const floor = grain === "year" ? d3.utcYear : d3.utcMonth; const rows = d3 .flatRollup(titles.filter((d) => d.added), (v) => v.length, (d) => +floor(d.added), (d) => d.type) .map(([t, type, count]) => ({ date: new Date(t), type, count })); return Plot.plot({ title: "Titles added to Disney+", subtitle: "Disney+ launched in November 2019, so the 2019 bar is mostly the launch catalog", width, height: 360, marginLeft: 50, x: { label: grain === "year" ? "Year added" : "Month added", tickFormat: grain === "year" ? "%Y" : "%b %Y" }, y: { label: "Titles", grid: true }, color: { ...H.typeColor, legend: true }, marks: [ Plot.rectY(rows, { x: "date", interval: grain, y: "count", fill: "type", insetLeft: 1, insetRight: 1, tip: true }), Plot.ruleY([0]) ] }); } )4d:T486,chart_genres_over_time = H.interactive( Inputs.form({ step: H.grainInput(), mode: H.modeInput(), type: H.typeInput("Both") }), ({ step, mode, type }) => { const data = H.explode(H.byType(titles, type), "genres"); const rows = H.countGrid(data, step, (d) => (H.genreDomain.includes(d.value) ? d.value : "Other"), H.genreColor.domain); return Plot.plot({ title: "Genres over time (Release Year)", subtitle: "Top 8 genres; the rest grouped as Other. A title with 3 genres adds 1 to each of them.", width, height: 420, marginLeft: 50, x: { label: "Release year", tickFormat: "d" }, y: { label: mode === "share" ? "Share of genre tags (%)" : "Genre tags", grid: true, percent: mode === "share" }, color: { ...H.genreColor, legend: true }, marks: [ Plot.rectY(rows, { x: "period", interval: step, y: "count", fill: "series", order: H.genreColor.domain, offset: mode === "share" ? "normalize" : null, insetLeft: 0.5, insetRight: 0.5, tip: { format: { x: false } }, channels: { Period: "label", Titles: "count" } }), Plot.ruleY([0]) ] }); } )4e:T532,chart_genre_type_split = { const roll = d3.rollup(H.explode(titles, "genres"), (v) => ({ Movie: v.filter((d) => d.type === "Movie").length, TV: v.filter((d) => d.type === "TV Show").length }), (d) => d.value); const genres = [...roll].filter(([, c]) => c.Movie + c.TV >= 10) .map(([genre, c]) => ({ genre, ...c, tvShare: c.TV / (c.Movie + c.TV) })); const order = d3.sort(genres, (d) => d.tvShare).map((d) => d.genre); const rows = genres.flatMap((g) => [ { genre: g.genre, type: "Movie", count: -g.Movie, titles: g.Movie, share: d3.format(".0%")(1 - g.tvShare) }, { genre: g.genre, type: "TV Show", count: g.TV, titles: g.TV, share: d3.format(".0%")(g.tvShare) } ]); return Plot.plot({ title: "Which genres lean movie, which lean TV?", subtitle: "Titles per genre (genres with 10+ titles), sorted from most movie-heavy to most TV-heavy", width, height: order.length * 22 + 70, marginLeft: 130, x: { label: "← movies · titles · TV shows →", labelAnchor: "center", tickFormat: Math.abs, grid: true }, y: { domain: order, label: null }, color: { ...H.typeColor, legend: true }, marks: [ Plot.barX(rows, { x: "count", y: "genre", fill: "type", tip: { format: { x: false } }, channels: { Titles: "titles", Share: "share" } }), Plot.ruleX([0]) ] }); }4f:T111a,chart_genre_treemap = H.interactive( Inputs.form({ set: H.pairSetInput(), dur: H.durationInput(), size: Inputs.radio(new Map([["Number of movies", "count"], ["Total runtime (hours)", "hours"]]), { label: "Tile size", value: "count" }), focus: Inputs.select(["All (top 20 genres)", ...H.pairGenreList], { label: "Focus on genre" }) }), ({ set, dur, size, focus }) => { const movies = H.pairMovies(set, dur); const sym = H.genrePairs(movies).flatMap((p) => [p, { ...p, a: p.b, b: p.a }]); const movieCount = d3.rollup(H.explode(movies, "genres"), (v) => v.length, (d) => d.value); const parents = focus.startsWith("All") ? H.topValues(movies, "genres", 20) : [focus]; const children = d3.group(sym.filter((p) => parents.includes(p.a)), (p) => p.a, (p) => p.b); const data = { name: "root", children: parents.filter((p) => children.has(p)).map((p) => ({ name: p, children: [...children.get(p)].map(([b, v]) => ({ name: b, parent: p, count: v.length, hours: d3.sum(v, (d) => d.minutes) / 60, median: d3.median(v, (d) => d.minutes) })) })) }; if (!data.children.length) return html`

No ${focus} movies with a second genre in this selection.

`; const W = width, Hh = focus.startsWith("All") ? Math.round(W * 0.7) : Math.round(W * 0.45); const root = d3.treemap().size([W, Hh]).paddingOuter(3).paddingInner(1).paddingTop((d) => (d.depth === 1 ? 20 : 3)).round(true)( d3.hierarchy(data).sum((d) => (d.children ? 0 : d[size])).sort((a, b) => b.value - a.value) ); const leaves = root.leaves(); const [mmin, mmax] = d3.extent(leaves, (d) => d.data.median); const color = d3.scaleLinear().domain([mmin, mmax === mmin ? mmin + 1 : mmax]).range(H.seqRange).interpolate(d3.interpolateLab); const fit = (text, px, charW = 6.4) => { const n = Math.floor((px - 8) / charW); return n <= 1 ? "" : text.length <= n ? text : text.slice(0, n - 1) + "…"; }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, Hh]).attr("width", W).attr("height", Hh) .style("max-width", "100%").style("height", "auto").attr("font-family", "system-ui, sans-serif").attr("font-size", 11); const groups = svg.selectAll("g.parent").data(root.children).join("g").attr("class", "parent"); groups.append("rect").attr("x", (d) => d.x0).attr("y", (d) => d.y0).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0) .attr("fill", "#f0efec").attr("rx", 3); groups.append("text").attr("x", (d) => d.x0 + 5).attr("y", (d) => d.y0 + 14).attr("font-weight", 600).attr("fill", "#0b0b0b") .text((d) => fit(`${d.data.name} · ${movieCount.get(d.data.name) ?? 0} movies`, d.x1 - d.x0, 6.8)); const leaf = svg.selectAll("g.leaf").data(leaves).join("g").attr("class", "leaf").attr("transform", (d) => `translate(${d.x0},${d.y0})`); leaf.append("rect").attr("width", (d) => Math.max(0, d.x1 - d.x0)).attr("height", (d) => Math.max(0, d.y1 - d.y0)) .attr("fill", (d) => color(d.data.median)).attr("rx", 2); leaf.append("title").text((d) => `${d.data.parent} + ${d.data.name}\n${d.data.count} movies · median ${d.data.median} min · ${d3.format(".1f")(d.data.hours)} h total`); const dark = (d) => d.data.median > mmin + (mmax - mmin) * 0.45; leaf.append("text").attr("x", 4).attr("y", 13).attr("fill", (d) => (dark(d) ? "white" : "#0b0b0b")) .text((d) => (d.y1 - d.y0 >= 16 ? fit(d.data.name, d.x1 - d.x0) : "")); leaf.append("text").attr("x", 4).attr("y", 26).attr("fill-opacity", 0.8).attr("fill", (d) => (dark(d) ? "white" : "#0b0b0b")) .text((d) => (d.y1 - d.y0 >= 30 ? fit(size === "count" ? `${d.data.count}` : `${d3.format(".0f")(d.data.hours)} h`, d.x1 - d.x0) : "")); const legend = Plot.legend({ color: { type: "linear", domain: [mmin, mmax], range: H.seqRange, interpolate: "lab", label: "Median runtime of the pair (min)" } }); return html`

What is each genre combined with?

${movies.length} movies · outer boxes = genre (with its movie count), tiles inside = the genres it's paired with. A movie with 3 genres appears under each of its 2 partners. Hover a tile for details.

${legend}${svg.node()}

`; } )50:T56d,chart_genre_pairs = H.interactive( Inputs.form({ set: H.pairSetInput() }), ({ set }) => { const movies = H.pairMovies(set, "all"); const pairs = H.genrePairs(movies); const top = H.topValues(movies, "genres", 20); const sym = pairs.filter((p) => top.includes(p.a) && top.includes(p.b)).flatMap((p) => [p, { ...p, a: p.b, b: p.a }]); const cells = d3 .flatRollup(sym, (v) => ({ count: v.length, examples: v.slice(0, 3).map((d) => d.title).join("; ") }), (d) => d.a, (d) => d.b) .map(([a, b, s]) => ({ a, b, ...s })); return Plot.plot({ title: "Which genres are combined in movies?", subtitle: `${movies.length} movies · bubble size and color = number of movies with both genres · matrix is symmetric`, width: Math.min(width, 860), height: top.length * 30 + 150, marginLeft: 130, marginBottom: 120, x: { domain: top, tickRotate: -45, label: null, grid: true }, y: { domain: top, label: null, grid: true }, r: { range: [0, 15] }, color: { type: "linear", range: H.seqRange, interpolate: "lab", legend: true, label: "Number of movies" }, marks: [ Plot.dot(cells, { x: "a", y: "b", r: "count", fill: "count", stroke: "white", strokeWidth: 1, tip: { format: { fill: false, r: false } }, channels: { Movies: "count", Examples: "examples" } }) ] }); } )51:T4ab,chart_movie_duration = H.interactive( Inputs.form({ step: H.grainInput(), spread: H.spreadInput("sd"), dur: H.durationInput("features") }), ({ step, spread, dur }) => { const rows = H.durationSeries(H.filterDuration(H.movies, dur), step, spread); return Plot.plot({ title: "Movie runtime over time", subtitle: `Median runtime with ${spread === "sd" ? "±1 standard deviation (floored at 0)" : "25th–75th percentile"} band · periods with fewer than 3 movies hidden`, width, height: 380, marginLeft: 50, x: { label: "Release year", tickFormat: "d" }, y: { label: "Runtime (min)", grid: true }, marks: [ Plot.ruleY([0]), Plot.areaY(rows, { x: "period", y1: "lo", y2: "hi", fill: H.C.blue, fillOpacity: 0.18, curve: "monotone-x" }), Plot.line(rows, { x: "period", y: "median", stroke: H.C.blue, strokeWidth: 2, curve: "monotone-x" }), Plot.dot(rows, { x: "period", y: "median", fill: H.C.blue, r: 4, stroke: "white", strokeWidth: 1.5 }), Plot.tip(rows, Plot.pointerX({ x: "period", y: "median", channels: { Period: "label", Movies: "n", Low: "lo", High: "hi" }, format: { x: false } })) ] }); } )52:T60c,chart_genre_duration = H.interactive( Inputs.form({ genres: Inputs.checkbox(H.genreDomain, { label: "Genres", value: H.genreDomain.slice(0, 3) }), step: H.grainInput(), spread: H.spreadInput("sd"), dur: H.durationInput("features") }), ({ genres, step, spread, dur }) => { const data = H.filterDuration(H.movies, dur); const rows = genres.flatMap((g) => H.durationSeries(data.filter((d) => d.genres.includes(g)), step, spread, { genre: g })); // key shows only the checked genres; each genre keeps its fixed color const shown = H.genreDomain.filter((g) => genres.includes(g)); const colors = shown.map((g) => H.palette[H.genreDomain.indexOf(g)]); return Plot.plot({ title: "Movie runtime by genre over time", width, height: 420, marginLeft: 50, x: { label: "Release year", tickFormat: "d" }, y: { label: "Runtime (min)", grid: true }, color: { domain: shown, range: colors, legend: shown.length > 0 }, marks: [ Plot.ruleY([0]), Plot.areaY(rows, { x: "period", y1: "lo", y2: "hi", fill: "genre", fillOpacity: 0.1, curve: "monotone-x" }), Plot.line(rows, { x: "period", y: "median", stroke: "genre", strokeWidth: 2, curve: "monotone-x" }), Plot.dot(rows, { x: "period", y: "median", fill: "genre", r: 3.5, stroke: "white", strokeWidth: 1.2 }), Plot.tip(rows, Plot.pointer({ x: "period", y: "median", channels: { Genre: "genre", Period: "label", Movies: "n", Low: "lo", High: "hi" }, format: { x: false } })) ] }); } )53:T58f,chart_rating_genre = { const ex = H.explode(titles.filter((d) => H.tierOf(d.rating)), "genres"); const top = H.topValues(ex.map((d) => ({ ...d, genres: [d.value] })), "genres", 15); const rows = top.flatMap((g) => { const v = ex.filter((d) => d.value === g); return H.tiers.map((tier) => { const n = v.filter((d) => H.tierOf(d.rating) === tier).length; return { genre: g, tier, n, total: v.length, share: n / v.length }; }); }); const teen = d3.rollup(rows.filter((d) => d.tier === "Teen"), (v) => v[0].share, (d) => d.genre); return Plot.plot({ title: "Audience rating mix by genre", subtitle: `${H.tierNote}`, width: Math.min(width, 760), height: top.length * 28 + 70, marginLeft: 130, x: { domain: H.tiers, label: null, axis: "top" }, y: { domain: d3.sort(top, (g) => -teen.get(g)), label: null }, color: { type: "linear", domain: [0, 100], clamp: true, range: ["#f0f6fe", "#0d366b"], interpolate: "lab", percent: true, legend: true, label: "Share of genre's titles (%)" }, marks: [ Plot.cell(rows, { x: "tier", y: "genre", fill: "share", inset: 1, rx: 3, tip: { format: { fill: (d) => d3.format(".0%")(d / 100) } }, channels: { Titles: "n", "Genre total": "total" } }), Plot.text(rows, { x: "tier", y: "genre", text: (d) => d3.format(".0%")(d.share), fill: { value: (d) => (d.share > 0.45 ? "white" : "#0b0b0b"), scale: null } }) ] }); }54:T48e,chart_tv_seasons = H.interactive( Inputs.form({ step: H.grainInput(), mode: H.modeInput("share") }), ({ step, mode }) => { const domain = ["1 season", "2 seasons", "3–4 seasons", "5+ seasons"]; const bucket = (s) => (s === 1 ? domain[0] : s === 2 ? domain[1] : s <= 4 ? domain[2] : domain[3]); const rows = H.countGrid(H.shows, step, (d) => bucket(d.seasons), domain); return Plot.plot({ title: "How many seasons do TV shows have?", subtitle: "TV shows grouped by number of seasons, by the show's release year", width, height: 380, marginLeft: 50, x: { label: "Release year", tickFormat: "d" }, y: { label: mode === "share" ? "Share of shows (%)" : "TV shows", grid: true, percent: mode === "share" }, color: { domain, range: H.seq4, legend: true }, marks: [ Plot.rectY(rows, { x: "period", interval: step, y: "count", fill: "series", order: domain, offset: mode === "share" ? "normalize" : null, insetLeft: 0.5, insetRight: 0.5, tip: { format: { x: false } }, channels: { Period: "label", Shows: "count" } }), Plot.ruleY([0]) ] }); } )55:T461,titles = { const raw = await FileAttachment("disney_plus_titles.csv").csv(); const split = (s) => (s ?? "").split(",").map((x) => x.trim()).filter(Boolean); const parseAdded = d3.utcParse("%B %d, %Y"); return raw.map((d) => { const n = +((d.duration ?? "").match(/\d+/)?.[0]); const added = d.date_added ? parseAdded(d.date_added.trim()) : null; return { id: d.show_id, type: d.type, // "Movie" | "TV Show" title: d.title, year: +d.release_year, directors: split(d.director), cast: split(d.cast), countries: split(d.country), genres: split(d.listed_in), rating: d.rating?.trim() || null, minutes: d.type === "Movie" ? n : null, seasons: d.type === "TV Show" ? n : null, added, addedYear: added ? added.getUTCFullYear() : null, // 121 older titles end with Disney's content-warning boilerplate; strip it from the text, keep it as a flag advisory: /see details for advisory/i.test(d.description ?? ""), description: (d.description ?? "").replace(/\s*See details for advisory\.?/gi, "").trim() }; }); }56:T495,// ═══ CELL: chart 11 — rating mix over time ═══ chart_ratings = H.interactive( Inputs.form({ step: H.grainInput(), mode: H.modeInput("share") }), ({ step, mode }) => { const rows = ["Movie", "TV Show"].flatMap((type) => H.countGrid(titles.filter((d) => d.type === type && H.tierOf(d.rating)), step, (d) => H.tierOf(d.rating), H.tiers).map((r) => ({ ...r, type })) ); return Plot.plot({ title: "Audience rating mix over time", subtitle: H.tierNote, width, height: 520, marginLeft: 50, marginRight: 70, x: { label: "Release year", tickFormat: "d" }, y: { label: mode === "share" ? "Share (%)" : "Titles", grid: true, percent: mode === "share" }, fy: { label: null }, color: { domain: H.tiers, range: H.seq4, legend: true }, marks: [ Plot.rectY(rows, { x: "period", interval: step, y: "count", fill: "series", fy: "type", order: H.tiers, offset: mode === "share" ? "normalize" : null, insetLeft: 0.5, insetRight: 0.5, tip: { format: { x: false } }, channels: { Period: "label", Titles: "count" } }), Plot.ruleY([0]) ] }); } )57:T2bae,H = { // ---- colors (fixed order; color follows the entity, never its rank) ---- const C = { blue: "#2a78d6", orange: "#eb6834", aqua: "#1baf7a", yellow: "#eda100", magenta: "#e87ba4", green: "#008300", violet: "#6250d6", red: "#e34948", gray: "#a3a29d" }; const palette = [C.blue, C.orange, C.aqua, C.yellow, C.magenta, C.green, C.violet, C.red]; const seq4 = ["#86b6ef", "#3987e5", "#1c5cab", "#0d366b"]; // ordinal blue ramp const seqRange = ["#cde2fb", "#0d366b"]; // continuous blue ramp const typeColor = { domain: ["Movie", "TV Show"], range: [C.blue, C.orange] }; const movies = titles.filter((d) => d.type === "Movie"); const shows = titles.filter((d) => d.type === "TV Show"); const minYear = d3.min(titles, (d) => d.year); const maxYear = d3.max(titles, (d) => d.year); // ---- time periods ---- const periodOf = (y, step) => Math.floor(y / step) * step; const periodLabel = (p, step) => (step === 1 ? String(p) : `${p}–${String(p + step - 1).slice(-2)}`); // ---- generic wrangling ---- const explode = (data, key) => data.flatMap((d) => d[key].map((value) => ({ ...d, value }))); const topValues = (data, key, n) => d3.groupSort(explode(data, key), (g) => -g.length, (d) => d.value).slice(0, n); // counts per (series, period) with zeros filled in, over the data's own year range const countGrid = (data, step, keyFn, domain) => { if (!data.length) return []; const [lo, hi] = d3.extent(data, (d) => d.year); const periods = d3.range(periodOf(lo, step), hi + 1, step); const counts = d3.rollup(data, (v) => v.length, keyFn, (d) => periodOf(d.year, step)); return domain.flatMap((series) => periods.map((period) => ({ series, period, label: periodLabel(period, step), count: counts.get(series)?.get(period) ?? 0 })) ); }; const genreDomain = topValues(titles, "genres", 8); const genreColor = { domain: [...genreDomain, "Other"], range: [...palette, C.gray] }; // ---- duration statistics ---- const FEATURE_MIN = 40; const round1 = (x) => (x == null ? null : Math.round(x * 10) / 10); const stats = (vals, spread) => { const median = d3.median(vals); if (spread === "sd") { const sd = d3.deviation(vals) ?? 0; return { median, lo: round1(Math.max(0, median - sd)), hi: round1(median + sd), sd: round1(sd) }; } return { median, lo: round1(d3.quantile(vals, 0.25)), hi: round1(d3.quantile(vals, 0.75)) }; }; const filterDuration = (data, dur) => dur === "features" ? data.filter((d) => d.minutes >= FEATURE_MIN) : dur === "shorts" ? data.filter((d) => d.minutes < FEATURE_MIN) : data; // median + spread per period; periods with < 3 movies are dropped (too noisy) const durationSeries = (data, step, spread, extra = {}) => d3.sort( d3.flatRollup(data, (v) => v.map((d) => d.minutes), (d) => periodOf(d.year, step)) .filter(([, v]) => v.length >= 3) .map(([period, v]) => ({ period, label: periodLabel(period, step), n: v.length, ...stats(v, spread), ...extra })), (d) => d.period ); // ---- ratings → audience tiers (merges the MPA and TV rating systems) ---- const tiers = ["Kids", "General", "Parental guidance", "Teen"]; const tierOf = (r) => ({ "TV-Y": "Kids", "TV-Y7": "Kids", "TV-Y7-FV": "Kids", G: "General", "TV-G": "General", PG: "Parental guidance", "TV-PG": "Parental guidance", "PG-13": "Teen", "TV-14": "Teen" })[r] ?? null; const tierNote = "Kids = TV-Y/TV-Y7 · General = G/TV-G · Parental guidance = PG/TV-PG · Teen = PG-13/TV-14"; // ---- genre pairs (movies) ---- const pairMovies = (set, dur) => filterDuration(movies, dur).filter((d) => (set === "exactly2" ? d.genres.length === 2 : d.genres.length >= 2)); const genrePairs = (data) => data.flatMap((d) => { const g = [...new Set(d.genres)].sort(); const out = []; for (let i = 0; i < g.length; i++) for (let j = i + 1; j < g.length; j++) out.push({ a: g[i], b: g[j], minutes: d.minutes, title: d.title }); return out; }); const pairGenreList = topValues(movies.filter((d) => d.genres.length >= 2), "genres", 20); // ---- words ---- const STOP = new Set(`a about above after again against all also am an and any are aren't as at be because been before being below between both but by can can't cannot could did do does doing don't down during each even ever every few for from further get gets getting got had has have having he he's her here hers herself him himself his how i i'm if in into is isn't it it's its itself just let let's like make makes may me more most much must my myself never no nor not now of off on once one only or other our ours ourselves out over own really same she she's should so some such than that that's the their theirs them themselves then there there's these they they're this those through to too under until up upon us very was wasn't way we we're were what what's when where which while who who's whom whose why will with within without won't would you you're your yours yourself yourselves into onto via vs`.split(/\s+/).filter(Boolean)); const tokenize = (text, extraStop) => (text.toLowerCase().replace(/[’']s\b/g, "").match(/\p{L}[\p{L}'’-]*\p{L}|\p{L}/gu) ?? []) .map((w) => w.replace(/’/g, "'")) .filter((w) => w.length > 2 && !STOP.has(w) && !extraStop.has(w)); const decades = d3.range(periodOf(minYear, 10), maxYear + 1, 10).map((d) => `${d}s`); const periodOptions = ["All years", ...decades, ...d3.range(maxYear, minYear - 1, -1).map(String)]; const inPeriod = (d, period) => period === "All years" ? true : period.endsWith("s") ? periodOf(d.year, 10) === +period.slice(0, -1) : d.year === +period; // ---- controls ---- const grainInput = (value = 5) => Inputs.radio(new Map([["5-year periods", 5], ["Single years", 1]]), { label: "Time grain", value }); const typeInput = (value = "Movies") => Inputs.radio(["Movies", "TV shows", "Both"], { label: "Show", value }); const byType = (data, t) => (t === "Both" ? data : data.filter((d) => d.type === (t === "Movies" ? "Movie" : "TV Show"))); const typeFill = (t) => (t === "Movies" ? C.blue : t === "TV shows" ? C.orange : C.violet); const spreadInput = (value = "sd") => Inputs.radio(new Map([["Median ± 1 standard deviation", "sd"], ["Median + 25th–75th percentile", "iqr"]]), { label: "Spread", value }); const durationInput = (value = "all") => Inputs.radio(new Map([["All movies", "all"], ["Features (40+ min)", "features"], ["Shorts (<40 min)", "shorts"]]), { label: "Runtime", value }); const pairSetInput = () => Inputs.radio(new Map([["All movies with 2+ genres (every pair)", "all"], ["Movies with exactly 2 genres", "exactly2"]]), { label: "Movies", value: "all" }); const modeInput = (value = "count") => Inputs.radio(new Map([["Count", "count"], ["Share (%)", "share"]]), { label: "Y axis", value }); // controls + chart in a single cell: re-renders the chart whenever a control changes const interactive = (controls, render) => { const out = html`

`; const update = () => out.replaceChildren(render(controls.value)); controls.addEventListener("input", update); update(); return html`

${controls}${out}

`; }; // ---- bubble timeline for people / countries (charts 5, 7, 9) ---- const peopleBubble = ({ data, key, n, step, fill, title, subtitle, exclude = [], width }) => { const ex = explode(data, key).filter((d) => !exclude.includes(d.value)); const top = d3.groupSort(ex, (g) => -g.length, (d) => d.value).slice(0, n); const totals = d3.rollup(ex, (v) => v.length, (d) => d.value); const rows = d3 .flatRollup( ex.filter((d) => top.includes(d.value)), (v) => ({ count: v.length, examples: v.slice(0, 4).map((d) => d.title).join("; ") + (v.length > 4 ? " …" : "") }), (d) => d.value, (d) => periodOf(d.year, step) ) .map(([name, period, s]) => ({ name, period, label: periodLabel(period, step), total: totals.get(name), ...s })); return Plot.plot({ title, subtitle, width, height: top.length * 26 + 70, marginLeft: 160, marginRight: 50, x: { label: "Release year", tickFormat: "d", grid: true }, y: { domain: top, label: null }, r: { range: [2.5, 14] }, marks: [ Plot.dot(rows, { x: "period", y: "name", r: "count", fill, fillOpacity: 0.75, stroke: "white", strokeWidth: 1, tip: { format: { x: false, r: false } }, channels: { Period: "label", Titles: "count", Examples: "examples" } }), Plot.text(top, { y: (d) => d, text: (d) => String(totals.get(d)), frameAnchor: "right", dx: 12, textAnchor: "start", fill: "currentColor", fillOpacity: 0.7 }) ] }); }; // ---- packed word bubbles (charts 13, 14) ---- const wordBubbles = ({ data, field, n, extraStop, width }) => { const W = Math.min(width, 960), Hh = Math.round(W * 0.62); const counts = d3.rollup(data.flatMap((d) => [...new Set(tokenize(d[field], extraStop))]), (v) => v.length, (w) => w); const words = d3.sort(counts, ([, c]) => -c).slice(0, n).map(([word, count]) => ({ word, count })); if (!words.length) return html`

No titles in this selection.

`; const root = d3.pack().size([W, Hh]).padding(3)(d3.hierarchy({ children: words }).sum((d) => d.count)); const [cmin, cmax] = d3.extent(words, (d) => d.count); const color = d3.scaleLinear().domain([cmin, cmax === cmin ? cmin + 1 : cmax]).range(seqRange).interpolate(d3.interpolateLab); const svg = d3.create("svg").attr("viewBox", [0, 0, W, Hh]).attr("width", W).attr("height", Hh) .style("max-width", "100%").style("height", "auto").attr("font-family", "system-ui, sans-serif"); const node = svg.selectAll("g").data(root.leaves()).join("g").attr("transform", (d) => `translate(${d.x},${d.y})`); node.append("circle").attr("r", (d) => d.r).attr("fill", (d) => color(d.data.count)).attr("stroke", "white").attr("stroke-width", 1.5); node.append("title").text((d) => `${d.data.word}: ${d.data.count} title${d.data.count === 1 ? "" : "s"}`); node.append("text") .attr("text-anchor", "middle").attr("dy", "0.35em") .attr("font-size", (d) => Math.min(d.r * 0.7, (1.7 * d.r) / (d.data.word.length * 0.58))) .attr("fill", (d) => (d.data.count > cmin + (cmax - cmin) * 0.45 ? "white" : "#0b0b0b")) .style("pointer-events", "none") .text((d) => (Math.min(d.r * 0.7, (1.7 * d.r) / (d.data.word.length * 0.58)) >= 6 ? d.data.word : "")); return svg.node(); }; return { C, palette, seq4, seqRange, typeColor, movies, shows, minYear, maxYear, periodOf, periodLabel, explode, topValues, countGrid, genreDomain, genreColor, FEATURE_MIN, stats, filterDuration, durationSeries, tiers, tierOf, tierNote, pairMovies, genrePairs, pairGenreList, STOP, tokenize, periodOptions, inPeriod, grainInput, typeInput, byType, typeFill, spreadInput, durationInput, pairSetInput, modeInput, interactive, peopleBubble, wordBubbles }; }58:[{"id":"496d7452e267764b09e3730a5a674042423f4d05a60665aafb1ad1d4e26e0d6f8b8b84dc38ed7e6fab6952acb67723b035a34acc1d951cea710bba499759d8f4","href":"https://static.observableusercontent.com/files/496d7452e267764b09e3730a5a674042423f4d05a60665aafb1ad1d4e26e0d6f8b8b84dc38ed7e6fab6952acb67723b035a34acc1d951cea710bba499759d8f4","name":"disney_plus_titles.csv","type":"text/csv","lastModified":1794084469694,"size":383571}] 48:{"id":"b530912e9bce6969","slug":"disney-analysis","title":"Disney+ Analysis","thumbnail":"e71d7e2c230e1cedfdfc56eca753263083e18fc9272bcfaeede59b9e725af635","access_level":"public","create_time":"$D2026-11-07T22:31:10.629Z","update_time":"$D2026-11-07T23:40:31.691Z","view_time":null,"first_public_time":"$D2026-11-07T23:25:45.030Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"eb80eb416436bba0","login":"sneha-aggarwal","name":"Sneha Aggarwal","avatar_url":"https://avatars-next.observableusercontent.com/384f3dd2120d84a859961cd436c05f9ea0244bfe6616229cf90026c7cdecb0f0","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":165,"publish_version":165,"role":null,"authored":false,"authors":[{"type":"individual","id":"c52b15bbdd354b5e","login":"sneha-aggarwal","name":"Sneha Aggarwal","avatar_url":"https://avatars-next.observableusercontent.com/384f3dd2120d84a859961cd436c05f9ea0244bfe6616229cf90026c7cdecb0f0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"eb80eb416436bba0","login":"sneha-aggarwal","name":"Sneha Aggarwal","avatar_url":"https://avatars-next.observableusercontent.com/384f3dd2120d84a859961cd436c05f9ea0244bfe6616229cf90026c7cdecb0f0","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Disney+ Analysis","cells":[{"id":28,"value":"# Disney+ Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"chart_titles_by_release = H.interactive(\n Inputs.form({ step: H.grainInput() }),\n ({ step }) => {\n const rows = H.countGrid(titles, step, (d) => d.type, [\"Movie\", \"TV Show\"]);\n return Plot.plot({\n title: \"Movies vs TV shows by release year\",\n subtitle: \"Number of catalog titles released in each period\",\n width, height: 380, marginLeft: 50,\n x: { label: \"Release year\", tickFormat: \"d\" },\n y: { label: \"Titles\", grid: true },\n color: { ...H.typeColor, legend: true },\n marks: [\n Plot.ruleY([0]),\n Plot.line(rows, { x: \"period\", y: \"count\", stroke: \"series\", strokeWidth: 2, curve: \"monotone-x\" }),\n Plot.dot(rows, { x: \"period\", y: \"count\", fill: \"series\", r: 4, stroke: \"white\", strokeWidth: 1.5 }),\n Plot.tip(rows, Plot.pointer({ x: \"period\", y: \"count\", channels: { Type: \"series\", Period: \"label\" }, format: { x: false } }))\n ]\n });\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"chart_shorts_features = H.interactive(\n Inputs.form({ step: H.grainInput() }),\n ({ step }) => {\n const domain = [\"Features (40+ min)\", \"Shorts (<40 min)\"];\n const rows = H.countGrid(H.movies, step, (d) => (d.minutes < H.FEATURE_MIN ? domain[1] : domain[0]), domain);\n return Plot.plot({\n title: \"Shorts vs feature films by release year\",\n width, height: 360, marginLeft: 50,\n x: { label: \"Release year\", tickFormat: \"d\" },\n y: { label: \"Movies\", grid: true },\n color: { domain, range: [H.C.violet, H.C.aqua], legend: true },\n marks: [\n Plot.ruleY([0]),\n Plot.line(rows, { x: \"period\", y: \"count\", stroke: \"series\", strokeWidth: 2, curve: \"monotone-x\" }),\n Plot.dot(rows, { x: \"period\", y: \"count\", fill: \"series\", r: 4, stroke: \"white\", strokeWidth: 1.5 }),\n Plot.tip(rows, Plot.pointer({ x: \"period\", y: \"count\", channels: { Type: \"series\", Period: \"label\" }, format: { x: false } }))\n ]\n });\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chart_directors = H.interactive(\n Inputs.form({ step: H.grainInput() }),\n ({ step }) =>\n H.peopleBubble({\n data: H.movies, key: \"directors\", n: 20, step, fill: H.C.blue, width,\n title: \"Top 20 movie directors: when their films were released\",\n subtitle: \"Bubble size = movies released in that period · number at right = total movies · co-directed films count for each director\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chart_actors = H.interactive(\n Inputs.form({ type: H.typeInput(\"Movies\"), step: H.grainInput() }),\n ({ type, step }) =>\n H.peopleBubble({\n data: H.byType(titles, type), key: \"cast\", n: 20, step, fill: H.typeFill(type), width,\n title: `Top 20 cast members (${type.toLowerCase()}): when their titles were released`,\n subtitle: \"Bubble size = titles released in that period · number at right = total titles · voice actors dominate the list\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"chart_countries = H.interactive(\n Inputs.form({ type: H.typeInput(\"Both\"), step: H.grainInput(), us: Inputs.toggle({ label: \"Include United States\", value: false }) }),\n ({ type, step, us }) =>\n H.peopleBubble({\n data: H.byType(titles, type), key: \"countries\", n: 10, step, fill: H.typeFill(type), width,\n exclude: us ? [] : [\"United States\"],\n title: `Top 10 producing countries${us ? \"\" : \" outside the US\"} (${type.toLowerCase()})`,\n subtitle: \"Bubble size = titles released in that period · number at right = total · co-productions count for each country\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## 5 · Audience ratings`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## 6 · Words in titles and descriptions`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// ═══ CELL: chart 13 — title words ═══\nchart_title_words = H.interactive(\n Inputs.form({\n period: Inputs.select(H.periodOptions, { label: \"Release period\" }),\n type: H.typeInput(\"Both\"),\n n: Inputs.range([20, 120], { label: \"Words shown\", step: 10, value: 60 }),\n extra: Inputs.text({ label: \"Also exclude\", placeholder: \"comma-separated, e.g. disney, movie\" })\n }),\n ({ period, type, n, extra }) => {\n const data = H.byType(titles, type).filter((d) => H.inPeriod(d, period));\n const extraStop = new Set(extra.split(\",\").map((s) => s.trim().toLowerCase()).filter(Boolean));\n return html`

Most common words in titles

${period} · ${data.length}

\n ${H.wordBubbles({ data, field: \"title\", n, extraStop, width })}

`;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// ═══ CELL: chart 14 — description words ═══\nchart_description_words = H.interactive(\n Inputs.form({\n period: Inputs.select(H.periodOptions, { label: \"Release period\" }),\n type: H.typeInput(\"Both\"),\n n: Inputs.range([20, 150], { label: \"Words shown\", step: 10, value: 80 }),\n extra: Inputs.text({ label: \"Also exclude\", placeholder: \"comma-separated, e.g. young, new\" })\n }),\n ({ period, type, n, extra }) => {\n const data = H.byType(titles, type).filter((d) => H.inPeriod(d, period));\n const extraStop = new Set(extra.split(\",\").map((s) => s.trim().toLowerCase()).filter(Boolean));\n return html`

Most common words in descriptions

${period} · ${data.length} titles · bubble size = number of descriptions using the word · common English words removed · hover for counts

\n ${H.wordBubbles({ data, field: \"description\", n, extraStop, width })}

`;\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"2"}} 24:null