25:["$","title",null,{"children":"Explore your favourite Pixar films | FHOÖ Information Visualization | Observable"}] 49:Td5e,{ // Variablen definieren const xField = "release_date"; const yField = viewTimelineScore === "imdb_score" ? "imdb_score" : "rotten_tomatoes_score"; const values = filmsTimeline.filter(d => d[yField] != null); const maxVal = d3.max(values, d => d[yField]); const minVal = d3.min(values, d => d[yField]); const highest = values.filter(d => d[yField] === maxVal); const lowest = values.filter(d => d[yField] === minVal); const showComparison = viewCompareTimeline; const formatDate = d3.timeFormat("%d.%m.%Y"); const yOtherField = d => { if (viewTimelineScore === "imdb_score") { return d.rotten_tomatoes_score / 10; } else { return d.imdb_score * 10; } }; const currentScore = d => { if (viewTimelineScore === "imdb_score") { return d.rotten_tomatoes_score; } else { return d.imdb_score; } }; const yAxisConfig = viewTimelineScore === "imdb_score" ? { label: "IMDb Score", domain: [0, 10] } : { label: "Rotten Tomatoes Score", domain: [0, 100] }; // Plot zurückgeben return Plot.plot({ width: 1200, inset: 20, interval: d3.utcYear, x: { label: "Release Date", type: "time" }, y: yAxisConfig, marginTop: showComparison ? 0 : 58, color: showComparison ? { domain: ["Vergleich", "Aktuell", "Höchster Score", "Niedrigster Score"], range: [lightColor, color2, warningColor1, warningColor2], legend: true, label: "Score-Typ", columns: 2, width: 220 } : undefined, marks: [ Plot.ruleY([0]), // Comparison toggle (showComparison ? // Linie anderer Score [Plot.line(filmsTimeline, { x: xField, y: yOtherField, stroke: lightColor, strokeWidth: 1, strokeDasharray: "4 4", sort: d => d.release_date }), // Linie aktueller Score Plot.line(filmsTimeline, { x: xField, y: yField, stroke: color2, strokeWidth: 2, sort: d => d.release_date }), // Trendline Plot.linearRegressionY(filmsTimeline, { x: xField, y: yField, stroke: warningColor1, fillOpacity: 0 })] : // Bilder [Plot.image(filmsTimeline, { x: xField, y: yField, src: "image", width: 60, dy: 30, // Y })] ), // Dot Plot.dot(filmsTimeline, { x: xField, y: yField, fill: color1, r: 6, title: d => { const score = viewTimelineScore === "imdb_score" ? `IMBD Score: ${d.imdb_score.toFixed(1)} / 10` : `RT Score: ${d.rotten_tomatoes_score} / 100`; return `${d.film}\n📅 ${formatDate(d.release_date)}\n⭐ ${score}`; }, tip: true }), // Comparison toggle (showComparison ? // Highest scores [Plot.dot(highest, { x: xField, y: yField, fill: "red", r: 8, stroke: "white", strokeWidth: 1.5 }), // Lowest scores Plot.dot(lowest, { x: xField, y: yField, fill: "blue", r: 8, stroke: "white", strokeWidth: 1.5 })] : [] ), ] }) }4a:Tb61,

![cars2.png](${await FileAttachment("cars2@1.png").url()})

Hierbei sieht man schon, dass die Filme zu Beginn eher gemütlich veröffentlicht wurden und in den letzten Jahren immer mehr wurden. Beispielsweise wurden allein in den letzten vier Jahren 7 Filme veröffentlicht. So viele Filme sind zu Beginn 1995 über einen Zeitraum von elf Jahren erschienen. Seitdem erscheint mindestens ein Film pro Jahr. Die Ausnahme ist hierbei 2014, wo es durch Produktions-Probleme des Films "The Good Dinosaur" zu starken Verzögerungen kam ([Quelle](https://www.cnet.com/tech/gaming/no-pixar-film-in-2014-due-to-reported-production-issues/)). Aber davon ließ sich Pixar offensichtlich nicht beirren... oder? Da uns als Daten der International Movie Database (IMDb) und der Rotten Tomatoes (RT) Score zur Verfügung stand, wollten wir diese einmal miteinander vergleichen. Wie schneiden die Filme denn über den Verlauf der Zeit ab? Dazu aktivieren wir nun den Score-vergleich, der uns direkt eine etwas andere Ansicht liefert. Anmerkung: Die Y-Achse wird von TMDb und RT skaliert. Somit kann an sich kein direkter Vergleich zwischen beiden stattfinden, aber die Relation untereinander kann verglichen werden. Dabei fällt zunächst einmal auf, dass der IMDb-Score bedeutend weniger schwankt zwischen den Filmen. Und nicht nur dies, laut IMBd sidn die beliebtesten Filme "Wall-E" und "Coco". Laut RT jedoch sind "Toy Story" und "Toy Story 2" die bestbewertesten aller Zeit. Das liegt jedoch dem zugrunde wie IMDb und RT funktionieren: Während RT aus einem Team an Kurator*innen besteht, welche sich jeden Tag neue Kritiken durchliest, kann auf IMDb im grunde jeder eine Bewertung hinterlassen. Somit ist hier zu Unterscheiden zwischen basierter Kritik und Nutzerempfinden ([Quelle](https://www.kino.de/film/pulp-fiction-1994/news/rotten-tomatoes-metacritic-und-imdb-so-kommen-die-wertungen-der-filmportale-zustande/)). Was weiterhin bei beiden Scores stark auffällt ist "Cars 2". Besonders RT hat hier eine zuvor nie dagewesene negative Bewertung hinterlassen. Der Grund hierfür ist laut Diskussionen eine einzigartige Änderung des Inhalts und Genre vom Fokus Familie und Freundschaft zu Car Action, Crime und Spy. Aber darauf kommen wir gleich nochmal zurück in Kapitel 2. Über die Zeit ist allerings über die Trendlinie eine weitere wichtige Information erkennbar: Im Schnitt werden die Pixar-Filme sowohl bei IMDb als auch bei RT immer schlechter bewertet. Ein Grund hierfür ist Cars 2, doch auch Lightyear erreichte bei den Zuschauer*innen auf IMDb die schlechtesten Bewertungen aller Pixar Filme. Doch was unterscheidet die Filme von heute von damals? Dazu schauen wir einmal auf die Genre und den Plot der Filme.4b:T1699,{ const films = dataFilms; const container = html``; const lilImg = html`

`; const selectedType = viewSimilarityType; const inclGenres = selectedType === "genres" || selectedType === "both"; const inclSubgenres = selectedType === "subgenres" || selectedType === "both"; // computeMatrix function computeMatrix(includeGenres, includeSubgenres) { const matrix = []; for (let i = 0; i < filmsWithTitles.length; i++) { matrix[i] = []; for (let j = 0; j < filmsWithTitles.length; j++) { const genresA = genreMap.get(Number(filmsWithTitles[i].film_id)) || new Set(); const genresB = genreMap.get(Number(filmsWithTitles[j].film_id)) || new Set(); matrix[i][j] = jaccard(genresA, genresB); } } return matrix; } // Matrix draw function drawMatrix(container, filmsWithTitles, matrix) { container.innerHTML = ""; const margin = {top: 70, right: 80, bottom: 100, left: 100}; const size = 600; const cellSize = size / matrix.length; const svg = d3.create("svg") .attr("width", size + margin.left + margin.right) .attr("height", size + margin.top + margin.bottom); const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 1]); const x = d3.scaleLinear().domain([0, matrix.length]).range([0, size]); const y = d3.scaleLinear().domain([0, matrix.length]).range([0, size]); for (let i = 0; i < matrix.length; i++) { const genresA = genreMap.get(Number(filmsWithTitles[i].film_id)) || new Set(); for (let j = 0; j < matrix.length; j++) { const genresB = genreMap.get(Number(filmsWithTitles[j].film_id)) || new Set(); const common = [...genresA].filter(x => genresB.has(x)); svg.append("rect") .attr("x", x(j) + margin.left) .attr("y", y(i) + margin.top) .attr("width", cellSize) .attr("height", cellSize) .attr("fill", color(matrix[i][j])) .style("cursor", "pointer") .on("mouseover", function () { d3.select(this) .attr("stroke", lightBorderColor) .attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this) .attr("stroke", "none"); }) .on("click", () => { viewof filmA.value = filmsWithTitles[i].title; viewof filmB.value = filmsWithTitles[j].title; viewof filmA.dispatchEvent(new Event("input")); viewof filmB.dispatchEvent(new Event("input")); //Scrrolling const target = document.getElementById("filmCompareBox"); if (target) target.scrollIntoView({ behavior: "smooth", block: "end" }); }) .append("title") .text(`Ähnlichkeit: ${filmsWithTitles[i].title} ↔ ${filmsWithTitles[j].title}\n${matrix[i][j].toFixed(2)}\n\nGemeinsame Kategorien:\n${common.length > 0 ? common.join(", ") : "(keine)"}`); } // Legends gradient function addLegend(svg, colorScale, width = 120, height = 10) { const defs = svg.append("defs"); const gradientId = "legend-gradient"; const gradient = defs.append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%"); const steps = 10; for (let i = 0; i <= steps; i++) { const t = i / steps; gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(t)); } const legendGroup = svg.append("g") .attr("transform", `translate(20, 20)`); // gradient draws legendGroup.append("rect") .attr("width", width) .attr("height", height) .style("fill", `url(#${gradientId})`) .style("stroke", "#000") .style("stroke-width", 0.5); // Desc legendGroup.append("text") .attr("x", 0) .attr("y", -5) .style("font-size", "12px") .text("Ähnlichkeit"); // Desc l legendGroup.append("text") .attr("x", 0) .attr("y", height + 15) .attr("text-anchor", "start") .style("font-size", "10px") .text("0"); // Desc r legendGroup.append("text") .attr("x", width) .attr("y", height + 15) .attr("text-anchor", "end") .style("font-size", "10px") .text("1"); } addLegend(svg, color); } // Achsen svg.append("g") .attr("transform", `translate(${margin.left},${margin.top + size})`) .call(d3.axisBottom(x).ticks(filmsWithTitles.length).tickFormat(i => filmsWithTitles[i]?.title || "")) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("dx", "-0.6em") .attr("dy", "-0.5em"); svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y).ticks(filmsWithTitles.length).tickFormat(i => filmsWithTitles[i]?.title || "")); container.appendChild(svg.node()); } // Create & Draw let matrix = computeMatrix(inclGenres, inclSubgenres); drawMatrix(container, filmsWithTitles, matrix); container.prepend(lilImg); return html`${container}`; }4c:Tc7a,{ const selectedType = viewSimilarityType; const filmAData = filmsWithTitles.find(f => f.title === filmA); const filmBData = filmsWithTitles.find(f => f.title === filmB); // Fallback & Quit. if (!filmAData || !filmBData) return html`

Bitte zwei Filme auswählen.

`; const setA = genreMap.get(Number(filmAData.film_id)) || new Set(); const setB = genreMap.get(Number(filmBData.film_id)) || new Set(); const common = new Set([...setA].filter(x => setB.has(x))); const onlyA = new Set([...setA].filter(x => !setB.has(x))); const onlyB = new Set([...setB].filter(x => !setA.has(x))); const score = jaccard(setA, setB); const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 1]); const modeLabel = selectedType === "both" ? "Genres & Subgenres" : selectedType === "genres" ? "Genres" : "Subgenres"; // getCategory function getCategory(value) { const matching = dataGenres.find(d => d.value === value); return matching?.category || "Unknown"; } // styledList function styledList(items) { return html`

${value}

`; } return html`

Genre

Subgenre

Vergleich: ${filmAData.title} ↔ ${filmBData.title}

Ähnlichkeitswert nach ${modeLabel} (Jaccard): ${score.toFixed(2)}

Gemeinsame Kategorien ${styledList(common)}

Nur in ${filmAData.title} ${styledList(onlyA)}

Nur in ${filmBData.title} ${styledList(onlyB)}

`; } 4d:Tba7,
Vorab zunächst zur Berechnung der Ähnlichkeitsmatrix. Hierbei wurde der Jaccard-Index herangezogen, welcher in diesem Zusammenhang als Maß der Ähnlichkeit zwischen zwei Mengen (Genres) verwendet wurde. Dabei wird die Schnittmenge von Film A und Film B durch die Vereinigungsmenge selbiger dividiert. Heraus kommt ein Wert zwischen 0 und 1, wobei ein höherer Wert gleich einer höheren Ähnlichkeit bzw. mehr Überschneidungen der Genre gleichgesetzt wird. Aber gehen wir doch von der blanken Theorie zurück zum eigentlichen Vergleich. Wenn wir erstmal beide Typen von Genre lesen, sieht man schonmal ganz links oben etwas interessantes. Anscheinend sind sich die ersten vier Filme vom Genre recht ähnlich. Sie alle lassen sich in Adventure, Animation, Comedy und Computer Animation einteilen. Besonders Toy Story und Monsters, Inc. sind absolut identisch. Dies ist interessant, da beide Filme sich vom Plot her doch eindeutig unterscheiden. Auch stechen Wall-E und Lightyear hervor, welche sich von den meisten anderen Filmen unterscheiden. Lightyear ist zwar ein Prequel von Toy Story, dreht sich jedoch um den gleichnamigen Character, der in einer Sci-Fi-Welt agiert. Weiters scheinen sich alle Filme zu ähneln, es gibt keinen Wert unter 0.2. Um dies zu Untersuchen, wurde Genre und Subgenre einmal differenziert. Wenn wir nun nur Genre auswählen... zeigt sich, dass nur sieben Filme ein einziges anderes Hauptgenre haben wie Action und Family. Alle anderen Filme haben als Hauptgenre Adventure, Animation und Comedy. Wenn wir diese Information nun herausfiltern und nur die Subgenre anzeigen lassen, ist die Grund-Ähnlichkeit schon geringer, da es auch generell mehr Subgenres gibt. Auffällig ist, dass nicht nur Wall-E weiterhin sich von den meisten anderen am deutlichsten unterscheidet. In dieser Subgenre-Ansicht sticht unter anderem Cars 2 auch mehr hervor. Dies liegt daran, dass Pixar sich hier generell von anderen Pixar Filmen distanziert hat. Während dies jedoch bei Wall-E zu besseren Bewertungen geführt hat, erlitt Cars 2 einen Tiefpunkt des RT-Scores. Wenn man sich beide Filme im Vergleich genauer ansieht, erkennt man, dass sie den niedrigsten Ähnlichkeitswert aufweisen (0.2/0.09). Jedoch verlässt sich Wall-E eher auf Adventure und Family, ist somit direkt an Familien gerichtet, während Cars 2 eher in Richtung Motorsport, Crime und Spy geht. Wenn wir jedoch genauer schauen fällt auf, dass Adventure, Animation und Computer Animation Genres sind, die anscheinend in jedem Film vorkommen. Für eine bessere Übersicht gehen wir einmal darauf ein, was für Genres es gibt und wie diese verteilt sind.

4e:T894,{ const lilImg = html`

`; const genreCounts = new Map(); const genreCategory = new Map(); const genreMap = getGenresByType(filmsWithTitles, dataGenres, true, true); for (let values of genreMap.values()) { for (let g of values) { genreCounts.set(g, (genreCounts.get(g) || 0) + 1); if (!genreCategory.has(g)) { const entry = dataGenres.find(d => d.value === g); genreCategory.set(g, entry?.category || "Unknown"); } } } const data = Array.from(genreCounts.entries()).map(([value, count]) => ({ name: value, count, category: genreCategory.get(value) })); data.sort((a, b) => b.count - a.count); const usedCategories = Array.from(new Set(data.map(d => d.category))).filter(Boolean); const categoryColors = { "Genre": genreColor, "Subgenre": subgenreColor, "Unknown": lightColor }; const colorMap = Object.fromEntries(usedCategories.map(c => [c, categoryColors[c]])); const sortedNames = data.map(d => d.name); const plot = Plot.plot({ width: 1200, height: 500, marginLeft: 60, marginBottom: 150, x: { label: null, tickRotate: -65, domain: sortedNames, label: "Kategorie" }, y: { label: "Vorkommen in Filmen (Anzahl)", grid: true }, color: { legend: true, domain: usedCategories, range: usedCategories.map(c => colorMap[c]), label: "Kategorie" }, marks: [ Plot.barY(data, { x: "name", y: "count", fill: "category", title: d => `${d.name}\nKategorie: ${d.category}\nAnzahl: ${d.count}` }) ] }); // Alles in einem Container kombinieren const container = html`

`; container.appendChild(lilImg); container.appendChild(plot); return container; } 4f:T9d9,{ const lilImg = html`

`; const plots = filmsWithTitles.map(d => d.plot?.toLowerCase() ?? "").join(" "); const stopwords = new Set("i,gets,sets,set,get,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall".split(",")); let words = plots.split(/[\s.]+/g) .map(w => w.replace(/^[“‘"\-—()\[\]{}]+/g, "")) .map(w => w.replace(/[;:.!?()\[\]{},"'’”\-—]+$/g, "")) .map(w => w.replace(/['’]s$/g, "")) .map(w => w.substring(0, 30)) .map(w => w.toLowerCase()) .filter(w => w); // nur nicht-leere Wörter const wordCounts = new Map(); for (const word of words) { wordCounts.set(word, (wordCounts.get(word) || 0) + 1); } switch (viewWordCloudFilter.value) { case "stopfilter": words = words.filter(w => !stopwords.has(w)); break; case "stopuniquefilter": words = words.filter(w => !stopwords.has(w) && wordCounts.get(w) > 1); break; case "nofilter": default: break; } const cloud = WordCloud(words, { width, height: 400, invalidation }); const container = html`

`; container.appendChild(lilImg); container.appendChild(cloud); return container; } 50:T6fe,Ungefiltert zeigt diese Wortwolke alle Wörter und ihr Vorkommen für alle Filme. Dies dient nur zur Vollständigkeit. Natürlich sind sogenannte Stopwörter wie "the", "in", "a" am Häufigsten vertreten, also filtern wir diese im nächsten Schritt heraus. Nach Stopwörtern gefiltert sieht man schon viel eher den Umfang an Wörtern und auch an Themen, die durch die Filme im Plot behandelt werden. Darunter zählen beispielsweise "kingdom", "rescue", "spaceman", "princess" und weitere. Bereits hier wird ersichtlich, in welche Themenrichtung sich die meisten Pixar-Filme bewegen und dies genauer als durch die Genre. Da jedoch viele Wörter hier nur einmalig vertreten sind, filtern wir diese ebenfalls heraus. Nun sind nur noch jene Wörter vorhanden, die mehrmals in allen Filmen vorkommen. Besonders häufig sind dabei "new", "world", "toy", "family", "race", "save", "monsters" und "woody". Woody ist der Protagonist der Toy Story Reihe, welche sich bisher über vier Hauptteile zieht. Interessanterweise ist das Genre "Family" nur einmal in allen Filmen vertreten, jedoch mehrmals auch Teil der eigentlichen Handlung. Nur Wall-E hat das Genre "Family", wodurch sich abzeichnet, dass das Genre in diesem Fall auf eine spezielle Zielgruppe zurückzuführen ist und das Thema selbst öfters bearbeitet wird. Die meisten der Wörter in dieser Wortwolke und der vorigen Analyse bestätigen, dass Pixar generell und bis heute ein Animationsstudio ist, welches sich auf die jüngere Generation (teenage, young, children) spezialisiert hat, jedoch auch Erwachsenen und Familien (house, home, family, together) ein Abenteuer (adventure, action, mission) bietet und mit auf eine Reise (journey, way, travels) nimmt. Finden wir also heraus, wer verantwortlich ist für die Pixar-Filme. 51:T5ab,{ const wrapper = html`

Top 12

`; const genderByName = new Map(data_people.map(d => [d.name, d.gender])); const plot = Plot.plot({ width: 1000, marginLeft: 150, height: 400, marks: [ Plot.barX(top10, { y: "name", x: "count", sort: {y: "-x"}, fill: d => genderByName.get(d.name) ?? "Unknown", title: d => { const movies = data_people .filter(person => person.name === d.name) .map(person => [person.film, person.role_type]); return `Number of roles: ${d.count}\n🎥 ${movies.join("\n🎥 ")}`; }, tip: true, }) ], color: { domain: ["male", "female"], range: ["steelblue", "orange"] }, y: { label: "Name" }, x: { label: "Number of roles in Movies" }, style: { fontSize: "12px" } }); const lilImg = html`

`; wrapper.appendChild(lilImg); wrapper.appendChild(plot); return wrapper; } 52:T4b1,{ const wrapper = html`

Gender Distribution by Role Type

`; const plot = Plot.plot({ width: 800, height: 400, marks: [ Plot.barY(plotDataGenderRoles, { x: "role_type", y: "count", fill: "gender", title: d => { return `${d.gender === 'male' ? '♂️' : '♀️'} ${d.gender}: ${d.count}`; }, }) ], color: { legend: true, domain: ["male", "female"], range: ["steelblue", "orange"] }, x: { label: "" }, y: { label: "Count" }, style: { fontSize: "12px" } }); const lilImg = html`

`; wrapper.appendChild(plot); wrapper.appendChild(lilImg); return wrapper; } 53:T59c,{ const wrapper = html`

Percentage of Female Roles over the years

`; const plot = Plot.plot({ width: 800, height: 400, marks: [ Plot.areaY(percentageFemaleRoles, { x: "year", y: "percentage", fill: "#FFD580" }), Plot.line(percentageFemaleRoles, { x: "year", y: "percentage", stroke: "orange" }), Plot.dot(percentageFemaleRoles, { x: "year", y: "percentage", fill: "orange", title: d => { const movies = moviesByYear.get(d.year) || []; return `${d.year}\n♀️${Math.round(d.percentage)}%\n🎥 ${movies.join("\n🎥 ")}`; }, tip: true }) ], x: { label: "Year" }, y: { label: "Percentage of Female Roles", domain: [0, 100] } }); const lilImg = html`

`; wrapper.appendChild(lilImg); wrapper.appendChild(plot); return wrapper; } 54:T62a,chart = { // Set dimensions and create SVG container const width = 800; const height = 300; const radius = Math.min(width, height) / 2; const innerRadius = radius * 0; // Creates the donut shape const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Create the pie generator const pie = d3.pie() .value(d => d.count); // Create the arc generator const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(radius); // Create color scale const color = d3.scaleOrdinal() .domain(["Original", "Sequel"]) .range(["steelblue", "orange"]); // Draw the arcs svg.selectAll("path") .data(pie(sequelDataArray)) .enter() .append("path") .attr("d", arc) .attr("fill", d => color(d.data.sequel)) .attr("stroke", "white") .attr("stroke-width", 2) .append("title") .text(d => `${d.data.sequel==='Sequel'? '📚':'📗'} ${d.data.sequel}: ${d.data.count}`); // Add legend const legend = svg.append("g") .attr("transform", `translate(${radius + 20}, ${-radius})`); legend.selectAll("rect") .data(sequelDataArray) .enter() .append("rect") .attr("x", 0) .attr("y", (d, i) => i * 20) .attr("width", 18) .attr("height", 18) .attr("fill", d => color(d.sequel)); legend.selectAll("text") .data(sequelDataArray) .enter() .append("text") .attr("x", 24) .attr("y", (d, i) => i * 20 + 9) .attr("dy", "0.35em") .text(d => d.sequel); // Return the SVG node return svg.node(); }55:T54a,

Toy Story

🎫🎫🎫🎫🎫

(5 films)

Monsters, Inc

🎬🎬

(2 films)

Finding Nemo

🎬🎬

(2 films)

The Incredibles

🎬🎬

(2 films)

Cars

📹📹📹

(3 films)

Inside Out

🎬🎬

(2 films)

56:T575,{ const wrapper = html`

Movie Rating of ${selectFranchise} Franchise

`; // Variablen definieren const xField = "release_date"; const yField = radiosFranchise; const values = franchiseData.filter(d => d[yField] != null && d.franchise === radiosFranchise); const formatDate = d3.timeFormat("%d.%m.%Y"); // Plot zurückgeben const plot = Plot.plot({ width: 1200, inset: 20, interval: d3.utcYear, x: { label: "Release Date", type: "time", domain: [new Date("1994-11-22"), new Date("2025-06-14")] }, y: {label: "Rating", domain: radiosFranchise === "imdb_score" ? [0, 10] : [0, 100]}, color: undefined, style: { fontSize: "12px" }, marks: [ Plot.ruleY([0]), // Bilder [Plot.image(franchiseData, { x: xField, y: yField, src: "image", width: 120, dy: 60, // Y })], // Dot Plot.dot(franchiseData, { x: xField, y: yField, fill: color1, r: 6, title: d => { return `${d.film}\n📅 ${formatDate(d.release_date)}\n⭐ Score: ${d[radiosFranchise]}\n📚Category: ${d.sequel_details}`; }, tip: true }), ] }) wrapper.appendChild(plot); return wrapper; }57:T67b,{ const wrapper = html`

${radiosFinance === 'ROI' ? 'ROI' : 'Worldwide Box Office'} for ${selectFranchise} Franchise

`; const plot = Plot.plot({ height: 400, marginLeft: 80, marks: [ Plot.barY(franchiseData, { x: "filmName", y: d => { return radiosFinance === 'ROI' ? ((d.box_office_worldwide - d.budget) / d.budget) * 100 : d.box_office_worldwide; }, fill: "sequel", title: d => { return `💸 Box office: ${d.box_office_worldwide} $\n📈 ROI: ${Math.round( ((d.box_office_worldwide - d.budget) / d.budget) * 100 )}%`; }, }) ], color: { legend: true, domain: ["Original", "Sequel"], range: ["steelblue", "orange"] }, x: { label: "Film", domain: franchiseData.map(d => d.filmName) }, y: { label: radiosFinance === 'ROI' ? 'ROI in %' : 'Worldwide Box Office', domain: radiosFinance === 'ROI' ? [0, 1250] : [0, 1900000000] }, style: { fontSize: "12px" } }); const lilImg = html`

`; wrapper.appendChild(lilImg); wrapper.appendChild(plot); return wrapper; } 58:[{"id":"3e603b1b1b94f7f03400c5e14f5c39c91ab9b08881e312e7435adef8b7709ffcd029a2a7206c1cbc0a12fb3ae451a2a916212310c8b5729492e6911216443b9b","href":"https://static.observableusercontent.com/files/3e603b1b1b94f7f03400c5e14f5c39c91ab9b08881e312e7435adef8b7709ffcd029a2a7206c1cbc0a12fb3ae451a2a916212310c8b5729492e6911216443b9b","name":"grafik.png","type":"image/png","lastModified":1755096841943.558,"size":770391},{"id":"656240274abf7c9c98d61a0605043f2ac2d9d4f366c5acbc7336c03f37986f07f2bcc9f15c6f738468bf237ad1552c56f9fcfdff5fe80053bed0f0cd3a2ddde5","href":"https://static.observableusercontent.com/files/656240274abf7c9c98d61a0605043f2ac2d9d4f366c5acbc7336c03f37986f07f2bcc9f15c6f738468bf237ad1552c56f9fcfdff5fe80053bed0f0cd3a2ddde5","name":"image@27.png","type":"image/png","lastModified":1755096841943.558,"size":835191},{"id":"87edcf70b6f01f329735b47563b0b0f3c17900ac4135a402ba07979c5a771533b002743ae75c3f6af50be47847d5d706bfe8a6d935d55c9cd7c7490f55bd3214","href":"https://static.observableusercontent.com/files/87edcf70b6f01f329735b47563b0b0f3c17900ac4135a402ba07979c5a771533b002743ae75c3f6af50be47847d5d706bfe8a6d935d55c9cd7c7490f55bd3214","name":"image@26.png","type":"image/png","lastModified":1755096841943.558,"size":258802},{"id":"bde47d855ea833dc1abf57087015028a6482289c5fe072e1724a14344dfe949bfd1dcbeb1127adf267905f7af41d398ed82d56d88757c3918142e35c96259e7b","href":"https://static.observableusercontent.com/files/bde47d855ea833dc1abf57087015028a6482289c5fe072e1724a14344dfe949bfd1dcbeb1127adf267905f7af41d398ed82d56d88757c3918142e35c96259e7b","name":"image@25.png","type":"image/png","lastModified":1755096841943.558,"size":1567511},{"id":"86843cb4de9f5d8f3db75f85dfbd14131c4b639095da0c2050c93c15efa79b34c5edbaa264aa0578292e3aad7320612fb6e0028f8aca7e235df0c682870e1180","href":"https://static.observableusercontent.com/files/86843cb4de9f5d8f3db75f85dfbd14131c4b639095da0c2050c93c15efa79b34c5edbaa264aa0578292e3aad7320612fb6e0028f8aca7e235df0c682870e1180","name":"image@24.png","type":"image/png","lastModified":1755096841943.558,"size":126603},{"id":"4f69f4da39d46092928f8f9dd9b61c5c32ed18a92446908c8e7170c774522138eb1dcf51fb43adda35a37435d5e181247efd342f8ab3f5b191056e789bcca4e4","href":"https://static.observableusercontent.com/files/4f69f4da39d46092928f8f9dd9b61c5c32ed18a92446908c8e7170c774522138eb1dcf51fb43adda35a37435d5e181247efd342f8ab3f5b191056e789bcca4e4","name":"image@23.png","type":"image/png","lastModified":1755096841943.558,"size":158933},{"id":"c381f0250e414132dbf5276936013836825515575c643587941bb7596e4b8dce892c335344ef6ecd2b50923c9e402632490cc85d2b0424cc0e6b4d8fb2d9f1e4","href":"https://static.observableusercontent.com/files/c381f0250e414132dbf5276936013836825515575c643587941bb7596e4b8dce892c335344ef6ecd2b50923c9e402632490cc85d2b0424cc0e6b4d8fb2d9f1e4","name":"image@21.png","type":"image/png","lastModified":1755096841943.558,"size":1703315},{"id":"b82e568854e5a9e8071dbad44d68212d647c4e0da1b1fe726a8e8d126f2ab5073124c40a759103d0c98138d5a0f17ae8c05e975604b2882ba4bba39fd79fef49","href":"https://static.observableusercontent.com/files/b82e568854e5a9e8071dbad44d68212d647c4e0da1b1fe726a8e8d126f2ab5073124c40a759103d0c98138d5a0f17ae8c05e975604b2882ba4bba39fd79fef49","name":"image@20.png","type":"image/png","lastModified":1755096841943.558,"size":548765},{"id":"d291471a7bec535d43d59aaeb93607c798e6ab78de73acdf6808dc695faf99c3cdd462f658b15fd4e79a12ca4b3c0e1a64c3585c5d58a381a126cf1df5fa6755","href":"https://static.observableusercontent.com/files/d291471a7bec535d43d59aaeb93607c798e6ab78de73acdf6808dc695faf99c3cdd462f658b15fd4e79a12ca4b3c0e1a64c3585c5d58a381a126cf1df5fa6755","name":"image@19.png","type":"image/png","lastModified":1755096841943.558,"size":1232431},{"id":"df41a9a1561f35c529940427fb302b60335b9e8680cfd82e33b7823b40f1aa7a5f9c1921c9c0960a4018e73a8f59f5b2bab280d5378a47af8a6283188589d885","href":"https://static.observableusercontent.com/files/df41a9a1561f35c529940427fb302b60335b9e8680cfd82e33b7823b40f1aa7a5f9c1921c9c0960a4018e73a8f59f5b2bab280d5378a47af8a6283188589d885","name":"image@15.png","type":"image/png","lastModified":1755096841943.558,"size":148399},{"id":"aef2170731dfc0a56c80915b02940dc4e6eb21df2d131e4f4212fc3e057a290e5fbe8723cbf6bfb1eeb546f1ebc8ba954f2ab5e7ad104823f92557a602867786","href":"https://static.observableusercontent.com/files/aef2170731dfc0a56c80915b02940dc4e6eb21df2d131e4f4212fc3e057a290e5fbe8723cbf6bfb1eeb546f1ebc8ba954f2ab5e7ad104823f92557a602867786","name":"image@14.png","type":"image/png","lastModified":1755096841943.558,"size":977811},{"id":"f5bf7b8dc27c52d72a39eb6cf69b809aa86a00a2fb862cafd4ed3982f5ea71b93340098439157357e6ac70c4f19552fe615ab9fe132fed8b0f3533d8f7a9d713","href":"https://static.observableusercontent.com/files/f5bf7b8dc27c52d72a39eb6cf69b809aa86a00a2fb862cafd4ed3982f5ea71b93340098439157357e6ac70c4f19552fe615ab9fe132fed8b0f3533d8f7a9d713","name":"image@13.png","type":"image/png","lastModified":1755096841943.558,"size":928840},{"id":"cb2859ea7cfd85095ff33cbb2ca8d4784803ad09437575891f44e2fdc18a1de384d34d308074ac5bdc8fbbe27fd0b6215437eba629cf82cfd28f17640e957b7f","href":"https://static.observableusercontent.com/files/cb2859ea7cfd85095ff33cbb2ca8d4784803ad09437575891f44e2fdc18a1de384d34d308074ac5bdc8fbbe27fd0b6215437eba629cf82cfd28f17640e957b7f","name":"image@12.png","type":"image/png","lastModified":1755096841943.558,"size":1006746},{"id":"2bc56148b343a9675e9793fadf91930841ff51b463b51a7fb784ef77bb3a8e17fea56e965c673ed0f9de945b0d26da6ecf54ec5c2eef8c33d01e4caba63ab7fd","href":"https://static.observableusercontent.com/files/2bc56148b343a9675e9793fadf91930841ff51b463b51a7fb784ef77bb3a8e17fea56e965c673ed0f9de945b0d26da6ecf54ec5c2eef8c33d01e4caba63ab7fd","name":"image@9.png","type":"image/png","lastModified":1755096841943.558,"size":1055936},{"id":"b6b43dd7b6e6460a5ecb1a69531b888bbbd9c8972ef584f93bdd70645e9de205da4b4b447d958a1db560b4456e641cc739af0943d28f8e558d372f386d4e0d1c","href":"https://static.observableusercontent.com/files/b6b43dd7b6e6460a5ecb1a69531b888bbbd9c8972ef584f93bdd70645e9de205da4b4b447d958a1db560b4456e641cc739af0943d28f8e558d372f386d4e0d1c","name":"pixar_rating.csv","type":"text/csv","lastModified":1755096841943.558,"size":1154},{"id":"7ac9901829ba64d42450c0d60d56f78e16306b72d93fddcf66b7a18e5149cce26ed04facba7b23f4ccaf5563e6e00f5978f25decdaf32f2a8bbb4922de96e065","href":"https://static.observableusercontent.com/files/7ac9901829ba64d42450c0d60d56f78e16306b72d93fddcf66b7a18e5149cce26ed04facba7b23f4ccaf5563e6e00f5978f25decdaf32f2a8bbb4922de96e065","name":"allpixar2.png","type":"image/png","lastModified":1755096841943.558,"size":1152512},{"id":"3b39a67fce107c65f0cbef3d92f2a7987702ceeb42b512ddbe69b3f16b3ed72d2a324a41db88d46fd245803e4510df7531e3aafcbdfe8c5ac6d5952cdc3298db","href":"https://static.observableusercontent.com/files/3b39a67fce107c65f0cbef3d92f2a7987702ceeb42b512ddbe69b3f16b3ed72d2a324a41db88d46fd245803e4510df7531e3aafcbdfe8c5ac6d5952cdc3298db","name":"monsters.png","type":"image/png","lastModified":1755096841943.558,"size":2007158},{"id":"a481ab5daf84a302756451ef66e5fb973f9ab37312def85751776c58775681aeb74427d5057d1043b2ccf2cdfce8740753c68771d368e69392d3ad6b02da0c18","href":"https://static.observableusercontent.com/files/a481ab5daf84a302756451ef66e5fb973f9ab37312def85751776c58775681aeb74427d5057d1043b2ccf2cdfce8740753c68771d368e69392d3ad6b02da0c18","name":"alle3.png","type":"image/png","lastModified":1755096841943.558,"size":878705},{"id":"3090e366c320f53023532b3039b52e0fba4f1cda32678c26b3de1328be4ca8c394164b04e49fdb699123c986522fcd175cebe76e7e9839a617e95ae0a9353910","href":"https://static.observableusercontent.com/files/3090e366c320f53023532b3039b52e0fba4f1cda32678c26b3de1328be4ca8c394164b04e49fdb699123c986522fcd175cebe76e7e9839a617e95ae0a9353910","name":"pixar_films_sequels@5.csv","type":"text/csv","lastModified":1755096841943.558,"size":9816},{"id":"a2f390e32dfeed6f6493f0b2f061baf9d6c6ec337251f0bf5067455d45adba15e8d1d8ef3d6973aaa3be6c425192d1eeef2b7cd907c6de688de0a1e629b14d90","href":"https://static.observableusercontent.com/files/a2f390e32dfeed6f6493f0b2f061baf9d6c6ec337251f0bf5067455d45adba15e8d1d8ef3d6973aaa3be6c425192d1eeef2b7cd907c6de688de0a1e629b14d90","name":"box_office.csv","type":"text/csv","lastModified":1755096841943.558,"size":1468},{"id":"7c3048f0f1740c770efcdec0dc5160b292cf4df8f54707ef2a85e9ef312b6fe75f7c2e8d55b2df920c8779e6cff768bc7cf824ebb764f301ed40ed597fa9efa6","href":"https://static.observableusercontent.com/files/7c3048f0f1740c770efcdec0dc5160b292cf4df8f54707ef2a85e9ef312b6fe75f7c2e8d55b2df920c8779e6cff768bc7cf824ebb764f301ed40ed597fa9efa6","name":"insideout.png","type":"image/png","lastModified":1755096841943.558,"size":701359},{"id":"d440eb79d9f0891100a6e16fc54eaad6e60b55a2d7d25b1b71682656f5c61bbfb1c130ce5062474f482fa3a974c2476d18b8aa804a520f43cfa20dd08088a66f","href":"https://static.observableusercontent.com/files/d440eb79d9f0891100a6e16fc54eaad6e60b55a2d7d25b1b71682656f5c61bbfb1c130ce5062474f482fa3a974c2476d18b8aa804a520f43cfa20dd08088a66f","name":"cars2@1.png","type":"image/png","lastModified":1755096841943.558,"size":437448},{"id":"fac247d69e1ded2dabd09d256b752480176572b85c5a7d42833ed31f64057e597dc9d02360b08de6c03f0a11b71525a4562fb441e4f5dd431d0262b04168b575","href":"https://static.observableusercontent.com/files/fac247d69e1ded2dabd09d256b752480176572b85c5a7d42833ed31f64057e597dc9d02360b08de6c03f0a11b71525a4562fb441e4f5dd431d0262b04168b575","name":"image@8.png","type":"image/png","lastModified":1755096841943.558,"size":240897},{"id":"cf5be38c9c3d1d787d9626c2040c62eba0c23909af8e204a0fba1e2aba5305c0c21c96cc671c7c75e03e938f6b0395356ab560e157fe2ae7ea79f746971ba4a3","href":"https://static.observableusercontent.com/files/cf5be38c9c3d1d787d9626c2040c62eba0c23909af8e204a0fba1e2aba5305c0c21c96cc671c7c75e03e938f6b0395356ab560e157fe2ae7ea79f746971ba4a3","name":"toystory@1.png","type":"image/png","lastModified":1755096841943.558,"size":360844},{"id":"29b59b0712191414d4ac3b82a92f9a54f6946262e0586f174d1e4bf05f34cd7d2e519cfa472ff0b0d73bdb9521fe0d032ccac7efe5e26b21aa38e0e0e02d5a98","href":"https://static.observableusercontent.com/files/29b59b0712191414d4ac3b82a92f9a54f6946262e0586f174d1e4bf05f34cd7d2e519cfa472ff0b0d73bdb9521fe0d032ccac7efe5e26b21aa38e0e0e02d5a98","name":"7j6ki0gm84qc1@1.jpeg","type":"image/jpeg","lastModified":1755096841943.558,"size":926758},{"id":"e2aec1358312d22b8312ac60a11868700ad46a08488df4b616368a4432f0806fbaef3e8232024951009d59599c93e3334c8dbfa6ce2a1b0e843ccb8c413d3104","href":"https://static.observableusercontent.com/files/e2aec1358312d22b8312ac60a11868700ad46a08488df4b616368a4432f0806fbaef3e8232024951009d59599c93e3334c8dbfa6ce2a1b0e843ccb8c413d3104","name":"pixar_films_images@1.csv","type":"text/csv","lastModified":1755096841943.558,"size":3419},{"id":"9e5079c0391263f93dcd6ae7e6ae267ffcd33783e3e5db475561d4330393013912227938d8f5856d79735eb142ec4a1b318bc3c58f5ef8a479a9de757f0eccce","href":"https://static.observableusercontent.com/files/9e5079c0391263f93dcd6ae7e6ae267ffcd33783e3e5db475561d4330393013912227938d8f5856d79735eb142ec4a1b318bc3c58f5ef8a479a9de757f0eccce","name":"pixar_titles@1.csv","type":"text/csv","lastModified":1755096841943.558,"size":410},{"id":"98d7c93121879d25055be8cd239a68d1c3b652fccd564895d30b2508b98b6252e68b0c6a0c61dcf9bd716c2e0f929aaadce05fb72ce8902d6189fbf52de95c64","href":"https://static.observableusercontent.com/files/98d7c93121879d25055be8cd239a68d1c3b652fccd564895d30b2508b98b6252e68b0c6a0c61dcf9bd716c2e0f929aaadce05fb72ce8902d6189fbf52de95c64","name":"pixar_genres.csv","type":"text/csv","lastModified":1755096841943.558,"size":4559},{"id":"96704f2eb6bcd9eafecc2ba3f4c18402c6684afc42638cdf0aa5bbf36beae3dc2da4655f09433f4e5ae06d9c6f8846a64a7c78bc7934816f0eb8e0bb064902a2","href":"https://static.observableusercontent.com/files/96704f2eb6bcd9eafecc2ba3f4c18402c6684afc42638cdf0aa5bbf36beae3dc2da4655f09433f4e5ae06d9c6f8846a64a7c78bc7934816f0eb8e0bb064902a2","name":"pixar_films.csv","type":"text/csv","lastModified":1755096841943.558,"size":5214},{"id":"48c0273090c16033a12a4f9be644901f03268cb1522ff3d98a94f51f6368b85e8e31739ff967c5a0b4f95868e70c08a33d9f41307ede323ab60f52761c23bb75","href":"https://static.observableusercontent.com/files/48c0273090c16033a12a4f9be644901f03268cb1522ff3d98a94f51f6368b85e8e31739ff967c5a0b4f95868e70c08a33d9f41307ede323ab60f52761c23bb75","name":"pixar_public_response.csv","type":"text/csv","lastModified":1755096841943.558,"size":489},{"id":"4cef83b5fc42e73a285dbf4558779ee899a50a7adb683aba73e08917a49211f26aac2b6fa0d41b488c379f3b497627174836f96c772d36f63838ef631c4203ba","href":"https://static.observableusercontent.com/files/4cef83b5fc42e73a285dbf4558779ee899a50a7adb683aba73e08917a49211f26aac2b6fa0d41b488c379f3b497627174836f96c772d36f63838ef631c4203ba","name":"pixar_people_gendered@1.csv","type":"text/csv","lastModified":1755096841943.558,"size":10473}] 29:{"id":"3bab1761cd4cea41","slug":null,"title":"Explore your favourite Pixar films","thumbnail":"08cb8efb614757371680ae27e7a3d9ac1931bd7646a317f8724b46522f5807a5","access_level":"public","create_time":"$D2025-08-13T14:54:01.943Z","update_time":"$D2025-08-13T16:44:39.575Z","view_time":null,"first_public_time":"$D2025-09-30T15:23:32.238Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":2350,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03e637cfc774ecd2","login":"sandrasn","name":"SandraS","avatar_url":"https://avatars-next.observableusercontent.com/2d1a2e835857d8377101fbb98b1c5c6df2a944f2ce4ded3dfc438f855a562e80","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"03e637cfc774ecd2","login":"sandrasn","name":"SandraS","avatar_url":"https://avatars-next.observableusercontent.com/2d1a2e835857d8377101fbb98b1c5c6df2a944f2ce4ded3dfc438f855a562e80","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"},{"type":"individual","id":"9134294cd3277fb5","login":"vanessa-wahlmuller","name":"Vanessa Wahlmüller","avatar_url":"https://avatars-next.observableusercontent.com/4b3f23f2838c2c216de7f84831e276923ca24f5e2c4c8be3d28068f6a6d98186","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explore your favourite Pixar films","cells":[{"id":4,"value":"![7j6ki0gm84qc1@1.jpeg](${await FileAttachment(\"7j6ki0gm84qc1@1.jpeg\").url()})\nQuelle: [Main Street Emporium](https://www.msemporium.de/disney-portal/studios-filme/pixar)\n\n# Explore your favourite Pixar films","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":954,"value":"von Sandra Straube und Christina Penz, Informationsvisualisierung: HCC 2025\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":966,"value":"toc(\"h2, h3, h4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2006,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"_\"Bis zur Unendlichkeit und noch viel weiter!\"_ - Buzz Lightyear, Toy Story \n\nMit diesem ikonischen Satz setzt Pixar 1995 mit der Veröffentlichung von Toy Stories den ersten Meilenstein in einer langen Reihe erfolgreicher Filme. Seither wurden bis Juli 2024 wurden insgesamt 28 Filme veröffentlicht, welche die meisten von uns in der Kindheit geprägt haben.\n\nEntsprechend wollen wir uns nun mit diesen Schätzen der Kindheitserinnerungen beschäftigen und herausfinden, welche Filme wann veröffentlicht wurden, wie sie bewertet wurden und wie ähnlich sich die Filme sind. Dabei wollen wir auch darauf eingehen, wie erfolgreich die Fortsetzungen im Vergleich sind und wer eigentlich hinter den Filmen steht.\n\nVielleicht findet sich dabei noch der ein oder andere Lieblingsfilm oder einfach nur eine Prise Nostalgie.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"![grafik.png](${await FileAttachment(\"grafik.png\").url()})\nQuelle: [DisneyDining](https://www.disneydining.com/even-diehard-pixar-fans-dont-know-these-things-about-the-studios-films-bb1/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"## 1. Wann wurden die Pixar-Filme veröffentlicht und wie wurden sie bewertet?\n

![toystory@1.png.png](${await FileAttachment(\"toystory@1.png\").url()})

\n\nEs gibt 28 Pixar Filme mit ganz eigenen Geschichten - doch jede einzelne kam ganz Unterschiedlich bei den Zuschauer*innen an. Von Toy Story an wurden bis heute immer weitere veröffentlicht und anscheinend auch immer öfter. \n\nSchauen wir uns das einmal genauer an...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"viewof viewTimelineScore = Inputs.radio(\n [\"imdb_score\", \"rotten_tomatoes_score\"],\n {\n label: \"Welche Bewertungen anzeigen?\",\n value: \"imdb_score\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"viewof viewCompareTimeline = Inputs.toggle({\n label: \"Score-Vergleich\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"## 2. Wie ähnlich sind die Filme untereinander?\n\nÜber 30 Jahre Filmgeschichte bei Pixar haben sich neue Ideen und daraus resultierend auch neue Genre entwickelt. Doch haben alle Pixar-Filme eines gemeinsam: Es sind Animationsfilme für Kinder und Erwachsene. Den uns vorliegenden Daten können wir außerdem zwei Arten von Grenre-Typen identifizieren, die Hauptgenre und die Subgenre. Die Einteilung der Filme fand dabei durch Maven Analystics statt.\n\nAnmerkung: Die folgende Grafik ist interaktiv! Für mehr Details zwischen zwei Filmen, wähl aus, ob du nach Genre und Subgenre differenzieren willst und klick einfach ein Quadrat an.\n\nSchauen wir uns nun einmal an, wie ähnlich sich all diese Filme nun wirklich sind...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1429,"value":"\nviewof viewSimilarityType = Inputs.select(\n genreSimilarityOptions.map(d => d.value),\n {\n label: \"Ähnlichkeit berechnen mit:\",\n value: \"both\",\n format: v => genreSimilarityOptions.find(d => d.value === v)?.label ?? v\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof filmA = Inputs.select(filmsWithTitles.map(f => f.title), {label: \"Film A\", sort: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"viewof filmB = Inputs.select(filmsWithTitles.map(f => f.title), {label: \"Film B\", sort: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"Inputs.bind(\n Inputs.select(\n genreSimilarityOptions.map(d => d.value),\n {\n label: \"Ähnlichkeit berechnen mit:\",\n format: v => genreSimilarityOptions.find(d => d.value === v)?.label ?? v\n }\n ),\n viewof viewSimilarityType\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"
\nWie bereits vermutet sind die drei Genres in jedem einzelnen Film vertreten, dicht gefolgt von Comedy, was zu den veränderten Ergebnissen führt, sobald man die Hauptgenres in der Ähnlichkeitsmatrix filtert.\n\nWeiters sind die verbreitesten Genres verschiedene Auslegungen von Fantasy und Adventure. Ebenfalls scheint Pixar seit Wall-E das Genre Sci-Fi noch mehrmals verwendet zu haben. Man erkennt hier jedoch, auch in Kombination mit den vorherigen Visualisierungen, gut, dass Pixar öfters versucht hat etwas Neues zu probieren, wobei einige Themen jedoch weiter ausgebaut wurden und andere, wie im Fall von Cars 2, fallengelassen wurden.\n\nDoch macht ein Film natürlich nicht nur sein Genre aus, sondern auch seine Handlung. Die Daten von Maven Analytics umfassen ebenfalls eine Kurzbeschreibung des Plot für jeden Film. Wenn wir nun alle Wörter als Wortwolke darstellen, erkennt man mehr Gemeisamkeiten für alle Filme. \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"\nviewof viewWordCloudFilter = Inputs.select([\n {label: \"Kein Filter\", value: \"nofilter\"},\n {label: \"Stopwörter filtern\", value: \"stopfilter\"},\n {label: \"Stopwörter + Unique filtern\", value: \"stopuniquefilter\"}\n ], {\n label: \"Wörterwolke filtern:\",\n format: x => x.label, \n value: \"nofilter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"## 3. Wer steckt eigentlich hinter den Filmen?\n\nPixar besteht aus 1233 Mitarbeiter:innen (Stand 2020, [Wikipedia](https://de.wikipedia.org/wiki/Pixar)). Zu den wichtigsten Rollen, die kreative und organisatorische Entscheidungen fällen, zählen allerdings die folgenden: \n- **🖼️ Regisseur:in (Director)**: der/die Regisseur:in hat die kreative Kontrolle über den gesamten Prozess, um die Vision des Films visuell umzusetzen.\n- **💰 Produzent:in (Producer)**: der/die Produzent:in ist für die Organisation und Finanzierung des Films verantwortlich.\n- **📜 Storywriter**: Storywriters schreiben die ursprüngliche Geschichte für den Film, bevor das Drehbuch ensteht.\n- **📑 Screenwriter**: Screenwriters schreiben das Drehbuch, welches dann die Grundlage für den Film bildet.\n- **🎼 Komponist:in**: Verantwortlich für die Musik.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1052,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"Die Grafik zeigt alle Personen die mindesten fünf Rollen in Filmen hatten. Oft übernehmen Regisseur:innen auch eine Rolle der Storywriter und Screenwriter für einen Film. **Andrew Stanton** kommt dadurch auf insgesamt 20 Rollen in neun Filmen. Auf die Top Liste schaffen es außerdem die beiden Komponisten **Randy Newman** mit neun Filmen und **Michael Giacchino** mit acht Filmen. Die Rolle des/der Produzent:in schaffen im Gegensatz nur mit **Darla K. Anderson** auf die Liste. Es fällt auch auf, dass die Entscheidungsträger häufig männlich sind, es gibt allerdings Unterschiede zwischen den Rollen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1264,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"Pixars Producers sind sogar häufiger weiblich als männlich. Fünf Filme und damit mehr als alle anderen hat **Darla K. Anderson** produziert. Sie war mitverantwortlich für *A Bug's Life (1998)*, *Monsters, Inc. (2001)*, *Cars (2006)*, *Toy Story 3 (2010)* und *Coco (2017)*.\n\nIn Rollen der Directors und Musicians finden sich Frauen sehr selten: bis jetzt gab es erst zwei Regisseurinnen, **Brenda Champel** für *Brave (2012)* und **Domee Shi** für den Film *Turing Red (2022)* und eine Komponistin, **Andrea Datzman** für *Inside Out 2 (2024)*.\n\nAbgesehen von der Geschlechterverteilung zeigt der Graph auch die Verteilung nach Rollentyp. Die meisten Personen arbeiten immer an der Story und dem Drehbuch, die anderen Rollen übernimmt häufig nur eine Person pro Film.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1235,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"Mit einem Gesamtanteil von **${female_percent}%** sind Frauen insgesamt in der Unterzahl allerdings ist ein positiver Trend erkennbar. Heraus sticht *Brave (2012)*, Pixars erster Film mit einer weiblichen Person in der Hauptrolle und die erste weibliche Regisseurin. Für den Film *Turing Red (2022)* bestand das Team bis auf den Komponisten vollständig aus Frauen ([\"Pixars erstes All-Female Leadership Team\"](https://thewaltdisneycompany.com/meet-the-all-female-leadership-team-behind-disney-and-pixars-turning-red/)).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1295,"value":"![image@8.png](${await FileAttachment(\"image@8.png\").url()})\n\nQuelle: [D23](https://d23.com/unbearably-cute-turning-red-concept-art/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1116,"value":"## 4. Original vs Sequels\nViele Filme erhalten Fortsetzungen oder auch Kurzfilme, Serien und Videospiele. Über die Zeit haben sich **sechs Franchises** gebildet, wodurch beliebte Chraktere immer wieder auf die Leinwand kommen. Ungefähr ein Drittel (10 von 28) von Pixars Portfolio sind Fortsetzungen. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2249,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1663,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"### Franchises\nMit vier Teilen und einem Spin-Off ist Toy Story das größte und älterste Franchise von Pixar. Abgesehen von Cars mit drei Filmen, bestehen die anderen Franchises (bis jetzt) nur aus jeweils zwei Filmen. Der Großteil der Filme sind tatsächlich Sequels, nur *Monsters, University (2013)* ist ein Prequel. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2075,"value":"$55","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2130,"value":"Für die Fortsetzungen lässt sich Pixar oft Zeit. Am längsten mussten Fans mit **14 Jahren** Jahren auf den zweiten The Incredibles Teil warten. Es kann aber auch schneller gehen, zwischen *Toy Story 4 (2019)* und dem Spin-Off *Lightyear (2022)* liegen nur **3 Jahre**.\n\nRatings von IMDB, Rotten Tomatos und Metacritic zeigen, dass alle Fortsetzungen immer leicht schlechter abschneiden als ihre Original. Eine Ausnahme ist Toy Story, wobei *Toy Story 2 (1999)* bei Rotten Tomatoes und *Toy Story 3 (2010)* bei IMDB gleich gut wie das Original von Usern bewertet wird. Ein besserer Rating mit einer Fortsetzung im Vergleich zum ersten Film ist Pixar noch nicht gelungen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1518,"value":"viewof selectFranchise = Inputs.select([\"Toy Story\", \"Monsters, Inc.\", \"Finding Nemo\", \"The Incredibles\",\"Cars\", \"Inside Out\"], {label: \"Select a franchise\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"viewof radiosFranchise = Inputs.radio([\"imdb_score\", \"rotten_tomatoes_score\", \"metacritic_score\"], {label: \"Select a rating\", value: \"imdb_score\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1972,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"viewof radiosFinance = Inputs.radio([\"box_office_worldwide\", \"ROI\"], {label: \"Select one\", value: \"box_office_worldwide\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"Dafür bringt die Nostalgie die Zuschauer:innen ins Kino. Ausreißer dabei sind *Cars 3* und *Lightyear*, welche tatsächlich weniger Umsatz als ihre Orignale einbrachten. Der geringe Gewinn von *Cars 3* könnten mit der Enttäuschung vom zweiten Teil und auch von den Plane Spin-Offs von Disney begründet werden. *Lightyear* kann mit der Pandemie begründet werden. Disney hat sich damals entschieden den Film gemeinsam mit *Turning Red* und *Soul* auf Disney Plus zu releasen, abgesehen von COVID-19 auch um ihre Streaming-Plattform zu bewerben. Die Filme wurden dadurch erst später und kürzer in den Kinos gezeigt und schnitten dementsprechend schlechter ab.\n\n*Inside Out 2*, der vorletzte veröffentlichte Film (Stand März 2025) schnitt im Vergleich zu den anderen Fortsetzungen finanziell sehr gut ab, mit einem Return of Investement von fast 750% und somit der einzige Film mit einem höheren ROI als sein Original (390%). Den höchsten ROI hat aber immer noch Toy Story und somit auch Pixars erster Film mit 1215%. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1842,"value":" $\"image@12.png\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1955,"value":"Quelle: [Tagesspiegel](https://www.tagesspiegel.de/kultur/pixar-film-alles-steht-kopf-2-aufstand-der-gefuhle-11802518.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1804,"value":"### Ein Blick in die Zukunft\n\nZum Abschluss eine kurze Zusammenfassung der kommenden Pixar Filmen:\n\n- **Elio**: aktuell in den Kinos (12. Juni 2025) \n- **Hoppers**: geplant für März 2026.\n- **Toy Story 5**: geplant für Juni 2026. \n- **Gatto**: vermutlich im Sommer 2027.\n- **Incredibles 3**: vermutlich Ende 2027 / Anfang 2028.\n- **Coco 2**: vorraussichltich 2029.\n\nDisney setzt somit auch in Zukunft auf Fortsetzung von erfolgreichen Filmen und auf die Erstellung von völlig neuem Material, womit sich junge und alte Fans auf etwas freuen können","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1818,"value":"

KA-CHOW!

\n $\"image@9.png\"$ \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1951,"value":"Quelle: [Cars Facebook](https://www.facebook.com/PixarCars/posts/ka-chow/10164001771705183/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":981,"value":"## 5. Datenursprung","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"Die Daten haben ihren Ursprung in einer Challenge von Maven Analytics, welche mit Ende März abgeschlossen wurde. ([Link](https://mavenanalytics.io/challenges/maven-pixar-challenge/967013fc-1ff2-4453-a1ac-1ac1e0624c52))\n\nEine ausführliche Beschreibung des Datensatzes findet sich in der Dokumentation ([Link](https://observablehq.com/d/2b55036aee3567a7)).\n\nDie Bilder der Filmposters wurden von Pixar übernommen ([Link](https://www.pixar.com/feature-films))\n***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":902,"value":"## 6. Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":919,"value":"Allgemein","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1027,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"dataGenres = FileAttachment(\"pixar_genres.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"dataResponse = FileAttachment(\"pixar_public_response.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"dataTitles = FileAttachment(\"pixar_titles@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"dataImages = FileAttachment(\"pixar_films_images@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"dataFilms = FileAttachment(\"pixar_films.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"color1 = \"#5bc238\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"color2 = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"warningColor1 = \"crimson\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"warningColor2 = \"blue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"genreColor = color1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"subgenreColor = color2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"lightColor = \"Gray\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"lightBorderColor = \"white\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"import { toc } from \"@nebrius/indented-toc\" // Table of Contents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":" d3regression = require(\"d3-regression@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"Block 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":831,"value":"filmsTimeline = {\n const byId = (rows) => Object.fromEntries(rows.map(d => [d.film_id, d]));\n\n const titles = byId(dataTitles);\n const responses = byId(dataResponse);\n const images = byId(dataImages);\n\n return dataFilms\n .filter(d => d.film_id in titles && d.film_id in responses && d.film_id in images)\n .map(d => ({\n film_id: d.film_id,\n film: titles[d.film_id].film,\n release_date: d.release_date,\n image: images[d.film_id].image,\n imdb_score: responses[d.film_id].imdb_score,\n rotten_tomatoes_score: responses[d.film_id].rotten_tomatoes_score,\n metacritic_score: responses[d.film_id].metacritic_score\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"Block 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":858,"value":"// Jaccard Similarity\nfunction jaccard(setA, setB) {\n const intersection = new Set([...setA].filter(x => setB.has(x)));\n const union = new Set([...setA, ...setB]);\n if (union.size === 0) return 0;\n return intersection.size / union.size;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"filmsWithTitles = dataFilms.map(f => {\n const title = dataTitles.find(t => t.film_id === f.film_id)?.film || \"Unknown\";\n return {...f, title};\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"// Zuordnung Filme\nfunction getGenresByType(filmsWithTitles, dataGenres, includeGenres, includeSubgenres) {\n const genreMap = new Map();\n\n for (const f of filmsWithTitles) {\n genreMap.set(Number(f.film_id), new Set());\n }\n\n for (const row of dataGenres) {\n const id = Number(row.film_id);\n const isGenre = row.category === \"Genre\";\n const isSubgenre = row.category === \"Subgenre\";\n\n if (\n ((includeGenres && isGenre) || (includeSubgenres && isSubgenre)) &&\n genreMap.has(id)\n ) {\n genreMap.get(id).add(row.value);\n }\n }\n\n return genreMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"genreMap = getGenresByType(filmsWithTitles, dataGenres, viewSimilarityType === \"genres\" || viewSimilarityType === \"both\", viewSimilarityType === \"subgenres\" || viewSimilarityType === \"both\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"genreSimilarityOptions = [\n { label: \"Genres + Subgenres\", value: \"both\" },\n { label: \"Nur Genres\", value: \"genres\" },\n { label: \"Nur Subgenres\", value: \"subgenres\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"import {WordCloud} from \"@d3/word-cloud\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"Block 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":750,"value":"data_people = FileAttachment(\"pixar_people_gendered@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data_sequels = FileAttachment(\"pixar_films_sequels@5.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"data_box = FileAttachment(\"box_office.csv\").csv({typed: true}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"spans = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"data_ratiung = FileAttachment(\"pixar_rating.csv\").csv({typed: true}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"top10 = Array.from(movieCounts.entries())\n .sort((a, b) => b[1] - a[1])\n .slice(0, 12)\n .map(([name, count]) => ({ name, count}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"// Aggregate data\nmovieCounts = d3.rollup(data_people, v => v.length, d => d.name);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"// Prepare role data for coloring\nroles = Array.from(new Set(data_people.map(d => d.role_type))); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"female_percent = Math.round(data_people.filter(p=> p.gender === 'female').length / data_people.length *100)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"plotDataGenderRoles = Array.from(genderByRole.entries()).flatMap(([role_type, counts]) => [\n { role_type, gender: \"male\", count: counts.male },\n { role_type, gender: \"female\", count: counts.female }\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"genderByRole = d3.rollup(\n data_people,\n v => ({\n male: v.filter(d => d.gender === \"male\").length,\n female: v.filter(d => d.gender === \"female\").length\n }),\n d => d.role_type\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"// Get the top 10 people with the most unique movies\ntop10Unique = Array.from(movieCountsUnique.entries())\n .sort((a, b) => b[1] - a[1])\n .slice(0, 10)\n .map(([name, count]) => ({ name, count }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"movieCountsUnique = d3.rollup(uniqueMovies, v => v.length, d => d.name);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"// Deduplicate the data to ensure each movie is counted once per person\nuniqueMovies = Array.from(\n new Set(data_people.map(d => `${d.name}-${d.film}`))\n).map(entry => {\n const [name, film] = entry.split(\"-\");\n return { name, film };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"mergedData2 = data_sequels.map(sequel => {\n var boxOffice = data_box.find(box => box.film === sequel.film);\n var releaseYear = new Date(sequel.release_date).getFullYear();\n return { ...sequel, ...boxOffice, releaseYear, filmName: `${sequel.film} (${releaseYear})` };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"// Calculate percentage of female roles per year\npercentageFemaleRoles = Array.from(rolesByYear.entries()).map(([year, { totalRoles, femaleRoles }]) => ({\n year,\n percentage: (femaleRoles / totalRoles) * 100\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"// Merge datasets based on film name\nmergedData = data_people.map(role => {\n var releaseInfo = data_sequels.find(d => d.film === role.film);\n return { ...role, year: new Date(releaseInfo.release_date).getFullYear() };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"// Prepare movie titles for tooltips\nmoviesByYear = d3.rollup(\n data_sequels,\n v => v.map(d => d.film),\n d => new Date(d.release_date).getFullYear()\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"franchiseData.sort((a, b) => a.releaseYear - b.releaseYear);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"Block 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1711,"value":"mergedData3 = mergedData2.map(sequel => {\n var boxOffice = data_ratiung.find(r => r.film === sequel.film);\n var releaseYear = new Date(sequel.release_date).getFullYear();\n return { ...sequel, ...boxOffice, releaseYear, filmName: `${sequel.film} (${releaseYear})` };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"sequelCounts = d3.rollup(\n data_sequels,\n v => v.length,\n d => d.sequel\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"sequelDataArray = Array.from(sequelCounts, ([sequel, count]) => ({\n sequel,\n count\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"// Calculate the span between consecutive films within each franchise\nfilmsByFranchise.forEach((films, franchise) => {\n if(franchise!==null) {\n films.sort((a, b) => new Date(a.release_date) - new Date(b.release_date));\n for (let i = 1; i < films.length; i++) {\n let span = new Date(films[i].release_date).getFullYear() - new Date(films[i - 1].release_date).getFullYear();\n spans.push({ franchise, span });\n }}\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"// Aggregate worldwide box office by franchise\nboxOfficeByFranchise = d3.rollup(\n mergedData3,\n v => ({\n totalBoxOffice: d3.sum(v, d => d.box_office_worldwide),\n movieCount: v.length\n }),\n d => d.franchise\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1481,"value":"totalBoxOfficeF = d3.sum(mergedData2.filter(d => d.franchise !== null), d => d.box_office_worldwide);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"franchiseData = mergedData3.filter(d => d.franchise === selectFranchise).sort((a, b) => new Date(a.release_date) - new Date(b.release_date));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"filmsByFranchise = d3.group(mergedData3, d => d.franchise);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"// Find the maximum and minimum spans\nmaxSpan = spans.reduce((max, entry) => entry.span > max.span ? entry : max, spans[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"minSpan = spans.reduce((min, entry) => entry.span < min.span ? entry : min, spans[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"rolesByYear = d3.rollup(\n mergedData,\n v => {\n var totalRoles = v.length;\n var femaleRoles = v.filter(d => d.gender === \"female\").length;\n return { totalRoles, femaleRoles };\n },\n d => d.year\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"1"}} 24:null