2b:null 2c:["$","title",null,{"children":"Final Project Presentation (04/30/2025) | NIU ReDAV | Observable"}] 31:Tdea,viewof radialNetwork1 = { const width = 900; const radius = width / 2; const innerRadius = radius - 120; const svg = d3.create("svg") .attr("width", width) .attr("height", width) .style("font", "11px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${radius},${radius})`); const cluster = d3.cluster().size([2 * Math.PI, innerRadius]); const uniqueNames = Array.from(new Set([ ...actorDirectorWins.map(d => d.actor), ...actorDirectorWins.map(d => d.director) ])); const nodes = uniqueNames.map(name => ({ name, type: actorDirectorWins.some(d => d.actor === name) ? "actor" : "director" })); const links = actorDirectorWins.map(({ actor, director, film, year }) => ({ source: actor, target: director, film, year })); const root = d3.hierarchy({ children: nodes }).sum(() => 1); cluster(root); const nameToNode = new Map(); root.leaves().forEach(d => { nameToNode.set(d.data.name, d); }); const line = d3.radialLine() .curve(d3.curveBundle.beta(0.85)) .radius(d => d.y) .angle(d => d.x); const pathData = links.map(link => { const path = nameToNode.get(link.source).path(nameToNode.get(link.target)); path.linkInfo = link; return path; }); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("padding", "8px 12px") .style("background", "#fff") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("pointer-events", "none") .style("font-size", "12px") .style("box-shadow", "0 2px 6px rgba(0,0,0,0.15)") .style("opacity", 0); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-opacity", 0.4) .selectAll("path") .data(pathData) .join("path") .attr("class", "link") .attr("d", line); const label = g.append("g") .selectAll("text") .data(root.leaves()) .join("text") .attr("dy", "0.31em") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y + 8},0) ${d.x >= Math.PI ? "rotate(180)" : ""} `) .attr("text-anchor", d => d.x < Math.PI ? "start" : "end") .attr("fill", d => d.data.type === "director" ? "red" : "black") .text(d => d.data.name) .on("mouseover", (event, d) => { const name = d.data.name; label.attr("fill", o => o.data.name === name ? "#000" : (o.data.type === "director" ? "red" : "black") ); link .attr("stroke", l => (l.linkInfo.source === name || l.linkInfo.target === name) ? "#2ca02c" : "#ccc") .attr("stroke-opacity", l => (l.linkInfo.source === name || l.linkInfo.target === name) ? 1 : 0.1); const collaborations = actorDirectorWins.filter( d => d.actor === name || d.director === name ); const tooltipHTML = collaborations.map(d => `${d.film}
Actor: ${d.actor}
Director: ${d.director}
Year: ${d.year}` ).join("

"); tooltip.transition().duration(100).style("opacity", 1); tooltip.html(tooltipHTML) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 40) + "px"); }) .on("mouseout", () => { label.attr("fill", d => d.data.type === "director" ? "red" : "black"); link.attr("stroke", "#ccc").attr("stroke-opacity", 0.4); tooltip.transition().duration(200).style("opacity", 0); }); return svg.node(); }32:Td8e,viewof genreCategoryHeatmap = { const margin = { top: 250, right: 200, bottom: 100, left: 100 }; const fullWidth = 1200; const fullHeight = 900; const width = fullWidth - margin.left - margin.right; const height = fullHeight - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", fullWidth) .attr("height", fullHeight + 80) .style("font-family", "sans-serif") .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const genres = Array.from(new Set(genreCategoryMatrix.map(d => d.genre))).sort(); const categories = Array.from(new Set(genreCategoryMatrix.map(d => d.category))).sort(); const selector = d3.select(DOM.element("div")) .style("margin-bottom", "10px") .append("select"); selector .selectAll("option") .data(["All Genres", ...genres]) .join("option") .text(d => d); const maxCount = d3.max(genreCategoryMatrix, d => d.count); const color = d3.scaleSequential() .interpolator(d3.interpolateYlGnBu) .domain([0, maxCount]); const x = d3.scaleBand().domain(categories).range([0, width]).padding(0.05); const y = d3.scaleBand().domain(genres).range([0, height]).padding(0.05); const render = (selectedGenre) => { let data = selectedGenre === "All Genres" ? genreCategoryMatrix : genreCategoryMatrix.filter(d => d.genre === selectedGenre); g.selectAll("rect").remove(); g.selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.category)) .attr("y", d => y(d.genre)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d.count)) .append("title") .text(d => `${d.genre} × ${d.category}: ${d.count}`); }; g.append("g").call(d3.axisLeft(y)); g.append("g") .call(d3.axisTop(x)) .selectAll("text") .attr("transform", "rotate(-90)") .style("text-anchor", "start") .attr("dx", "1.0em") .attr("dy", "1.4em"); const legendWidth = 200; const legendHeight = 10; const legendX = (width + margin.left + margin.right - legendWidth) / 2; const legendY = height + margin.top + 40; const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "legendGradient"); gradient.selectAll("stop") .data(d3.ticks(0, 1, 10)) .enter() .append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => color(d * maxCount)); svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#legendGradient)"); const legendScale = d3.scaleLinear() .domain([0, maxCount]) .range([legendX, legendX + legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5) .tickFormat(d3.format("d")); svg.append("g") .attr("transform", `translate(0, ${legendY + legendHeight})`) .call(legendAxis); svg.append("text") .attr("x", legendX + legendWidth / 2) .attr("y", legendY - 6) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Number of Wins"); render("All Genres"); selector.on("change", function () { const selected = this.value; render(selected); }); const wrapper = document.createElement("div"); wrapper.appendChild(selector.node()); wrapper.appendChild(svg.node()); return wrapper; } 33:T234b,viewof bipartiteOscars = { const width = 1300; const height = 1200; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif") .style("background", "#fff"); svg.append("text") .attr("x", 95) .attr("y", 40) .attr("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .style("fill", "#1f77b4") .text("Actors"); svg.append("text") .attr("x", width - 110) .attr("y", 40) .attr("text-anchor", "middle") .style("font-size", "25px") .style("font-weight", "bold") .style("fill", "#2ca02c") .text("Directors"); const color = d3.scaleOrdinal() .domain(["actor", "genre", "director"]) .range(["#1f77b4", "#000000", "#2ca02c"]); const { nodes, links } = bipartiteData; const xPosition = { actor: 100, genre: width / 2, director: width - 100 }; nodes.forEach(node => { node.x = xPosition[node.type]; }); const groupNodes = d3.groups(nodes, d => d.type); groupNodes.forEach(([type, group]) => { const scale = d3.scalePoint() .domain(group.map(d => d.id)) .range([100, height - 100]); group.forEach(d => { d.y = scale(d.id); }); }); function curvedLink(d) { const midX = (d.source.x + d.target.x) / 2; return ` M${d.source.x},${d.source.y} C${midX},${d.source.y} ${midX},${d.target.y} ${d.target.x},${d.target.y} `; } const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("path") .data(links) .join("path") .attr("stroke", "#aaa") .attr("stroke-width", 2) .attr("d", curvedLink); const nodeGroup = svg.append("g"); const genreNodes = nodeGroup.selectAll(".genre") .data(nodes.filter(d => d.type === "genre")) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); genreNodes.append("rect") .attr("x", -40) .attr("y", -10) .attr("width", 80) .attr("height", 20) .attr("fill", "#000") .attr("stroke", "#fff") .attr("stroke-width", 1.5); genreNodes.append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("fill", "white") .text(d => d.id); const circleNodes = nodeGroup.selectAll(".circle") .data(nodes.filter(d => d.type !== "genre")) .join("circle") .attr("r", 5) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => color(d.type)) .attr("stroke", "#fff") .attr("stroke-width", 1.5); const label = svg.append("g") .selectAll("text") .data(nodes.filter(d => d.type !== "genre")) .join("text") .attr("x", d => d.x + (d.type === "actor" ? -12 : d.type === "director" ? 12 : 0)) .attr("y", d => d.y) .attr("dy", "0.32em") .attr("text-anchor", d => d.type === "actor" ? "end" : "start") .text(d => d.id) .style("fill", "#333"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "rgba(255,255,255,0.95)") .style("padding", "10px 15px") .style("border", "1px solid #999") .style("border-radius", "8px") .style("box-shadow", "0 2px 12px rgba(0,0,0,0.2)") .style("pointer-events", "none") .style("font-size", "12px") .style("color", "#333") .style("opacity", 0) .style("z-index", 1000); function highlight(event, d) { const directNodes = new Set(); const genreNodesSet = new Set(); if (d.type === "actor") { const genres = links .filter(l => l.source.id === d.id || l.target.id === d.id) .map(l => (l.source.type === "genre" ? l.source.id : l.target.id)); genres.forEach(genre => { const directors = links .filter(l => l.source.id === genre || l.target.id === genre) .map(l => (l.source.type === "director" ? l.source.id : l.target.id)); directors.forEach(director => { const hasDirectLink = actorDirectorGenreData.find(e => e.actor === d.id && e.director === director && e.genre === genre ); if (hasDirectLink) { directNodes.add(director); } else { genreNodesSet.add(director); } }); directNodes.add(genre); }); directNodes.add(d.id); } else if (d.type === "director") { const genres = links .filter(l => l.source.id === d.id || l.target.id === d.id) .map(l => (l.source.type === "genre" ? l.source.id : l.target.id)); genres.forEach(genre => { const actors = links .filter(l => l.source.id === genre || l.target.id === genre) .map(l => (l.source.type === "actor" ? l.source.id : l.target.id)); actors.forEach(actor => { const hasDirectLink = actorDirectorGenreData.find(e => e.actor === actor && e.director === d.id && e.genre === genre ); if (hasDirectLink) { directNodes.add(actor); } else { genreNodesSet.add(actor); } }); directNodes.add(genre); }); directNodes.add(d.id); } else if (d.type === "genre") { // For genre nodes, no tooltip, but highlight connections links.forEach(l => { if (l.source.id === d.id || l.target.id === d.id) { if (l.source.type === "actor" || l.source.type === "director") { genreNodesSet.add(l.source.id); } if (l.target.type === "actor" || l.target.type === "director") { genreNodesSet.add(l.target.id); } } }); directNodes.add(d.id); } circleNodes.attr("fill", n => directNodes.has(n.id) ? "#ff4136" : genreNodesSet.has(n.id) ? "#ff851b" : "#ddd" ); genreNodes.select("rect").attr("fill", n => directNodes.has(n.id) ? "#ff4136" : "#000" ); label.style("fill", n => directNodes.has(n.id) ? "#000" : genreNodesSet.has(n.id) ? "#555" : "#aaa" ); link .attr("stroke", l => { if (directNodes.has(l.source.id) && directNodes.has(l.target.id)) return "#ff4136"; if (genreNodesSet.has(l.source.id) || genreNodesSet.has(l.target.id)) return "#ff851b"; return "#ccc"; }) .attr("stroke-opacity", l => { if (directNodes.has(l.source.id) && directNodes.has(l.target.id)) return 1; if (genreNodesSet.has(l.source.id) || genreNodesSet.has(l.target.id)) return 0.5; return 0.05; }); //interactivity if (d.type === "actor" || d.type === "director") { const actorName = d.type === "actor" ? d.id : null; const directorName = d.type === "director" ? d.id : null; // Find associated director(s) const associatedDirectors = new Set(); if (actorName) { actorDirectorGenreData.forEach(entry => { if (entry.actor === actorName) associatedDirectors.add(entry.director); }); } else if (directorName) { associatedDirectors.add(directorName); } if (typeof updateTimelineHighlight === "function") { updateTimelineHighlight([...associatedDirectors]); } } if (d.type === "genre") { const directors = actorDirectorGenreData .filter(entry => entry.genre === d.id) .map(entry => entry.director); if (typeof updateTimelineHighlight === "function") { updateTimelineHighlight([...new Set(directors)]); } } if (d.type === "genre") { tooltip.transition().duration(200).style("opacity", 0); } else { const offsetX = d.type === "director" ? -250 : 20; const tooltipHeight = 120; let mouseX = event.pageX + offsetX; let mouseY; if (event.pageY + tooltipHeight + 20 > window.innerHeight) { mouseY = event.pageY - tooltipHeight - 20; // above the mouse } else { mouseY = event.pageY + 20; // below the mouse } const tooltipLinks = links.filter(l => l.source.id === d.id || l.target.id === d.id); const tooltipHTML = tooltipLinks.map(l => ` Movie: ${l.movie}
Award: ${l.award}
Year: ${l.year} `).join("

"); tooltip.transition().duration(100).style("opacity", 1); tooltip.html(tooltipHTML) .style("left", `${mouseX}px`) .style("top", `${mouseY}px`); } } function restore() { circleNodes.attr("fill", d => color(d.type)); genreNodes.select("rect").attr("fill", "#000"); label.style("fill", "#333"); link.attr("stroke", "#aaa").attr("stroke-opacity", 0.5); tooltip.transition().duration(200).style("opacity", 0); } circleNodes.on("mouseover", highlight).on("mouseout", restore); genreNodes.select("rect").on("mouseover", highlight).on("mouseout", restore); label.on("mouseover", highlight).on("mouseout", restore); if (typeof clearTimelineHighlight === "function") clearTimelineHighlight(); // clearHeatmapHighlight(); //clearTimelineHighlight(); return svg.node(); } 34:Tc11,viewof directorTimelinewithAllDirectors = { const margin = { top: 100, right: 30, bottom: 40, left: 160 }; const width = 900 - margin.left - margin.right; const height = 800 - margin.top - margin.bottom; const allDirectors = [...new Set(topDirectingData.map(d => d.director))]; const filter = Inputs.select(["All", ...allDirectors], { label: "Select Director" }); const container = html`

`; container.appendChild(filter); const wrapper = document.createElement("div"); container.appendChild(wrapper); const renderChart = (selectedDirector) => { wrapper.innerHTML = ""; const filtered = selectedDirector === "All" ? filteredDirectingDataold : filteredDirectingDataold.filter(d => d.director === selectedDirector); const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "sans-serif"); wrapper.appendChild(svg.node()); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain(d3.extent(topDirectingData, d => d.year)) .range([0, width]); const y = d3.scalePoint() .domain([...new Set(filtered.map(d => d.director))]) .range([0, height]) .padding(0.5); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); g.append("g").call(d3.axisLeft(y)); g.selectAll("circle") .data(filtered, d => `${d.director}-${d.year}`) .join( enter => enter.append("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.director)) .attr("r", 0) .attr("fill", d => d.win ? "#3c3c3c" : "#ccc") .attr("stroke", "#333") .transition() .duration(500) .attr("r", 6), update => update .transition() .duration(500) .attr("cx", d => x(d.year)) .attr("cy", d => y(d.director)), exit => exit .transition() .duration(300) .attr("r", 0) .remove() ) .append("title") .text(d => `${d.director} - ${d.year} ${d.win ? "Win" : "Nomination"}`); // Legend const legend = svg.append("g") .attr("transform", `translate(${margin.left},20)`); legend.append("circle") .attr("cx", 0) .attr("r", 6) .attr("fill", "#3c3c3c"); legend.append("text") .attr("x", 12) .attr("y", 4) .text("Win") .style("font-size", "12px"); legend.append("circle") .attr("cx", 70) .attr("r", 6) .attr("fill", "#ccc"); legend.append("text") .attr("x", 82) .attr("y", 4) .text("Nomination") .style("font-size", "12px"); }; // Initial render renderChart("All"); // Re-render on selection filter.addEventListener("input", () => renderChart(filter.value)); return container; } 35:Tb8d,viewof directorTimeline1 = { const margin = { top: 60, right: 30, bottom: 40, left: 100 }; const width = 1000 - margin.left - margin.right; const height = 700 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("overflow", "visible") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]); // for responsiveness const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain(d3.extent(directorTimelineData, d => d.year)) .range([0, width]); const y = d3.scalePoint() .domain([...new Set(filteredDirectingData.map(d => d.director))]) .range([0, height]) .padding(0.5); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); g.append("g") .call(d3.axisLeft(y)); const circles = g.selectAll("circle") .data(filteredDirectingData, d => `${d.director}-${d.year}`) .join( enter => enter.append("circle") .attr("class", d => `timeline-dot director-${CSS.escape(d.director)}`) .attr("cx", d => x(d.year)) .attr("cy", d => y(d.director)) .attr("r", 0) .attr("fill", d => d.win ? "#3c3c3c" : "#ccc") .attr("stroke", "#333") .transition() .duration(500) .attr("r", 6), update => update .transition() .duration(500) .attr("cx", d => x(d.year)) .attr("cy", d => y(d.director)), exit => exit .transition() .duration(300) .attr("r", 0) .remove() ); g.selectAll(".timeline-dot") .append("title") .text(d => `${d.director} - ${d.year} ${d.win ? "Win" : "Nomination"}`); const legend = svg.append("g") .attr("transform", `translate(${margin.left},20)`); // Win (black) legend.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 6) .attr("fill", "#3c3c3c"); legend.append("text") .attr("x", 12) .attr("y", 4) .text("Win") .style("font-size", "12px"); // Nomination (gray) legend.append("circle") .attr("cx", 240) .attr("cy", 0) .attr("r", 6) .attr("fill", "#ccc"); legend.append("text") .attr("x", 252) .attr("y", 4) .text("Nomination") .style("font-size", "12px"); legend.append("circle") .attr("cx", 0) .attr("cy", 20) .attr("r", 6) .attr("fill", "green"); legend.append("text") .attr("x", 12) .attr("y", 24) .text("Green leads to Win (on highlight)") .style("font-size", "12px"); // Orange highlight legend.append("circle") .attr("cx", 240) .attr("cy", 20) .attr("r", 6) .attr("fill", "orange"); legend.append("text") .attr("x", 252) .attr("y", 24) .text("Orange leads to Nomination (on highlight)") .style("font-size", "12px"); return svg.node(); } 36:Tdb0,viewof enhancedCategoryTimeline = { const margin = { top: 60, right: 160, bottom: 60, left: 250 }; const width = 960 - margin.left - margin.right; const height = categoryGroupLifespans.length * 28; categoryGroupLifespans.forEach(d => { if (!d.group) d.group = "Other"; }); const wrapper = document.createElement("div"); wrapper.style.position = "relative"; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "sans-serif"); wrapper.appendChild(svg.node()); const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "absolute", background: "#fff", border: "1px solid #ccc", borderRadius: "6px", padding: "8px 12px", fontSize: "13px", boxShadow: "0 2px 6px rgba(0,0,0,0.15)", pointerEvents: "none", visibility: "hidden", lineHeight: "1.5", zIndex: 10 }); wrapper.appendChild(tooltip); const svgG = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); categoryGroupLifespans.sort((a, b) => a.start - b.start); const x = d3.scaleLinear().domain([1927, 2024]).range([0, width]); const y = d3.scaleBand().domain(categoryGroupLifespans.map(d => d.category)).range([0, height]).padding(0.25); const statusColor = d3.scaleOrdinal().domain(["active", "inactive"]).range(["#3cb371", "#ccc"]); // Axes svgG.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); svgG.append("g") .call(d3.axisLeft(y)); // Bars svgG.selectAll("rect") .data(categoryGroupLifespans) .join("rect") .attr("x", d => x(d.start)) .attr("y", d => y(d.category)) .attr("width", d => x(d.end) - x(d.start)) .attr("height", y.bandwidth()) .attr("fill", d => d.end === 2024 ? statusColor("active") : statusColor("inactive")) .attr("rx", 4) .attr("ry", 4) .on("mouseover", (event, d) => { tooltip.innerHTML = ` Category: ${d.category}
Group: ${d.group}
Years Active: ${d.start} – ${d.end}
Status: ${d.end === 2024 ? "Active" : "Inactive"}
Lifespan: ${d.end - d.start} years `; tooltip.style.visibility = "visible"; }) .on("mousemove", event => { tooltip.style.top = `${event.pageY - 30}px`; tooltip.style.left = `${event.pageX + 10}px`; }) .on("mouseout", () => { tooltip.style.visibility = "hidden"; }); // Title svg.append("text") .attr("x", margin.left + width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Lifespan of Oscar Categories Over Time"); // Legend on the right side const legend = svg.append("g") .attr("transform", `translate(${margin.left + width + 20},${margin.top})`); const legendItems = ["active", "inactive"]; legend.selectAll("rect") .data(legendItems) .join("rect") .attr("y", (d, i) => i * 24) .attr("width", 14) .attr("height", 14) .attr("fill", d => statusColor(d)); legend.selectAll("text") .data(legendItems) .join("text") .attr("x", 20) .attr("y", (d, i) => i * 24 + 11) .attr("font-size", "13px") .text(d => d.charAt(0).toUpperCase() + d.slice(1)); return wrapper; } 37:[{"id":"e16ac98e2a51e834a764b7d4cf5f738cd06ca8a8b5f41553db51f789097a000a7da8c1c6f694b1ff5b632df3b91ab42dd008c62c7bae5779e1bf5412f3b2ea38","href":"https://static.observableusercontent.com/files/e16ac98e2a51e834a764b7d4cf5f738cd06ca8a8b5f41553db51f789097a000a7da8c1c6f694b1ff5b632df3b91ab42dd008c62c7bae5779e1bf5412f3b2ea38","name":"imdb_genres.csv","type":"text/csv","lastModified":1745899478059.348,"size":25731889}] 2f:{"id":"627f5f7cf38a430f","slug":null,"title":"Final Project Presentation (04/30/2025)","thumbnail":null,"access_level":"public","create_time":"$D2025-04-29T04:04:38.059Z","update_time":"$D2025-05-03T04:50:59.473Z","view_time":null,"first_public_time":"$D2025-10-19T10:40:53.995Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":877,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1bb5dc9729da744f","login":"venkata-bhumika-guthi","name":"Venkata Bhumika Guthi","avatar_url":"https://avatars-next.observableusercontent.com/9403a084eb08eff505343cb389febdf816cde17c7b0a970b032dcf2c59bdd678","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Final Project Presentation (04/30/2025)","cells":[{"id":0,"value":"# Final Project Presentation (04/30/2025)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"# Project Overview\n# Title : Oscars Insights: Genres, Directors, and Wins\n\nName : Venkata Bhumika Guthi\n\nZ-ID : Z2016526","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"# Table of Contents\n \nTask 1: Actor–Director Collaboration Network \n\nTask 2:Genre × Category Heatmap \n\nTask 3:Director Career Timeline \n\nTask 4: Category Lifespan Timeline \n\nTasks improvement based on proposal feedback and Data enrichment using some external data source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":859,"value":"# Data Sources & Processing\n\nMain Dataset: Oscar nomination and win data.\n\nIMDb Dataset: For enriching each film with genre labels.\n\nMerged Using: Film IDs(from Oscars dataset) and tconst(in IMDB dataset) to create unified views.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"\n# Visualizations Built\n\nBipartite Network: Shows links from actors → genres → directors for Oscar-winning films.\n\nHeatmap: Displays how many times each genre won in each Oscar category.\n\nDirector Timeline: Dot timeline shows when each top director was nominated or won.\n\nCategory Evolution Chart : Lifespan of Oscar categories across time.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"# Interactivity Design\n\nView : Actor–Genre–Director Bipartite + Director Timeline\n\nHover over an actor/director: highlights the counterpart and the genre they’re linked through.\n\nHover over a genre: highlights directors in timeline who won for that genre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"# Task 1\n\nDesign 1 – Director–Actor Collaboration Network (GOOD)\nTarget:\nReveal creative director–actor pairings that lead to Oscar wins.\n\nData:\nFiltered Oscar wins joined by actor, director, film, and year.\n\nVisual Structure:\n\nRadial network (chord-style layout)\n\nNodes = actors (right, black) and directors (left, red)\n\nLinks = winning collaborations\n\nInteractivity:\n\nHovering a name highlights its link\n\nTooltip shows actor, director, film, and year\n\nReasoning:\nGreat for discovering high-impact partnerships like Scorsese–DiCaprio. Aesthetically engaging, compact, and reveals asymmetric connections clearly.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"d3 = require(\"d3@7\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"oscarsData = await d3.dsv(\"\\t\", \"https://raw.githubusercontent.com/DLu/oscar_data/refs/heads/main/oscars.csv\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"actingData = oscarsData.filter(d => d.Class === \"Acting\" && d.FilmId && d.NomineeIds)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"directingDatatask1 = oscarsData.filter(d => d.Class === \"Directing\" && d.FilmId && d.NomineeIds)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"filmDirectorMap = new Map(\n directingDatatask1.map(d => [d.FilmId.trim(), d.Name.trim()])\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"directorActorPairs = {\n const pairs = [];\n\n for (const d of actingData) {\n const filmId = d.FilmId?.trim();\n const actor = d.Name?.trim();\n const director = filmDirectorMap.get(filmId);\n\n if (director && actor) {\n pairs.push({\n director,\n actor,\n win: d.Winner === \"True\" ? 1 : 0,\n nomination: 1\n });\n }\n }\n\n return pairs;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"collaborationStats = {\n const pairs = new Map();\n\n for (const d of directingDatatask1) {\n if (!d.Film || !d.Nominees || !d.NomineeIds || !d.Winner) continue;\n\n const director = d.Name;\n const actors = d.Nominees.split(\",\"); \n const year = parseInt(d.Year.slice(0, 4)); // extract starting year\n\n for (const actor of actors) {\n const key = `${director}|||${actor.trim()}`;\n\n if (!pairs.has(key)) {\n pairs.set(key, {\n director,\n actor: actor.trim(),\n nominations: 0,\n wins: 0,\n years: new Set() \n });\n }\n\n const pairData = pairs.get(key);\n pairData.nominations += 1;\n if (d.Winner === \"True\") pairData.wins += 1;\n pairData.years.add(year);\n }\n }\n\n return Array.from(pairs.values()).map(d => ({\n ...d,\n year: Math.min(...d.years)\n }));\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"filteredCollabs1 = collaborationStats.filter(d =>\n d.wins > 0 &&\n Math.min(...Array.from(d.years)) >= 1995\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"actorDirectorWins = {\n const winsOnly = oscarsData.filter(d =>\n d.Class === \"Acting\" &&\n d.Winner === \"True\" &&\n d.Film &&\n d.Name\n );\n\n const directorEntries = oscarsData.filter(d =>\n d.Class === \"Directing\" &&\n d.Winner === \"True\" &&\n d.Film &&\n d.Name\n );\n\n // Mapping director and actor\n const filmToDirector = new Map();\n for (const entry of directorEntries) {\n const film = entry.Film.trim();\n const directors = entry.Name.split(/,|&| and /).map(d => d.trim());\n for (const director of directors) {\n filmToDirector.set(film, director);\n }\n }\n\n const pairs = [];\n\n for (const entry of winsOnly) {\n const film = entry.Film.trim();\n const actor = entry.Name.trim();\n const director = filmToDirector.get(film);\n if (director && director !== actor) {\n pairs.push({\n actor,\n director,\n film: film,\n year: entry.Year\n });\n }\n }\n\n return pairs;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"radialData = {\n const nodes = new Set();\n const links = [];\n\n for (const { actor, director } of actorDirectorWins) {\n nodes.add(actor);\n nodes.add(director);\n links.push({\n source: actor,\n target: director\n });\n }\n\n return {\n nodes: Array.from(nodes).map(name => ({ name })),\n links\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"# Task 2\n\nDESIGN 2 – Genre vs. Category Heatmap (Good)\nTarget:\nDo certain genres dominate specific Oscar categories? Are some genres more successful in technical awards vs. performance-based categories?\n\nData:\nMerged IMDb genre data and Oscar award data, joined via FilmId.\nFinal format includes genre, CanonicalCategory, and count of wins.\n\n\nVisual Structure:\nHeatmap with:\n\nX-axis: Canonical award categories\n\nY-axis: Genres\n\nColor: Number of wins (sequential scale)\n\nInteractivity:\n\nDropdown to filter by genre\n\nTooltip shows exact count of wins for genre × category combo\n\nReasoning:\nHeatmaps are excellent at showing distribution intensity across two categorical dimensions. This one immediately reveals genre biases across Oscar history.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"imdbGenres = FileAttachment(\"imdb_genres.csv\").csv()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"oscarsWithGenres = oscarsData.map(d => {\n const genreMatch = imdbGenres.find(g => g.tconst === d.FilmId);\n return {\n ...d,\n genres: genreMatch?.genres ?? \"Unknown\"\n };\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"oscarsExpandedGenres = oscarsWithGenres.flatMap(d =>\n d.genres.split(\",\").map(genre => ({\n ...d,\n genre: genre.trim()\n }))\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"genreCategoryMatrix = {\n const counts = d3.rollups(\n oscarsExpandedGenres.filter(d => d.Winner === \"True\" && d.genre !== \"Unknown\"),\n v => v.length,\n d => d.genre,\n d => d.CanonicalCategory\n );\n\n return counts.flatMap(([genre, categories]) =>\n categories.map(([category, count]) => ({\n genre,\n category,\n count\n }))\n );\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"# Bipartite network","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":488,"value":"\n// 1. Prepare actorDirectorGenreData\nactorDirectorGenreData = {\n const pairs = [];\n\n for (const { actor, director, film, year } of actorDirectorWins) {\n if (!film) continue;\n const filmTitles = film.split(\"|\").map(d => d.trim());\n\n for (const title of filmTitles) {\n const match = oscarsExpandedGenres.find(d => d.Film?.includes(title) && d.genre && d.genre !== \"Unknown\");\n\n if (match) {\n pairs.push({\n actor,\n director,\n genre: match.genre,\n movie: title,\n award: match.CanonicalCategory,\n year: year\n });\n }\n }\n }\n\n return pairs;\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"bipartiteData = {\n const actors = [...new Set(actorDirectorGenreData.map(d => d.actor.trim()))];\n const genres = [...new Set(actorDirectorGenreData.map(d => d.genre.trim()))];\n const directors = [...new Set(actorDirectorGenreData.map(d => d.director.trim()))];\n\n const nodes = [\n ...actors.map(name => ({ id: name, type: \"actor\" })),\n ...genres.map(name => ({ id: name, type: \"genre\" })),\n ...directors.map(name => ({ id: name, type: \"director\" }))\n ];\n\n const nodeById = new Map(nodes.map(d => [d.id, d]));\n\n const links = [\n ...actorDirectorGenreData.map(d => ({\n source: nodeById.get(d.actor.trim()),\n target: nodeById.get(d.genre.trim()),\n movie: d.movie,\n award: d.award,\n year: d.year\n })),\n ...actorDirectorGenreData.map(d => ({\n source: nodeById.get(d.genre.trim()),\n target: nodeById.get(d.director.trim()),\n movie: d.movie,\n award: d.award,\n year: d.year\n }))\n ];\n\n return { nodes, links };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"# Task 3\n\nDESIGN 3 – Director Career Timelines (Dot Plot)\nTarget:\nHow consistent are directors in receiving Oscar nominations or wins over time? Which directors have long award trajectories?\n\nData:\nFiltered director nomination and win data from Oscars, including director, year, win.\n\nVisual Structure:\nDot timeline:\n\nX-axis: Year of nomination\n\nY-axis: Director name\n\nCircle: Each dot = a nomination (black = win, gray = nomination)\n\nInteractivity:\n\nHover shows tooltip with director, year, and award status\n\nReasoning:\nDot timelines reveal longevity and clustering. It’s a clean way to show which directors are consistently recognized and which ones peaked in a short span.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"directingData = oscarsData.filter(d =>\n d.CanonicalCategory && d.CanonicalCategory.toLowerCase().includes(\"directing\")\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"directingData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"parsedDirectingData = directingData.map(d => ({\n year: +d.Year.slice(0, 4), // Extracting the first year from \"1927/28\"\n director: d.Name,\n win: d.Winner === \"True\"\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3.extent(parsedDirectingData, d => d.year)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"topDirectingData = {\n // Getting only top 50 most-nominated directors\n const counts = d3.rollups(\n parsedDirectingData,\n v => v.length,\n d => d.director\n );\n \n const topDirectors = counts\n .sort((a, b) => d3.descending(a[1], b[1]))\n .slice(0, 50)\n .map(d => d[0]);\n\n return parsedDirectingData.filter(d =>\n topDirectors.includes(d.director)\n );\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"directorTimelineData = {\n const counts = d3.rollups(\n parsedDirectingData,\n v => v.length,\n d => d.director\n );\n \n const topDirectors = counts\n .sort((a, b) => d3.descending(a[1], b[1]))\n .slice(0, 479)\n .map(d => d[0]);\n\n return parsedDirectingData.filter(d =>\n topDirectors.includes(d.director)\n );\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof selectedDirector = Inputs.select(\n [\"All\", ...new Set(topDirectingData.map(d => d.director)).values()],\n { label: \"Select Director\" }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"bipartiteDirectorSet = new Set(\n bipartiteData.nodes.filter(d => d.type === \"director\").map(d => d.id)\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"\nfilteredDirectingData = directorTimelineData.filter(d =>\n bipartiteDirectorSet.has(d.director)\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"filteredDirectingDataold = topDirectingData.filter(d =>\n selectedDirector === \"All\" || d.director === selectedDirector\n)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"function updateTimelineHighlight(directors) {\n d3.selectAll(\".timeline-dot\")\n .attr(\"fill\", d => d.win ? \"#3c3c3c\" : \"#ccc\")\n .attr(\"r\", 6);\n\n d3.selectAll(\".timeline-dot\").each(function(d) {\n if (directors.includes(d.director)) {\n d3.select(this)\n .attr(\"fill\", d.win ? \"#2ca02c\" : \"#ff851b\") \n .attr(\"r\", 8);\n }\n });\n\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"function clearTimelineHighlight() {\n d3.selectAll(\".timeline-dot\")\n .attr(\"fill\", d => d.win ? \"#3c3c3c\" : \"#ccc\")\n .attr(\"r\", 6);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"// Example debug\nbipartiteData.nodes.filter(d => d.type === \"director\").map(d => d.id)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"filteredDirectingData.map(d => d.director)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"{\n const bipartiteDirectors = new Set(bipartiteData.nodes.filter(d => d.type === \"director\").map(d => d.id));\n const timelineDirectors = new Set(directorTimelineData.map(d => d.director));\n\n const missing = [...bipartiteDirectors].filter(d => !timelineDirectors.has(d));\n\n return missing.length === 0 \n ? \" All bipartite directors are present in timeline data.\"\n : `Missing in timeline: ${missing.join(\", \")}`;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"# Task 4\n\nDESIGN 4 – Lifespan of Oscar Categories Over Time\nTarget:\nHow have Oscar categories evolved? Which categories are long-standing, and which ones disappeared?\n\nData:\nCanonicalCategory --> Year mapping from the Oscars dataset. Transformed into start, end for each category.\n\nVisual Structure:\nBar chart timeline:\n\nY-axis: Grouped/cleaned category labels (e.g., WRITING)\n\nX-axis: Time from 1927 to 2024\n\nBar: Lifespan of each category\n\nInteractivity:\n\nTooltip shows start year, end year, and total lifespan in years\n\nReasoning:\nTimeline bars are simple and effective for showing category evolution. Grouping categories (e.g., merging WRITING subtypes) makes the view cleaner.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"categoryLifespans = d3.rollups(\n oscarsData,\n v => ({\n start: d3.min(v, d => +d.Year.split(\"/\")[0]),\n end: d3.max(v, d => +d.Year.split(\"/\")[0])\n }),\n d => d.Category \n).map(([category, { start, end }]) => ({ category, start, end }));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"oscarsGroupedCategories = oscarsData.map(d => {\n let cat = d.CanonicalCategory.toUpperCase();\n\n let grouped;\n if (cat.includes(\"WRITING\")) grouped = \"WRITING\";\n else if (cat.includes(\"DIRECTING\")) grouped = \"DIRECTING\";\n else if (cat.includes(\"ACTOR\") || cat.includes(\"ACTRESS\")) grouped = \"ACTING\";\n else if (cat.includes(\"SOUND\") || cat.includes(\"VISUAL\") || cat.includes(\"TECHNICAL\")) grouped = \"TECHNICAL\";\n else if (cat.includes(\"DOCUMENTARY\")) grouped = \"DOCUMENTARY\";\n else if (cat.includes(\"SHORT\")) grouped = \"SHORT FILMS\";\n else if (cat.includes(\"CINEMATOGRAPHY\")) grouped = \"CINEMATOGRAPHY\";\n else if (cat.includes(\"ANIMATED\")) grouped = \"ANIMATED\";\n else if (cat.includes(\"MUSIC\") || cat.includes(\"SCORE\")) grouped = \"MUSIC\";\n else grouped = cat;\n\n return {\n year: +d.Year.slice(0, 4), \n groupedCategory: grouped\n };\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"categoryGroupLifespans = Array.from(\n d3.group(oscarsGroupedCategories, d => d.groupedCategory),\n ([groupedCategory, entries]) => {\n return {\n category: groupedCategory,\n start: d3.min(entries, d => d.year),\n end: d3.max(entries, d => d.year),\n group: entries[0].group \n };\n }\n).sort((a, b) => a.start - b.start);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof dashboard = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"{\n const bipartite = viewof bipartiteOscars;\n const timeline = viewof directorTimeline1;\n\n const column = document.getElementById(\"chart-column\");\n column.innerHTML = \"\";\n\n bipartite.style.width = \"100%\";\n timeline.style.width = \"100%\";\n\n column.appendChild(bipartite);\n column.appendChild(timeline);\n\n return document.getElementById(\"dashboard\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"