{ const container = html`

`; const style = html``; document.head.appendChild(style); const COLORS = { "Action 💥": "#424242", "Sci-Fi 🚀": "#64B5F6", "Animation 🎨": "#F48FB1", "Comedy 😂": "#FFD54F", "Romance 🌹": "#FF94C2", "Crime 🔪": "#E57373", "Horror 👻": "#90A4AE", "Drama 🎭": "#9575CD" }; const DOMAIN = ["Action 💥","Sci-Fi 🚀","Animation 🎨","Comedy 😂","Romance 🌹","Crime 🔪","Horror 👻","Drama 🎭"]; let currentStart = 1940; let currentEnd = 2010; let activeGenre = null; function classifyGenre(genresStr) { const g = (genresStr || "").toLowerCase(); if (/action|adventure|thriller/.test(g)) return "Action 💥"; if (/animation/.test(g)) return "Animation 🎨"; if (/horror/.test(g)) return "Horror 👻"; if (/sci-fi|fantasy/.test(g)) return "Sci-Fi 🚀"; if (/crime|mystery/.test(g)) return "Crime 🔪"; if (/romance/.test(g)) return "Romance 🌹"; if (/comedy/.test(g)) return "Comedy 😂"; if (/drama|biography|history|war|music/.test(g)) return "Drama 🎭"; return "Drama 🎭"; } function buildData(ys, ye, genre) { const counts = {}; for (const row of merged_dataset) { if (row.year == null || row.year < ys || row.year > ye) continue; const g = classifyGenre(row.genres); if (genre && g !== genre) continue; const key = row.year + "__" + g; counts[key] = (counts[key] || 0) + 1; } const totals = {}; for (const [key, count] of Object.entries(counts)) { const yr = parseInt(key.split("__")[0]); totals[yr] = (totals[yr] || 0) + count; } return Object.entries(counts).map(([key, count]) => { const parts = key.split("__"); const yr = parseInt(parts[0]); const g = parts[1]; return { year: yr, main_genre: g, count }; }); } async function buildSpec(ys, ye, genre) { const values = buildData(ys, ye, genre); return { width: 800, height: 380, data: { values }, mark: { type: "area", interpolate: "monotone", line: { strokeWidth: 1.5, opacity: 0.6 } }, encoding: { x: { field: "year", type: "quantitative", title: null, axis: { labelFontSize: 12, labelFont: "DM Sans, sans-serif", labelColor: "#999", tickColor: "transparent", domainColor: "#e8e8e8", format: "d", grid: false, labelPadding: 12, tickCount: 8 } }, y: { field: "count", type: "quantitative", stack: "center", title: null, axis: { labelFontSize: 12, labelFont: "DM Sans, sans-serif", labelColor: "#999", tickColor: "transparent", domainColor: "transparent", grid: true, gridColor: "#f0f0f0", gridWidth: 1, tickCount: 4, labelPadding: 10 } }, color: { field: "main_genre", type: "nominal", scale: { domain: DOMAIN, range: DOMAIN.map(d => COLORS[d]) }, legend: null }, tooltip: [ { field: "year", type: "quantitative", title: "Year", format: "d" }, { field: "main_genre", type: "nominal", title: "Genre" }, { field: "count", type: "quantitative", title: "Films" } ] }, config: { view: { stroke: null }, background: "transparent" } }; } async function renderChart(ys, ye, genre) { const spec = await buildSpec(ys, ye, genre); const chartEl = await render(spec); const area = container.querySelector(".lili-chart-area"); if (area) { area.innerHTML = ""; area.appendChild(chartEl); } } const initialChart = await render(await buildSpec(currentStart, currentEnd, null)); const legendHTML = DOMAIN.map(g => `

${g}

`).join(""); container.innerHTML = `

Data Visualization · Film History

A CENTURY
OF CINEMA

How Hollywood's genre mix evolved across a century of filmmaking, from the silent era to the streaming age.

1920 — 2020

Start Year

End Year

${legendHTML}

`; container.querySelector(".lili-chart-area").appendChild(initialChart); let debounceTimer; function onInputChange() { const s = parseInt(container.querySelector("#lili-start").value); const e = parseInt(container.querySelector("#lili-end").value); if (isNaN(s) || isNaN(e)) return; currentStart = Math.min(s, e); currentEnd = Math.max(s, e); clearTimeout(debounceTimer); debounceTimer = setTimeout(() => renderChart(currentStart, currentEnd, activeGenre), 300); } container.querySelector("#lili-start").addEventListener("input", onInputChange); container.querySelector("#lili-end").addEventListener("input", onInputChange); container.querySelectorAll(".lili-legend-item").forEach(el => { el.addEventListener("click", () => { const genre = el.dataset.genre; const items = container.querySelectorAll(".lili-legend-item"); if (activeGenre === genre) { activeGenre = null; items.forEach(i => i.classList.remove("active", "dimmed")); } else { activeGenre = genre; items.forEach(i => { i.classList.remove("active", "dimmed"); i.classList.add(i.dataset.genre === genre ? "active" : "dimmed"); }); } renderChart(currentStart, currentEnd, activeGenre); }); }); return container; }