2c:null 2d:["$","title",null,{"children":"The Inception of Christopher Nolan | Sameh's Workspace | Observable"}] 32:T351e,{ // Inline full dataset. const rawData = [ { title: "Following", screenplayDate: "03-04-1996", releaseDate: "24-04-1998", budget: "$6,000", earnings: "$1,26,052", }, { title: "Memento", screenplayDate: "04-07-1997", releaseDate: "05-09-2000", budget: "$90,00,000", earnings: "$4,01,00,000", }, { title: "Insomnia", screenplayDate: "02-03-2001", releaseDate: "03-05-2002", budget: "$4,60,00,000", earnings: "$11,38,00,000", }, { title: "Batman Begins", screenplayDate: "01-01-2003", releaseDate: "31-05-2005", budget: "$15,00,00,000", earnings: "$37,37,00,000", }, { title: "The Prestige", screenplayDate: "02-10-2005", releaseDate: "17-10-2006", budget: "$4,00,00,000", earnings: "$10,97,00,000", }, { title: "The Dark Knight", screenplayDate: "01-06-2006", releaseDate: "14-07-2008", budget: "$18,50,00,000", earnings: "$1,00,60,00,000", }, { title: "Inception", screenplayDate: "11-02-2009", releaseDate: "08-07-2010", budget: "$16,00,00,000", earnings: "$83,90,00,000", }, { title: "The Dark Knight Rises", screenplayDate: "01-03-2011", releaseDate: "16-07-2012", budget: "$30,00,00,000", earnings: "1,11,50,00,000", }, { title: "Interstellar", screenplayDate: "03-03-2013", releaseDate: "07-11-2014", budget: "$16,50,00,000", earnings: "$75,90,00,000", }, { title: "Dunkirk", screenplayDate: "01-09-2015", releaseDate: "13-07-2017", budget: "$10,00,00,000", earnings: "$53,04,00,000", }, { title: "Tenet", screenplayDate: "01-05-2019", releaseDate: "26-08-2020", budget: "$20,50,00,000", earnings: "$36,59,00,000", }, { title: "Oppenheimer", screenplayDate: "15-10-2021", releaseDate: "11-07-2023", budget: "$10,00,00,000", earnings: "$97,68,00,000", }, ]; // Parse dates in "dd-mm-yyyy" format. const parseDate = d3.timeParse("%d-%m-%Y"); // Remove "$" and commas. const parseMoney = (s) => +s.replace(/\$|,/g, ""); // Process the data. const data = rawData.map((d) => ({ title: d.title, screenplayDate: parseDate(d.screenplayDate), releaseDate: parseDate(d.releaseDate), budget: parseMoney(d.budget), earnings: parseMoney(d.earnings), })); // Set dimensions and margins. const width = 1200; const height = 1000; const margin = { top: 10, right: 20, bottom: 30, left: 20 }; const chartHeight = height - margin.top - margin.bottom; // e.g., 940 pixels // Define labeled domain breakpoints (in dollars). // We'll use: 0, 5k, 10k, 100k, 1m, 100m, 1.4b. const domainLabeled = [0, 5e3, 1e4, 1e5, 1e6, 1e8, 1.4e9]; // Allocate vertical space: // Let the lower segments (0 to 1m) share 40% of the chart height, // and the upper segment (1m to 1.4b) take the remaining 60%. const lowerFraction = 0.4 * chartHeight; const upperFraction = chartHeight - lowerFraction; // We have 4 segments in the lower part. const seg1 = lowerFraction / 4; // from 0 to 10k const seg2 = lowerFraction / 4; // from 10k to 100k const seg3 = lowerFraction / 4; // from 100k to 1m const rangeLabeled = [ chartHeight, // 0 chartHeight - seg1 / 2, // 5k (midpoint) chartHeight - seg1, // 10k chartHeight - seg1 - seg2, // 100k chartHeight - seg1 - seg2 - seg3, // 1m chartHeight - lowerFraction, // 100m 0, // 1.4b ]; // Create the piecewise y-scale. const y = d3.scaleLinear().domain(domainLabeled).range(rangeLabeled); // Create the SVG canvas. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Append main group with margin offset. const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Background rectangle. g.append("rect") .attr("width", width - margin.left - margin.right) .attr("height", chartHeight) .attr("fill", "#fff") .attr("stroke", "#ccc") .attr("stroke-width", 1); // Generate extra gridlines. let gridValues = []; gridValues = gridValues.concat(d3.range(0, 1e4 + 1, 1e3)); // 0 to 10k: every 1k. gridValues = gridValues.concat(d3.range(1e4, 1e5 + 1, 1e4)); // 10k to 100k: every 10k. gridValues = gridValues.concat(d3.range(1e5, 1e6 + 1, 1e5)); // 100k to 1m: every 100k. gridValues = gridValues.concat(d3.range(1e6, 1e8 + 1, 1e7)); // 1m to 100m: every 10m. gridValues = gridValues.concat(d3.range(1e8, 1.4e9 + 1, 1e8)); // 100m to 1.4b: every 100m. gridValues = Array.from(new Set(gridValues)).sort((a, b) => a - b); g.append("g") .attr("class", "grid") .call( d3 .axisLeft(y) .tickValues(gridValues) .tickSize(-(width - margin.left - margin.right)) .tickFormat(""), ) .selectAll("line") .attr("stroke", "#ddd") .attr("stroke-dasharray", "3,3") .attr("opacity", 0.4); // x-scale: from Jan 1, 1995 to Nov 30, 2024. const x = d3 .scaleTime() .domain([new Date(1996, 0, 1), new Date(2024, 10, 30)]) .range([70, width - margin.left - margin.right]); // x-axis. const xAxis = d3 .axisBottom(x) .ticks(d3.timeYear.every(1)) .tickSize(-4) .tickFormat(d3.timeFormat("%Y")); g.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(xAxis) .selectAll("text") .attr("transform", null) .attr("y", 8) .style("text-anchor", "middle") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px"); // Set tick lines to #bbb. g.selectAll(".tick line").attr("stroke", "#ccc"); // Labeled y-axis. const yAxis = d3 .axisLeft(y) .tickValues([ 5e3, 1e4, 1e5, 1e6, 5e7, 1e8, 2e8, 3e8, 4e8, 5e8, 6e8, 7e8, 8e8, 9e8, 1e9, 1.1e9, 1.2e9, 1.3e9, ]) .tickSize(-0.1) // Remove the tick lines. .tickFormat((d) => { if (d === 5000) return "$5k"; if (d === 10000) return "$10k"; if (d === 100000) return "$100k"; if (d < 1e3) return d; if (d < 1e6) return "$" + d3.format(",")(d); const formatted = d3.format(".2s")(d); return "$" + (d >= 1e9 ? formatted.replace("G", "B") : formatted); }); // Append the y-axis and then modify the tick texts. g.append("g") .call(yAxis) .selectAll("text") .attr("x", 8) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", "#464646"); // Set the y-axis label text color here. g.selectAll(".domain").attr("stroke", "#ccc").attr("stroke-width", "1px"); // Create a radius scale for circles. const allMoney = data.flatMap((d) => [d.budget, d.earnings]); const [minMoney, maxMoney] = d3.extent(allMoney); const rScale = d3.scaleSqrt().domain([minMoney, maxMoney]).range([5, 35]); // Create a tooltip div. const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "5px") .style("padding", "5px") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); const moneyFormat = d3.format(","); const yearFormat = d3.timeFormat("%Y"); function showTooltip(html, event) { tooltip .html(html) .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px") .transition() .duration(200) .style("opacity", 0.9); } function hideTooltip() { tooltip.transition().duration(200).style("opacity", 0); } const offset = 10; // Draw data points. data.forEach((d, i) => { const xBudget = x(d.screenplayDate); const xEarnings = x(d.releaseDate); const yBudget = y(d.budget); const yEarnings = y(d.earnings); if (i === 0) { // First annotation for the first movie. const midX = (xBudget + xEarnings) / 2; const midY = (yBudget + yEarnings) / 2; const annotation = "Nolan's debut was made for $6,000 yet earned $126,000—proof \nthat great storytelling can overcome any financial constraint."; const lines = annotation.split("\n"); const textEl = g .append("text") .attr("x", midX + 30) // offset to the right .attr("y", midY) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", "#464646") .style("font-weight", "normal") .style("pointer-events", "none"); lines.forEach((line, index) => { textEl .append("tspan") .attr("x", midX + 30) .attr("dy", index === 0 ? 0 : "1.2em") .text(line) .style("font-weight", "normal"); }); } // Second annotation for "The Dark Knight Rises" if (d.title === "The Dark Knight Rises") { const annotationMarginLeft = 60; // horizontal margin from the circle const annotationMarginTop = 20; // vertical margin above the circle // Insert a newline in your annotation text const annotationText = "Nolan never planned a sequel—he doubted Batman Begins' success. \nYet today, its follow-ups stand as two of his biggest box office triumphs."; const lines = annotationText.split("\n"); const textEl2 = g .append("text") .attr("x", xEarnings - annotationMarginLeft) .attr("y", yEarnings - annotationMarginTop) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", "#464646") .style("font-weight", "normal") .style("pointer-events", "none"); lines.forEach((line, index) => { textEl2 .append("tspan") .attr("x", xEarnings - annotationMarginLeft) .attr("dy", index === 0 ? 0 : "1.2em") .text(line) .style("font-weight", "normal"); }); } // Draw connecting line. g.append("line") .attr("x1", xBudget) .attr("y1", yBudget) .attr("x2", xEarnings) .attr("y2", yEarnings) .attr("stroke", "gray") .attr("stroke-width", 1) .attr("opacity", 0.3); // Blue circle for Budget. g.append("circle") .attr("cx", xBudget) .attr("cy", yBudget) .attr("r", rScale(d.budget)) .attr("fill", "#F67280") .attr("opacity", 0.9) .on("mouseover", function (event) { d3.select(this) .transition() .duration(300) .attr("r", rScale(d.budget) * 1.2); showTooltip( `${d.title}
Budget: $${moneyFormat(d.budget)}
Screenplay: ${yearFormat(d.screenplayDate)}`, event, ); }) .on("mousemove", function (event) { showTooltip( `${d.title}
Budget: $${moneyFormat(d.budget)}
Screenplay: ${yearFormat(d.screenplayDate)}`, event, ); }) .on("mouseout", function () { d3.select(this).transition().duration(300).attr("r", rScale(d.budget)); hideTooltip(); }); const topOffset = 10; // offset for labels above the circle const bottomOffset = 15; // offset for labels below the circle // Label for blue bubble. let labelX, labelY, textAnchor; const rB = rScale(d.budget); if (i < 6) { // For the first 6 movies, place the label on top of the blue circle. labelX = xBudget; labelY = yBudget - rB - topOffset; // using topOffset textAnchor = "middle"; } else { // For the others, place the label below the blue circle. labelX = xBudget; labelY = yBudget + rB + bottomOffset; // using bottomOffset textAnchor = "middle"; } g.append("text") .attr("x", labelX) .attr("y", labelY) .attr("text-anchor", textAnchor) .style("font-family", "Helvetica, sans-serif") .style("font-size", "11px") .style("fill", "#646464") .style("pointer-events", "none") .style("font-weight", "600") // Added to make text bolder .style("letter-spacing", "0.2px") // Adjust the value as needed .text(d.title); // Orange circle for Earnings. g.append("circle") .attr("cx", xEarnings) .attr("cy", yEarnings) .attr("r", rScale(d.earnings)) .attr("fill", "#6C5B7B") .attr("opacity", 0.9) .on("mouseover", function (event) { d3.select(this) .transition() .duration(300) .attr("r", rScale(d.earnings) * 1.2); showTooltip( `${d.title}
Earnings: $${moneyFormat(d.earnings)}
Release: ${yearFormat(d.releaseDate)}`, event, ); }) .on("mousemove", function (event) { showTooltip( `${d.title}
Earnings: $${moneyFormat(d.earnings)}
Release: ${yearFormat(d.releaseDate)}`, event, ); }) .on("mouseout", function () { d3.select(this) .transition() .duration(300) .attr("r", rScale(d.earnings)); hideTooltip(); }); }); return svg.node(); }33:T1146,{ // Define movie data with ratings (dummy ratings for illustration). const movies = [ { title: "Following", rating: 7.5 }, { title: "Memento", rating: 8.8 }, { title: "Insomnia", rating: 7.8 }, { title: "Batman Begins", rating: 8.3 }, { title: "The Prestige", rating: 8.2 }, { title: "The Dark Knight", rating: 9.1 }, { title: "Inception", rating: 8.6 }, { title: "Dark Knight Rises", rating: 8.5 }, { title: "Interstellar", rating: 8.3 }, { title: "Dunkirk", rating: 8.4 }, { title: "Tenet", rating: 7.2 }, { title: "Oppenheimer", rating: 8.8 }, ]; // Set dimensions and margins. const width = 1200; const height = 600; const margin = { top: 40, right: 80, bottom: 40, left: 120 }; // Create an SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font-family", "Helvetica, sans-serif"); // Create an x-scale mapping ratings 0-10 to available width. const x = d3 .scaleLinear() .domain([0, 10]) .range([margin.left, width - margin.right]); // Create a y-scale for the movies. const y = d3 .scaleBand() .domain(movies.map((d) => d.title)) .range([margin.top, height - margin.bottom]) .padding(0.5); // Add the x-axis. const xAxis = d3 .axisBottom(x) .ticks(10) .tickFormat(d3.format("d")) .tickSize(0) .tickPadding(10); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .call((g) => g.selectAll(".tick line").attr("stroke", "#ccc")) .call((g) => g.select(".domain").attr("stroke", "#ccc")); // Add the y-axis. const yAxis = d3.axisLeft(y); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call((g) => g.selectAll(".tick line").attr("stroke", "#ccc")) .call((g) => g.select(".domain").attr("stroke", "#ccc")); svg.selectAll(".tick text").style("font-size", "12px"); // Create a color scale that interpolates between ratings 7 and 9. const colorScale = d3 .scaleLinear() .domain([7, 9]) .range(["#6C5B7B", "#F67280"]) .clamp(true); // Draw the lollipop lines ("sticks") for each movie. svg .selectAll(".lollipop-line") .data(movies) .join("line") .attr("class", "lollipop-line") .attr("x1", margin.left) .attr("x2", (d) => x(d.rating)) .attr("y1", (d) => y(d.title) + y.bandwidth() / 2) .attr("y2", (d) => y(d.title) + y.bandwidth() / 2) .attr("stroke", "#DCDCDC") .attr("stroke-width", 2); // Draw the lollipop circles ("candies") at the rating position. // Draw the lollipop circles ("candies") at the rating position using the color scale. svg .selectAll(".lollipop-circle") .data(movies) .join("circle") .attr("class", "lollipop-circle") .attr("cx", (d) => x(d.rating)) .attr("cy", (d) => y(d.title) + y.bandwidth() / 2) .attr("r", 10) .attr("fill", (d) => colorScale(d.rating)); // Define the average rating and compute its x-coordinate. const avgRating = 8.3; const xAvg = x(avgRating); // Set the starting position of the vertical line at the x-axis. const lineYStart = height - margin.bottom; // e.g., the x-axis position // Manually control the line length (how far upward the line extends). const desiredLineLength = 520; // Adjust this value for the line's length. const lineYEnd = lineYStart - desiredLineLength; // Control the gap between the top of the line and the text label. const textGap = 10; // For example, 10 pixels gap. const textY = lineYEnd - textGap; // Text is placed above the line by textGap pixels. // Draw the vertical dashed line. // Draw the vertical dashed line. const line = svg .append("line") .attr("x1", xAvg) .attr("y1", lineYStart) .attr("x2", xAvg) .attr("y2", lineYEnd) .attr("stroke", "#C1C1C1") .attr("stroke-dasharray", "4,2") .attr("stroke-width", 1); line.lower(); // Moves the line behind other elements (e.g., circles) // Add the text label above the line. svg .append("text") .attr("x", xAvg) .attr("y", textY) .attr("text-anchor", "middle") .style("font-family", "Helvetica, sans-serif") .style("font-size", "11px") .style("fill", "#646464") .text("Avg Movie Rating: 8.3"); return svg.node(); } 34:T17d0,{ // Overall container dimensions. const containerWidth = 1200; const containerHeight = 200; // Define left and right padding. const containerPaddingLeft = 50; const containerPaddingRight = 50; // Effective drawing width. const innerWidth = containerWidth - containerPaddingLeft - containerPaddingRight; // Number of squares. const numSquares = 45; // Desired (base) square size and gap between squares. const squareSize = 50; // desired square side length (in pixels) const gap = 12; // desired gap between squares (in pixels) // Total desired width using the base values. const totalDesiredWidth = numSquares * squareSize + (numSquares - 1) * gap; // Compute scale factor so that the squares fit within innerWidth. const scale = innerWidth / totalDesiredWidth; // Adjust square size and gap. const adjustedSquareSize = squareSize * scale; const adjustedGap = gap * scale; // Total adjusted width. const totalAdjustedWidth = numSquares * adjustedSquareSize + (numSquares - 1) * adjustedGap; // Calculate starting X position to center the squares within innerWidth. const startX = containerPaddingLeft + (innerWidth - totalAdjustedWidth) / 2; // Create the SVG container. const svg = d3 .create("svg") .attr("width", containerWidth) .attr("height", containerHeight) .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("style", "max-width: 100%; height: auto;"); // Center the squares vertically. const yPos = (containerHeight - adjustedSquareSize) / 2; // Define section boundaries: // Section 1: squares 0 to 10 (11 squares) // Section 2: squares 11 to 35 (25 squares) // Section 3: squares 36 to 44 (9 squares) const section1Count = 11; const section2Count = 25; // Section 3 count = numSquares - section1Count - section2Count = 9 // Define solid colors for each section. const colorSection1 = "#F67280"; // red const colorSection2 = "#C06C84"; // blue const colorSection3 = "#6C5B7B"; // green // Function to get a solid color based on square index. function getSectionColor(i) { if (i < section1Count) { return colorSection1; } else if (i < section1Count + section2Count) { return colorSection2; } else { return colorSection3; } } // Draw the 45 squares. for (let i = 0; i < numSquares; i++) { svg .append("rect") .attr("x", startX + i * (adjustedSquareSize + adjustedGap)) .attr("y", yPos) .attr("width", adjustedSquareSize) .attr("height", adjustedSquareSize) .attr("rx", 3) .attr("ry", 3) .attr("fill", getSectionColor(i)); } // Vertical margin for the text (distance above the squares). const textMarginTop = 5; // adjust as needed // Act 1: Left aligned at the beginning of section 1. svg .append("text") .attr("x", startX) .attr("y", yPos - textMarginTop) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .style("font-weight", "bold") .text("Act 1//Setup"); // Act 2: Left aligned at the beginning of section 2. svg .append("text") .attr("x", startX + section1Count * (adjustedSquareSize + adjustedGap)) .attr("y", yPos - textMarginTop) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .style("font-weight", "bold") .text("Act 2//Confrontation"); // Act 3: Left aligned at the beginning of section 3. svg .append("text") .attr( "x", startX + (section1Count + section2Count) * (adjustedSquareSize + adjustedGap), ) .attr("y", yPos - textMarginTop) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .style("font-weight", "bold") .text("Act 3//Resolution"); // Append title at the top center. svg .append("text") .attr("x", containerPaddingLeft) .attr("y", 50) // Adjust this value to position vertically (20px from top here) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "#333") .text("Following (1998)"); // Define the durations (change these values as needed) const durationAct1 = "17min 02sec"; const durationAct2 = "39min 30sec"; const durationAct3 = "11min 31sec"; // Set a vertical margin below the squares. const textMarginBottom = 20; // distance in pixels below the squares // Compute the right edge x positions for each section. const endXAct1 = startX + section1Count * (adjustedSquareSize + adjustedGap) - adjustedGap; const endXAct2 = startX + (section1Count + section2Count) * (adjustedSquareSize + adjustedGap) - adjustedGap; const endXAct3 = startX + totalAdjustedWidth; // end of all squares // Append duration label for Act 1 (right aligned at endXAct1) svg .append("text") .attr("x", endXAct1) .attr("y", yPos + adjustedSquareSize + textMarginBottom) .attr("text-anchor", "end") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .text(durationAct1); // Append duration label for Act 2 (right aligned at endXAct2) svg .append("text") .attr("x", endXAct2) .attr("y", yPos + adjustedSquareSize + textMarginBottom) .attr("text-anchor", "end") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .text(durationAct2); // Append duration label for Act 3 (right aligned at endXAct3) svg .append("text") .attr("x", endXAct3) .attr("y", yPos + adjustedSquareSize + textMarginBottom) .attr("text-anchor", "end") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#8C8C8C") .text(durationAct3); return svg.node(); }35:T78c1,{ // The 58 narrative lines (one per square). const lines = [ "A bald man kills a stranger in the blonde woman’s apartment.", "The blond woman hides the bloody carpet to use as blackmail.", "Bill is bored and starts shadowing people according to his set rules.", "Bill sees Cobb and becomes interested in him as a person, so he breaks his rules.", "Cobb notices Bill following him and decides to trick Bill.", "One day, Bill follows Cobb into a café where Cobb confronts him.", "They talk and introduce themselves.", "Cobb tells Bill that he understands Bill's urges to follow people and asks if he is ready to take it one step further.", "They break into the first apartment, and Cobb shows Bill how he likes to invade the privacy that strangers take for granted.", "The lady in the apartment comes back and catches them red-handed. Cobb pretends to be from an estate agency, and they escape to the terrace.", "Cobb prepares a box that Bill will later find in the third apartment; it contains some personal items belonging to the blond woman.", "Bill says he will scout the next apartment and then takes Cobb to his own apartment.", "Cobb notices that the resident of the second apartment is a loner who can return anytime, so he decides to leave.", "Cobb takes Bill to the third apartment, which belongs to the blond woman, and they break in.", "They look for a bag to put the stolen items in, and Bill takes some underwear and a photo strip belonging to the blond woman.", "Cobb takes one of the lady’s earrings and misplaces it on purpose to annoy her.", "After the break-in, Cobb takes Bill to an old, rundown office that no one uses and tells him to keep the stolen items until he finds a fence.", "Then, for an early supper, they go to a restaurant.", "Cobb makes Bill sign for a credit card he had stolen from D. Lloyd so that Bill can pretend to pay.", "The lady who caught them in the first apartment is seen at the restaurant, and Bill freaks out, making Cobb leave immediately.", "Cobb suggests that Bill get a shave and a haircut if he is so worried about getting caught.", "Bill goes back home, types something on his typewriter, and eats; later, he shaves and cuts his hair.", "When done, he checks all the items stolen from the blond woman’s apartment. Intrigued, he decides to keep most of her private items for himself.", "He calls Cobb to say that he will fence the items himself, and Cobb agrees, knowing Bill is lying.", "When Cobb hangs up, it is revealed that he and the blond woman were plotting together to trick Bill.", "After checking the blond woman’s items, Bill starts to follow her. He sees her leaving her apartment and going into a bar.", "Bill decides to approach her at the bar and flirt with her. She says she is with a bald man and, after a conversation, pretends to slap him and tells Bill to meet her outside.", "They go to his house, where she reveals that she is single and that she wanted to make the bald man jealous. She also says her house was recently burgled.", "Later, Bill reaches her apartment early and sees the bald man leaving the building.", "He rings the bell, and it appears he had been invited into her house.", "After some conversation about the burglary, they kiss, but both of them seem to have hidden intentions.", "Bill and the blond woman go to a basement restaurant where he asks her why she hides around the bald man so much.", "She reveals that she is scared of him and flashes back to when the bald man killed a stranger in her apartment with a hammer.", "He says something that makes her angry, and she leaves him alone.", "He goes to her house to apologize and confesses that he is a writer who writes about burglaries and follows people with a friend to observe what they do.", "He asks her to be honest, and she tells him that she is being blackmailed by the bald man, who has photos of her hidden in his safe at the office.", "He says that he and his friend will help her break into the safe and get her photos back, and she makes him promise not to look at the photos.", "Bill meets Cobb on a terrace. Bill gives Cobb the items he could not fence and tells Cobb about the heist he plans to conduct with the bald man.", "Cobb is angered that Bill met with the lady, and they fight.", "Cobb wins the fight, tells Bill that he is on his own, and stuffs a glove into Bill’s mouth.", "Bill wakes up later, bloodied and beaten, coughs out the glove, and types on his typewriter.", "Cobb and the blond woman meet, and he asks her why she slept with Bill. Then Cobb’s entire plan is revealed—he wanted to trick Bill to get out of a sticky situation.", "Bill follows the bald man to his office and stakes it out.", "He calls Cobb to ask about self-defense and learns that he can use a hammer to protect himself.", "Bill prepares himself with tools and breaks into the office.", "Bill reaches the safe, cracks it, and retrieves all the valuables. He then uses duct tape to attach all the money to his body.", "A man enters; Bill notices him. Scared, they scramble, and Bill hammers the man to death.", "Bill finishes taping the money and goes home.", "He calls the blond woman to tell her he got the stuff and opens the envelope with her photos. He notices that they are normal model photos.", "Angry, he goes to her house and confronts her.", "He learns about the truth and the extent of Cobb’s plan. Bill says he will go to the cops and confess in the morning, but she says that is not a good idea.", "Cobb kills the blond woman with the same hammer that Bill had used. It turns out Cobb was working for the bald man, and the blond woman was blackmailing him with the bloody carpet.", "Bill goes to the police and confesses.", "The police say that none of his story is accurate. There are no incidents like those in his story, although they did find the dead body of the blond woman that morning.", "They also found a shoebox in Bill’s apartment containing her underwear and her missing pearl earring.", "Bill mentions Cobb, and the police say there was no one at the address he gave; however, D. Lloyd has reported a missing credit card with Bill’s signature.", "Bill is confused.", "Cobb disappears into a crowd.", ]; // Ensure there are exactly 58 lines. if (lines.length !== 58) { throw new Error("Expected 58 lines, but got " + lines.length); } // Define the total timeline duration in seconds: 1h10m10s = 4210 seconds. const totalSeconds = 4210; // Overall container dimensions. const containerWidth = 1200; const containerHeight = 300; // Define left and right padding. const containerPaddingLeft = 50; const containerPaddingRight = 100; // Effective drawing width. const innerWidth = containerWidth - containerPaddingLeft - containerPaddingRight; // Number of squares. const numSquares = 58; // Desired (base) square size and gap. const squareSize = 20; const gap = 5; // Total desired width. const totalDesiredWidth = numSquares * squareSize + (numSquares - 1) * gap; // Compute scale factor so that squares fit within innerWidth. const scale = innerWidth / totalDesiredWidth; // Adjust square size and gap. const adjustedSquareSize = squareSize * scale; const adjustedGap = gap * scale; // Total adjusted width. const totalAdjustedWidth = numSquares * adjustedSquareSize + (numSquares - 1) * adjustedGap; // Calculate starting X position to center squares within innerWidth. const startX = containerPaddingLeft + (innerWidth - totalAdjustedWidth) / 2; // Top margin control for the squares. const squaresTopMargin = 120; // Adjust this value as needed. const yPos = squaresTopMargin; // Create the SVG container. const svg = d3 .create("svg") .attr("width", containerWidth) .attr("height", containerHeight) .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("style", "max-width: 100%; height: auto;"); // Define colors for the 6 sections using the new palette. const colors = { section1: "#F8B195", // Medium Gray for squares 1-2 section2: "#F67280", // Nice Blue for squares 3-7 section3: "#C06C84", // Nice Green for squares 8-22 section4: "#6C5B7B", // Nice Purple for squares 23-40 section5: "#355C7D", // Nice Orange for squares 41-52 section6: "#787878", // Nice Dark Gray for squares 53-58 }; // Define section boundaries (0-based index). const sections = [ { start: 0, end: 2, base: colors.section1 }, { start: 2, end: 7, base: colors.section2 }, { start: 7, end: 22, base: colors.section3 }, { start: 22, end: 40, base: colors.section4 }, { start: 40, end: 52, base: colors.section5 }, { start: 52, end: 58, base: colors.section6 }, ]; // Function to return a gradient color for square i within its section. function getGradientColor(i) { const section = sections.find((s) => i >= s.start && i < s.end); if (!section) return "#000"; // For first and last sections, return a solid base color. if (section.start === 0 || section.end === numSquares) { return section.base; } const numInSection = section.end - section.start; const frac = numInSection > 1 ? (i - section.start) / (numInSection - 1) : 0; const baseColor = section.base; const lighter = d3.hsl(baseColor).brighter(0.6).toString(); return d3.interpolateRgb(lighter, baseColor)(frac); } // Draw 58 squares with gradient color and tooltips. for (let i = 0; i < numSquares; i++) { svg .append("rect") .attr("x", startX + i * (adjustedSquareSize + adjustedGap)) .attr("y", yPos) .attr("width", adjustedSquareSize) .attr("height", adjustedSquareSize) .attr("rx", 3) .attr("ry", 3) .attr("fill", getGradientColor(i)) .on("mouseover", function (event) { d3.select(this).raise(); d3.select(".tooltip") .html(lines[i]) .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px") .transition() .duration(200) .style("opacity", 0.9); }) .on("mousemove", function (event) { d3.select(".tooltip") .html(lines[i]) .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px"); }) .on("mouseout", function () { d3.select(".tooltip").transition().duration(200).style("opacity", 0); }); } // Create (or reuse) a tooltip div. const tooltip = d3 .select("body") .selectAll(".tooltip") .data([null]) .join("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "gray") .style("border", "1px solid #ccc") .style("border-radius", "5px") .style("padding", "5px") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); // --- Timeline Line & Markers --- // Define vertical margin for the timeline line (below the squares). const timelineLineMargin = 60; const timelineLineY = containerHeight - 50; const markerHeight = 80; // Create a group for the timeline elements and hide it initially. const timelineGroup = svg .append("g") .attr("class", "timelineGroup") .style("display", "none"); // Draw the horizontal timeline line (spanning exactly the squares area). timelineGroup .append("line") .attr("x1", startX) .attr("y1", timelineLineY) .attr("x2", startX + totalAdjustedWidth) .attr("y2", timelineLineY) .attr("stroke", "#000") .attr("stroke-width", 1); // Add timestamp labels at the ends of the timeline line. timelineGroup .append("text") .attr("x", startX) .attr("y", timelineLineY + 15) .attr("text-anchor", "start") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", "#646464") .text("0:00:00"); timelineGroup .append("text") .attr("x", startX + totalAdjustedWidth) .attr("y", timelineLineY + 15) .attr("text-anchor", "end") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", "#646464") .text("1:10:10"); // --- Markers on the timeline --- // Define an array of marker objects. const markers = [ { text: "Cobb prepares a box that Bill will later find in the third apartment; it contains some personal items belonging to the blond woman.", start: "0:44", end: "1:36", }, { text: "Bill goes to the police and confesses.", start: "1:36", end: "2:09", }, { text: "Bill sees Cobb and becomes interested in him as a person, so he breaks his rules.", start: "2:09", end: "3:03", }, { text: "Bill is bored and starts shadowing people according to his set rules.", start: "3:03", end: "3:36", }, { text: "After checking the blond woman’s items, Bill starts to follow her. He sees her leaving her apartment and going into a bar.", start: "3:36", end: "3:46", }, { text: "Bill wakes up later, bloodied and beaten, coughs out the glove, and types on his typewriter.", start: "3:46", end: "4:54", }, { text: "Bill follows the bald man to his office and stakes it out.", start: "4:54", end: "5:14", }, { text: "Bill goes to the police and confesses.", start: "5:14", end: "5:24", }, { text: "One day, Bill follows Cobb into a café where Cobb confronts him.", start: "5:24", end: "7:12", }, { text: "Cobb tells Bill that he understands Bill's urges to follow people and asks if he is ready to take it one step further.", start: "7:12", end: "10:18", }, { text: "They break into the first apartment, and Cobb shows Bill how he likes to invade the privacy that strangers take for granted.", start: "10:18", end: "15:02", }, { text: "The lady in the apartment comes back and catches them red-handed. Cobb pretends to be from an estate agency, and they escape to the terrace.", start: "15:02", end: "17:02", }, { text: "After checking the blond woman’s items, Bill starts to follow her. He sees her leaving her apartment and going into a bar.", start: "17:06", end: "17:34", }, { text: "Bill decides to approach her at the bar and flirt with her. She says she is with a bald man and, after a conversation, pretends to slap him and tells Bill to meet her outside.", start: "17:34", end: "19:34", }, { text: "They go to his house, where she reveals that she is single and that she wanted to make the bald man jealous. She also says her house was recently burgled.", start: "19:34", end: "21:36", }, { text: "Bill follows the bald man to his office and stakes it out.", start: "21:36", end: "21:52", }, { text: "He calls Cobb to ask about self-defense and learns that he can use a hammer to protect himself.", start: "21:52", end: "22:42", }, { text: "Bill says he will scout the next apartment and then takes Cobb to his own apartment.", start: "22:42", end: "23:13", }, { text: "Cobb notices that the resident of the second apartment is a loner who can return anytime, so he decides to leave.", start: "23:13", end: "25:16", }, { text: "Later, Bill reaches her apartment early and sees the bald man leaving the building.", start: "25:16", end: "25:34", }, { text: "He rings the bell, and it appears he had been invited into her house.", start: "25:34", end: "27:48", }, { text: "After some conversation about the burglary, they kiss, but both of them seem to have hidden intentions.", start: "27:48", end: "28:49", }, { text: "Bill prepares himself with tools and breaks into the office.", start: "28:49", end: "29:46", }, { text: "Cobb takes Bill to the third apartment, which belongs to the blond woman, and they break in.", start: "29:46", end: "29:50", }, { text: "They look for a bag to put the stolen items in, and Bill takes some underwear and a photo strip belonging to the blond woman.", start: "29:50", end: "32:14", }, { text: "Cobb takes one of the lady’s earrings and misplaces it on purpose to annoy her.", start: "32:14", end: "32:30", }, { text: "They look for a bag to put the stolen items in, and Bill takes some underwear and a photo strip belonging to the blond woman.", start: "32:30", end: "33:30", }, { text: "After the break-in, Cobb takes Bill to an old, rundown office that no one uses and tells him to keep the stolen items until he finds a fence.", start: "33:30", end: "35:07", }, { text: "Bill and the blond woman go to a basement restaurant where he asks her why she hides around the bald man so much.", start: "35:07", end: "36:02", }, { text: "She reveals that she is scared of him and flashes back to when the bald man killed a stranger in her apartment with a hammer.", start: "36:02", end: "36:06", }, { text: "A bald man kills a stranger in the blonde woman’s apartment.", start: "36:06", end: "36:47", }, { text: "She reveals that she is scared of him and flashes back to when the bald man killed a stranger in her apartment with a hammer.", start: "36:47", end: "37:11", }, { text: "The blond woman hides the bloody carpet to use as blackmail.", start: "37:11", end: "37:22", }, { text: "He says something that makes her angry, and she leaves him alone.", start: "37:22", end: "38:03", }, { text: "Bill reaches the safe, cracks it, and retrieves all the valuables. He then uses duct tape to attach all the money to his body.", start: "38:03", end: "41:01", }, { text: "Then, for an early supper, they go to a restaurant.", start: "41:01", end: "41:40", }, { text: "Cobb makes Bill sign for a credit card he had stolen from D. Lloyd so that Bill can pretend to pay.", start: "41:40", end: "42:30", }, { text: "The lady who caught them in the first apartment is seen at the restaurant, and Bill freaks out, making Cobb leave immediately.", start: "42:30", end: "43:14", }, { text: "Cobb suggests that Bill get a shave and a haircut if he is so worried about getting caught.", start: "43:14", end: "43:36", }, { text: "Bill goes back home, types something on his typewriter, and eats; later, he shaves and cuts his hair.", start: "43:36", end: "45:23", }, { text: "When done, he checks all the items stolen from the blond woman’s apartment. Intrigued, he decides to keep most of her private items for himself.", start: "45:23", end: "47:17", }, { text: "He calls Cobb to say that he will fence the items himself, and Cobb agrees, knowing Bill is lying.", start: "47:17", end: "48:10", }, { text: "When Cobb hangs up, it is revealed that he and the blond woman were plotting together to trick Bill.", start: "48:10", end: "49:04", }, { text: "Bill reaches the safe, cracks it, and retrieves all the valuables. He then uses duct tape to attach all the money to his body.", start: "49:04", end: "49:53", }, { text: "A man enters; Bill notices him. Scared, they scramble, and Bill hammers the man to death.", start: "49:53", end: "50:08", }, { text: "Bill finishes taping the money and goes home.", start: "50:08", end: "51:01", }, { text: "He goes to her house to apologize and confesses that he is a writer who writes about burglaries and follows people with a friend to observe what they do.", start: "51:01", end: "52:29", }, { text: "He asks her to be honest, and she tells him that she is being blackmailed by the bald man, who has photos of her hidden in his safe at the office.", start: "52:29", end: "53:39", }, { text: "He says that he and his friend will help her break into the safe and get her photos back, and she makes him promise not to look at the photos.", start: "53:39", end: "53:55", }, { text: "Bill meets Cobb on a terrace. Bill gives Cobb the items he could not fence and tells Cobb about the heist he plans to conduct with the bald man.", start: "53:55", end: "54:44", }, { text: "Cobb is angered that Bill met with the lady, and they fight.", start: "54:44", end: "56:32", }, { text: "Cobb wins the fight, tells Bill that he is on his own, and stuffs a glove into Bill’s mouth.", start: "56:32", end: "56:45", }, { text: "Bill wakes up later, bloodied and beaten, coughs out the glove, and types on his typewriter.", start: "56:45", end: "57:54", }, { text: "Cobb and the blond woman meet, and he asks her why she slept with Bill. Then Cobb’s entire plan is revealed—he wanted to trick Bill to get out of a sticky situation.", start: "57:54", end: "59:27", }, { text: "Bill finishes taping the money and goes home.", start: "59:27", end: "59:45", }, { text: "He calls the blond woman to tell her he got the stuff and opens the envelope with her photos. He notices that they are normal model photos.", start: "59:45", end: "1:00:25", }, { text: "Angry, he goes to her house and confronts her.", start: "1:00:25", end: "1:01:20", }, { text: "He learns about the truth and the extent of Cobb’s plan. Bill says he will go to the cops and confess in the morning, but she says that is not a good idea.", start: "1:01:20", end: "1:03:58", }, { text: "Bill goes to the police and confesses.", start: "1:03:58", end: "1:04:09", }, { text: "The police say that none of his story is accurate. There are no incidents like those in his story, although they did find the dead body of the blond woman that morning.", start: "1:04:09", end: "1:04:48", }, { text: "Cobb kills the blond woman with the same hammer that Bill had used. It turns out Cobb was working for the bald man, and the blond woman was blackmailing him with the bloody carpet.", start: "1:04:48", end: "1:05:54", }, { text: "The police say that none of his story is accurate. There are no incidents like those in his story, although they did find the dead body of the blond woman that morning.", start: "1:05:54", end: "1:06:13", }, { text: "They also found a shoebox in Bill’s apartment containing her underwear and her missing pearl earring.", start: "1:06:13", end: "1:06:48", }, { text: "Bill mentions Cobb, and the police say there was no one at the address he gave; however, D. Lloyd has reported a missing credit card with Bill’s signature.", start: "1:06:48", end: "1:07:15", }, { text: "Bill is confused.", start: "1:07:15", end: "1:07:43" }, { text: "Cobb disappears into a crowd.", start: "1:07:43", end: "1:08:04" }, ]; function timeStringToSeconds(timeStr) { const parts = timeStr.split(":").map(Number); if (parts.length === 2) { return parts[0] * 60 + parts[1]; } else if (parts.length === 3) { return parts[0] * 3600 + parts[1] * 60 + parts[2]; } return 0; } // --- Markers on the timeline without tooltips --- markers.forEach((marker) => { // Find the index of the matching narrative line. const index = lines.findIndex((line) => line === marker.text); if (index === -1) return; // Skip if not found. const markerColor = getGradientColor(index); const startSec = timeStringToSeconds(marker.start); const endSec = timeStringToSeconds(marker.end); // Compute x positions along the timeline line. const markerX = startX + (startSec / totalSeconds) * totalAdjustedWidth; const markerWidth = ((endSec - startSec) / totalSeconds) * totalAdjustedWidth; // Draw a rectangle (marker) above the timeline line with a height of 30. timelineGroup .append("rect") .attr("x", markerX) .attr("y", timelineLineY - markerHeight) // Marker drawn above the timeline line. .attr("width", markerWidth) .attr("height", markerHeight) .attr("fill", markerColor); }); // --- Container & Button --- // Create a container div to hold the button and the SVG. const containerDiv = d3 .create("div") .style("width", containerWidth + "px") .style("margin", "auto") .style("text-align", "center"); // Initialize a state variable for the timeline. let timelineShown = false; // Create the "Reveal All Themes" button. const buttonWrapper = containerDiv .append("div") .style("position", "relative") .style("width", "100%") .style("display", "flex") .style("justify-content", "flex-start"); // Aligns the button to the left const button = buttonWrapper .append("button") .text("Show Timeline") .style("margin", "10px 0 10px 500px") // Manually adjust left margin as needed .style("padding", "8px 16px") .style("background", "#35AA99") .style("color", "white") .style("border", "none") .style("border-radius", "4px") .style("font-size", "14px") .style("cursor", "pointer") .style("transition", "background 0.3s") .on("mouseover", function () { if (!timelineShown) { d3.select(this).style("background", d3.rgb("#35AA99").darker(0.7)); // Darker when hidden. } else { d3.select(this).style("background", d3.rgb("#8C8C8C").darker(0.7)); // Darker when shown. } }) .on("mouseout", function () { if (!timelineShown) { d3.select(this).style("background", "#35AA99"); // Revert to blue-green when hidden. } else { d3.select(this).style("background", "#8C8C8C"); // Revert to gray when shown. } }) .on("click", function () { if (!timelineShown) { // Show timeline: fade in the timeline group. timelineGroup .style("display", "block") .style("opacity", 0) .transition() .duration(500) .style("opacity", 1) .on("end", () => { timelineShown = true; button.text("Hide Timeline").style("background", "#8C8C8C"); }); } else { // Hide timeline: fade out the timeline group. timelineGroup .transition() .duration(500) .style("opacity", 0) .on("end", function () { timelineGroup.style("display", "none"); timelineShown = false; button.text("Show Timeline").style("background", "#35AA99"); }); } }); // Define annotation texts for each section. const sectionAnnotations = [ "Flashback", "Setup & Introduction\nBill has long hair", "Bill shaves himself\nand cuts his hair", "Bill gets beaten up", "Climax", "Resolution", ]; // Define an array of margins for each descriptor (negative values move the annotation upward). const annotationMargins = [-80, -30, -30, -30, -30, -70]; // Define a gap between the square and the start of the vertical line. const lineStartGap = 5; // pixels gap above the square // Define an extra gap for the text from the end of the line. const textAdditionalGap = 5; // pixels gap above the line end // For each section, append a vertical line from the square (with a gap) up to (yPos + margin) // and then add the descriptor text above the line. // Define a horizontal offset for the text relative to the vertical line. const textOffset = 0; // pixels to the right of the line // For each section, append a vertical line from the square (with a gap) up to (yPos + margin) // and then add the descriptor text above the line. // Define a line height for the annotation text (in pixels) const lineHeight = 14; // adjust as needed // For each section, append a vertical line from the square (with a gap) up to (yPos + margin) // and then add the descriptor text above the line. sections.forEach((section, idx) => { const lastIndex = section.end - 1; // index of last square in this section // Compute the center x-coordinate of the last square. const xAnnotation = startX + lastIndex * (adjustedSquareSize + adjustedGap) + adjustedSquareSize / 2; // Get the color of that square. const sectionColor = getGradientColor(lastIndex); // Append a vertical line starting a little above the square (yPos - lineStartGap) // and ending at yPos + the section-specific margin. svg .append("line") .attr("x1", xAnnotation) .attr("y1", yPos - lineStartGap) .attr("x2", xAnnotation) .attr("y2", yPos + annotationMargins[idx]) .attr("stroke", sectionColor) .attr("stroke-width", 1); // Split the annotation text into lines. const lines = sectionAnnotations[idx].split("\n"); // Increase the extra offset using the lineHeight. const extraOffset = (lines.length - 1) * lineHeight; // Append the annotation text with the computed extra offset. const textEl = svg .append("text") .attr("x", xAnnotation) .attr( "y", yPos + annotationMargins[idx] - textAdditionalGap - extraOffset, ) .attr("text-anchor", "middle") .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px") .style("fill", sectionColor) .style("font-weight", "bold") .style("pointer-events", "none"); // Append each line as a separate tspan. lines.forEach((line, i) => { textEl .append("tspan") .attr("x", xAnnotation) .attr("dy", i === 0 ? 0 : "1.2em") .text(line) .style("font-weight", "bold"); }); }); // Append the SVG to the container. containerDiv.node().appendChild(svg.node()); return containerDiv.node(); }36:T157f,{ // Full list of themes (unique) const themes = [ "Identity", "Privacy", "Social Conventions", "Time", "Fractured Narrative", "Thrill", "Voyerism", "Obsession", "Deception", "Mystery", "Shadowing", "Mastermind", "Unreliable Narrator", "Memory", "Manipulation", "Revenge", "Trust", "Justice", "Truth vs. Lies", "Morality", "Guilt", "Consequences", "Regret", "Fear", "Hope", "Anger", "Origin", "Vigilantism", "Sacrifice", "Trauma", "Jealousy", "Rivalry", "Illusion", "Chaos", "Duality", "Love", "Madness", "Dreams", "Reality", "Subconscious", "Grief", "Truth", "Redemption", "Legacy", "Rebirth", "Betrayal", "Terrorism", "Exploration", "Survival", "Relativity", "Humanity", "Loneliness", "Family", "Endurance", "Science", "Desperation", "Heroism", "War", "Perspective", "Honor", "Free Will", "Paradox", "Fate", "Espionage", "Control", "Cause and Effect", "Politics", "Nuclear Destruction", "Idealism", "Isolation", "Weight of Knowledge", ]; // Create a container for the input, squares, and message. const container = html`

`; // Select input, squares container, and message container. const input = container.querySelector("input"); const squaresDiv = container.querySelector("#squares"); const messageDiv = container.querySelector("#message"); // Create five rounded squares (representing tries). const totalTries = 5; const squareSize = 18; // Adjust if needed to match the input height. for (let i = 0; i < totalTries; i++) { const square = document.createElement("div"); square.style.width = squareSize + "px"; square.style.height = squareSize + "px"; square.style.borderRadius = "4px"; square.style.border = "1px solid #ccc"; square.style.background = "#fff"; // initial color squaresDiv.appendChild(square); } // Track the number of attempts, correct answers, and attempted words. let attemptCount = 0; let correctCount = 0; const attemptedWords = []; // Listen for the Enter key. input.addEventListener("keydown", (event) => { if (event.key === "Enter" && attemptCount < totalTries) { const value = input.value.trim(); if (!value) return; // do nothing if empty // Check if the word was already tried (case-insensitive) if ( attemptedWords.some( (word) => word.toLowerCase() === value.toLowerCase(), ) ) { messageDiv.textContent = "You already tried that theme!"; messageDiv.style.color = "orange"; return; // don't count this attempt } // Record the new attempt. attemptedWords.push(value); // Check if the input exactly matches any theme (case-insensitive) const isCorrect = themes.some( (theme) => theme.toLowerCase() === value.toLowerCase(), ); // Get the corresponding square. const square = squaresDiv.children[attemptCount]; // Set the square's background: if correct, use #35AA99; if wrong, use #B0625E. square.style.background = isCorrect ? "#35AA99" : "#B0625E"; attemptCount++; if (isCorrect) correctCount++; // Clear the input for the next try. input.value = ""; // If totalTries attempts have been made, display the final message. if (attemptCount === totalTries) { let finalMessage; if (correctCount === 0) { finalMessage = "Maybe next time"; } else if (correctCount === 1) { finalMessage = "Nice attempt"; } else if (correctCount === 2) { finalMessage = "Not bad"; } else if (correctCount === 3) { finalMessage = "Almost!"; } else if (correctCount === 4) { finalMessage = "Great job!"; } else if (correctCount === 5) { finalMessage = "Congratulations, you scored (5/5)"; } messageDiv.textContent = finalMessage; messageDiv.style.color = "#8C8C8C"; // All messages in dark grey. input.disabled = true; input.placeholder = "No more tries"; } else { // Clear any previous message on intermediate attempts. messageDiv.textContent = ""; } } }); // Set up a continuous check (every 500ms) for the global flag 'allThemesRevealed'. const checkInterval = setInterval(() => { input.disabled = window.allThemesRevealed; input.placeholder = window.allThemesRevealed ? "Themes have been revealed" : "Guess a theme and press Enter"; }, 500); // Clean up the interval if the container is removed. container.addEventListener("DOMNodeRemoved", () => { clearInterval(checkInterval); }); return container; }37:T331f,{ // Data: each movie with its list of themes. const movies = [ { title: "Following", themes: [ "Identity", "Privacy", "Social Conventions", "Time", "Fractured Narrative", "Thrill", "Voyerism", "Obsession", "Deception", "Mystery", "Shadowing", "Mastermind", "Unreliable Narrator", ], }, { title: "Memento", themes: [ "Identity", "Memory", "Manipulation", "Fractured Narrative", "Revenge", "Trust", "Deception", "Time", "Justice", "Unreliable Narrator", "Truth vs. Lies", "Morality", "Obsession", ], }, { title: "Insomnia", themes: [ "Deception", "Truth vs. Lies", "Justice", "Guilt", "Consequences", "Morality", "Regret", "Identity", ], }, { title: "Batman Begins", themes: [ "Fear", "Identity", "Hope", "Justice", "Guilt", "Anger", "Origin", "Vigilantism", "Revenge", "Sacrifice", "Trauma", ], }, { title: "The Prestige", themes: [ "Obsession", "Jealousy", "Revenge", "Morality", "Sacrifice", "Rivalry", "Identity", "Illusion", ], }, { title: "The Dark Knight", themes: [ "Chaos", "Duality", "Morality", "Sacrifice", "Identity", "Fear", "Justice", "Consequences", "Vigilantism", "Revenge", "Rivalry", "Love", "Madness", ], }, { title: "Inception", themes: [ "Dreams", "Reality", "Subconscious", "Regret", "Time", "Ideas", "Guilt", "Grief", "Memory", "Hope", ], }, { title: "Dark Knight Rises", themes: [ "Fear", "Chaos", "Hope", "Truth", "Redemption", "Sacrifice", "Legacy", "Rebirth", "Betrayal", "Justice", "Terrorism", ], }, { title: "Interstellar", themes: [ "Exploration", "Time", "Love", "Survival", "Sacrifice", "Relativity", "Humanity", "Hope", "Loneliness", "Family", "Endurance", "Grief", "Regret", "Science", ], }, { title: "Dunkirk", themes: [ "Survival", "Time", "Sacrifice", "Fear", "Desperation", "Heroism", "War", "Endurance", "Perspective", "Honor", ], }, { title: "Tenet", themes: [ "Time", "Fractured Narrative", "Free Will", "Paradox", "Fate", "Survival", "Sacrifice", "Espionage", "Control", "Reality", "Cause and Effect", "Betrayal", ], }, { title: "Oppenheimer", themes: [ "Consequences", "Morality", "Guilt", "Politics", "Science", "Legacy", "Nuclear Destruction", "Idealism", "Isolation", "Betrayal", "Weight of Knowledge", ], }, ]; // Compute the min and max number of themes among movies. const minThemes = d3.min(movies, (m) => m.themes.length); const maxThemes = d3.max(movies, (m) => m.themes.length); // Create a linear scale so that a movie with minThemes gets a radius of 20 // and a movie with maxThemes gets a radius of 40. const movieRadiusScale = d3 .scaleLinear() .domain([minThemes, maxThemes]) .range([20, 40]); // Aggregate themes and count frequency. const themeCounts = {}; movies.forEach((movie) => { movie.themes.forEach((theme) => { themeCounts[theme] = (themeCounts[theme] || 0) + 1; }); }); // Create a tooltip div. const tooltip = d3 .select(document.body) .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("padding", "6px") .style("background", "#fff") .style("color", "#000") .style("border-radius", "4px") .style("pointer-events", "none") .style("opacity", 0) .style("font-family", "Helvetica, sans-serif") .style("font-size", "12px"); // Convert to array of objects: { theme, count }. const themesData = Object.keys(themeCounts).map((theme) => ({ theme, count: themeCounts[theme], })); // Define color palettes based on repetition count: // For themes with less than 3 repetitions. const lowRepetitionColors = ["#355C7D", "#6C5B7B"]; // For themes with 3 or more repetitions. const highRepetitionColors = ["#35AA99", "#F67280"]; // Assign colors to each theme based on its count. let lowIndex = 0; let highIndex = 0; themesData.forEach((d) => { if (d.count < 4) { d.color = lowRepetitionColors[lowIndex % lowRepetitionColors.length]; lowIndex++; } else { d.color = highRepetitionColors[highIndex % highRepetitionColors.length]; highIndex++; } }); // Create a scale for sub-bubble sizes based on the clicked theme's repetition. // Themes with 1 repetition will have circles of radius 50, and the theme with max count will have radius 75. const subBubbleSizeScale = d3 .scaleLinear() .domain([1, d3.max(themesData, (d) => d.count)]) .range([50, 75]); // Chart dimensions. const width = 1000, height = 1000; // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("display", "block") .style("margin", "auto") .style("max-width", "100%") .style("height", "auto"); // Create a radius scale based on theme frequency. const radiusScale = d3 .scaleSqrt() .domain([ d3.min(themesData, (d) => d.count), d3.max(themesData, (d) => d.count), ]) .range([20, 100]); // Assign a radius to each theme bubble. themesData.forEach((d) => { d.radius = radiusScale(d.count); }); const maxRadius = d3.max(themesData, (d) => d.radius); // Create a force simulation. const simulation = d3 .forceSimulation(themesData) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(-20)) .force( "collision", d3 .forceCollide() .radius((d) => d.radius) .iterations(10), ) // Lower the strengths here: .force( "x", d3.forceX(width / 2).strength((d) => (d.count >= 4 ? 0.4 : 0.1)), ) .force( "y", d3.forceY(height / 2).strength((d) => (d.count >= 4 ? 0.4 : 0.1)), ) .on("tick", ticked); function ticked() { node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); label.attr("x", (d) => d.x).attr("y", (d) => d.y); } // Create circle elements for the theme bubbles. const node = svg .selectAll("circle") .data(themesData) .join("circle") .attr("r", (d) => d.radius) .attr("fill", (d) => d.color) .on("click", function (event, d) { // Only allow click action if the theme appears at least twice. if (d.count < 2) return; // Fade out all circles except the clicked one. node .filter((nd) => nd !== d) .transition() .duration(300) .style("opacity", 0.2); // Remove any existing sub-bubble group. svg.selectAll(".sub-bubble-group").remove(); // Filter movies that include this theme. const relatedMovies = movies.filter((movie) => movie.themes.includes(d.theme), ); if (relatedMovies.length === 0) return; // Create a group for sub-bubbles. const group = svg.append("g").attr("class", "sub-bubble-group"); // Determine the uniform sub-bubble radius based on the clicked theme's count. const subBubbleRadius = subBubbleSizeScale(d.count); // Arrange sub-bubbles so their circumferences exactly touch the main bubble. const arrangementRadius = d.radius + subBubbleRadius; const centerX = d.x, centerY = d.y; const angleStep = (2 * Math.PI) / relatedMovies.length; relatedMovies.forEach((movie, i) => { const angle = i * angleStep; const cx = centerX + arrangementRadius * Math.cos(angle); const cy = centerY + arrangementRadius * Math.sin(angle); group .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", subBubbleRadius) .attr("fill", "#C06C84"); group .append("text") .attr("x", cx) .attr("y", cy) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "12px") .style("fill", "#fff") .text(movie.title); }); // When the mouse leaves the clicked bubble, remove sub-bubbles and restore opacity. d3.select(this).on("mouseout", function () { svg.selectAll(".sub-bubble-group").remove(); node.transition().duration(300).style("opacity", 1); }); }) // Add tooltip events for themes with 1 repetition. .on("mouseover", function (event, d) { if (d.count === 1) { // Find the movie that uses this theme. const movie = movies.find((movie) => movie.themes.includes(d.theme)); if (movie) { tooltip .html(`${d.theme} (${movie.title})`) .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px") .transition() .duration(200) .style("opacity", 0.9); } } }) .on("mousemove", function (event, d) { // Update tooltip position if needed. if (d.count === 1) { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px"); } }) .on("mouseout", function (event, d) { if (d.count === 1) { tooltip.transition().duration(200).style("opacity", 0); } }); // Add text labels inside the bubbles (only for themes with count > 1). const label = svg .selectAll("text") .data(themesData) .join("text") .text((d) => d.theme) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "Helvetica, sans-serif") .style("pointer-events", "none") .style("fill", "#fff") .style("font-size", (d) => { // Set a base font size: 14px for themes with multiple repetitions, 10px for only one. let baseSize = d.count > 1 ? 14 : 8; // Estimate the text width. let estimatedTextWidth = d.theme.length * baseSize * 0.6; // Scale the font size down if the text is too wide. if (estimatedTextWidth > d.radius * 2) { baseSize = (d.radius * 2) / (d.theme.length * 0.6); } return baseSize + "px"; }); svg .append("text") .attr("x", width / 2) .attr("y", height - 50) // adjust the vertical position as needed .attr("text-anchor", "middle") .style("font-family", "Helvetica, sans-serif") .style("font-size", "14px") .style("fill", "#333") .text( "Click on the larger bubbles to see the movies in which that theme is used.", ); // Initially hide the bubble chart. svg.style("opacity", 0); // Create a container div to hold the buttons and the SVG. const containerDiv = d3 .create("div") .style("width", width + "px") .style("margin", "auto") .style("text-align", "center") .style("margin-left", "70px"); // Adjust as needed // Create the "Reveal All Themes" button. const revealButton = containerDiv .append("button") .text("Reveal All Themes") .style("margin", "10px") .style("padding", "8px 16px") .style("background", "#3498DB") // Blue when hidden. .style("color", "white") .style("border", "none") .style("border-radius", "4px") .style("font-size", "14px") .style("cursor", "pointer") .style("transition", "background 0.3s") .on("click", function () { // Fade in the bubble chart. svg .transition() .duration(1000) .style("opacity", 1) .on("end", () => { // Disable the button after the transition completes. revealButton .attr("disabled", true) .style("background", "#ccc") // indicate it's disabled .text("All Themes Revealed"); // Set the global flag to true. window.allThemesRevealed = true; }); }); // Append the SVG to the container. containerDiv.node().appendChild(svg.node()); return containerDiv.node(); return svg.node(); }38:T3f10,

Admin. (2020, December 23). Following (1998) – Transcript. Scraps From the Loft. https://scrapsfromtheloft.com/movies/following-1998-script/
An article discussing the deeper themes of Christopher Nolan’s newest film, “Tenet”. (n.d.). Frivolous Fandom. https://www.frivolousfandom.com/articles/tenet-thematic-analysis-one-for-posterity
BATMAN ON FILM - Authoritative. Definitive. The ORIGINAL. (Est. 1998). (2020, August 13). BATMAN ON FILM. https://batman-on-film.com/
Carroll, W. (2017, July 15). How Christopher Nolan’s Insomnia took the thriller genre away from the mainland. Little White Lies. https://lwlies.com/articles/insomnia-christopher-nolan-thriller-alaska/
Chatterjee, I. (2023, July 13). Christopher Nolan's All-Time Classic That Earned $40 Million Was Shot in Just 25 Days. FandomWire. https://fandomwire.com/christopher-nolans-all-time-classic-memento-that-earned-40-million-was-shot-in-just-25-days/
Deep Focus Review. (2024, November 7). Insomnia (2002) | Movie Review | Deep Focus Review. https://www.deepfocusreview.com/reviews/insomnia/
Following | film by Nolan [1998] | Britannica. (n.d.). Encyclopedia Britannica. https://www.britannica.com/topic/Following
Garner, B., & Garner, B. (2019, May 14). Nolan’s Forgotten Film: Revisiting Insomnia - Filmotomy. Filmotomy. https://filmotomy.com/nolans-forgotten-insomnia/
Gibbons, B. (2025, February 9). The Prestige. ScreenRant. https://screenrant.com/db/movie/the-prestige/
Goldberg, M. (2020, August 19). Why Insomnia is a good Christopher Nolan movie and a bad remake. Collider. https://collider.com/insomnia-christopher-nolan-original-movie-compared/
Gorshin, M. (2022, September 9). Analysis of ‘Insomnia.’ Infinite Ocean. https://mawrgorshin.com/2022/09/09/analysis-of-insomnia/
GradeSaver. (n.d.-a). Batman begins themes. GradeSaver. https://www.gradesaver.com/batman-begins/study-guide/themes
GradeSaver. (n.d.-b). The Dark Knight Rises Themes. GradeSaver. https://www.gradesaver.com/the-dark-knight-rises/study-guide/themes
GradeSaver. (n.d.-c). The Dark Knight Themes. GradeSaver. https://www.gradesaver.com/the-dark-knight/study-guide/themes
GradeSaver. (n.d.-d). The prestige themes. GradeSaver. https://www.gradesaver.com/the-prestige/study-guide/themes
GradeSaver. (2017, May 17). Interstellar themes. GradeSaver. https://www.gradesaver.com/interstellar/study-guide/themes
GradeSaver. (2021, October 2). Memento themes. GradeSaver. https://www.gradesaver.com/memento/study-guide/themes
GradeSaver. (2023, June 28). Dunkirk themes. GradeSaver. https://www.gradesaver.com/dunkirk/study-guide/themes
Haven, E., & Haven, E. (2022, October 25). The Philosophy of Inception | Blog of the APA. American Philosophical Association. https://blog.apaonline.org/2022/10/27/the-philosophy-of-inception/
Hellerman, J. (2024a, January 28). “Interstellar” explained. No Film School. https://nofilmschool.com/interstellar-explained
Hellerman, J. (2024b, March 10). “Tenet” explained. No Film School. https://nofilmschool.com/tenet-explained
IMDB: Ratings, reviews, and where to watch the best movies & TV shows. (n.d.). IMDb. https://www.imdb.com/
Inception: exploring the layers of dreams and reality. (n.d.). Futurism. https://vocal.media/futurism/inception-exploring-the-layers-of-dreams-and-reality
Inception: thoughts, themes and stuff. (2016, September 29). 64th Opinion. https://64thopinion.com/2015/07/20/inception-thoughts-themes-and-stuff/
It’s about time: Revisiting “Inception” | Arts | The Harvard Crimson. (2020, October 27). https://www.thecrimson.com/article/2020/10/27/inception-2010-retrospective/
Jessup, V. a. P. B. C. (2021, January 8). The Dark Knight Rises – Character analysis. Cinema Sense. https://cinemasensereviews.wordpress.com/2021/01/08/the-dark-knight-rises-character-analysis/
Memento Themes | ShMoop. (n.d.). https://www.shmoop.com/study-guides/memento/themes.html
Movie reviews, TV reviews, game reviews, and music reviews. (n.d.). Metacritic. https://www.metacritic.com/
Newton-Rex, E. (2019, November 29). The Dunkirk Soundtrack is Way Cleverer Than You Think. Medium. https://medium.com/world-of-music/the-dunkirk-soundtrack-is-way-cleverer-than-you-think-18f5dc155d91
Platt, S. (2024, November 27). Memento: Fractured genius from a visionary filmmaker. Medium. https://medium.com/@sean_platt/memento-fractured-genius-from-a-visionary-filmmaker-48d377931e7e
Podcast, G. M. (2017, January 5). Analysis of ‘The Dark Knight.’ The GOAT Movie Podcast. https://goatmoviereviews.wordpress.com/2016/10/08/themes-of-the-dark-knight/
Reviewing Christopher Nolan’s Oppenheimer: symbolism, genius, humility and wisdom. (2024, May 13). Shells and Pebbles. https://www.shellsandpebbles.com/2024/05/13/reviewing-christopher-nolans-oppenheimer-symbolism-genius-humility-and-wisdom/
Rotten Tomatoes: movies | TV shows | Movie trailers | reviews. (n.d.). Rotten Tomatoes. https://www.rottentomatoes.com/
Tenet by Christopher Nolan and it’s Architectural Space - declad. (n.d.). https://www.declad.com/tenet-by-christopher-nolan-and-its-architectural-space
The Dark Knight Rises - The Themes and Ideas of TDKR! (2012, July 24). The SuperHeroHype Forums. https://forums.superherohype.com/threads/the-themes-and-ideas-of-tdkr.389881/
The joys of not understanding ‘Tenet.’ (2021, February 1). Rough Cut. https://roughcutfilm.com/2020/12/29/the-joys-of-not-understanding-tenet/
The Prestige: Ending and Themes | namelessandfameless. (n.d.). Namelessandfameless. https://namelessfameless.wixsite.com/namelessandfameless/the-prestige-ending-and-themes
Themes of “Tenet” by Christopher Nolan: Perception, reality, and the power of choice. (n.d.). The Astromech. https://www.theastromech.com/2023/05/themes-of-tenet-by-christopher-nolan.html
Tyler, A. (2020, December 1). What each Dark Knight trilogy movie really represents. ScreenRant. https://screenrant.com/dark-knight-trilogy-batman-movies-meaning-fear-chaos/
Upadhyay, P. (2021, December 15). Insomnia | The Cinephilia | Prathamesh Upadhyay | The Cinéphilia. Medium. https://medium.com/the-cin%C3%A9philia/insomnia-the-end-justifies-the-means-c0de1dac8799
Weltzin, I. T. (2025, February 6). Oppenheimer: A delightful mix of gritty themes, quippy humor, future-crushing endings. AlestleLive.com. https://www.alestlelive.com/lifestyles/article_a5342a7e-2b8a-11ee-a09d-73b0cba19948.html
Wikipedia contributors. (2025a, February 4). Inception. Wikipedia. https://en.wikipedia.org/wiki/Inception
Wikipedia contributors. (2025b, February 8). Insomnia (2002 film) - Wikipedia. https://en.wikipedia.org/wiki/Insomnia_(2002_film)
Wikipedia contributors. (2025c, February 9). Tenet (film). Wikipedia. https://en.wikipedia.org/wiki/Tenet_(film)
Wikipedia contributors. (2025d, February 11). The Dark Knight. Wikipedia. https://en.wikipedia.org/wiki/The_Dark_Knight
Wikipedia contributors. (2025e, February 12). Batman Begins. Wikipedia. https://en.wikipedia.org/wiki/Batman_Begins
Wikipedia contributors. (2025f, February 12). Following. Wikipedia. https://en.wikipedia.org/wiki/Following
Wikipedia contributors. (2025g, February 15). Dunkirk (2017 film). Wikipedia. https://en.wikipedia.org/wiki/Dunkirk_(2017_film)
Wikipedia contributors. (2025h, February 15). Interstellar (film). Wikipedia. https://en.wikipedia.org/wiki/Interstellar_(film)
Wikipedia contributors. (2025i, February 17). Memento (film). Wikipedia. https://en.wikipedia.org/wiki/Memento_(film)
Wikipedia contributors. (2025j, February 17). The Dark Knight Rises. Wikipedia. https://en.wikipedia.org/wiki/The_Dark_Knight_Rises
Wikipedia contributors. (2025k, February 18). Christopher Nolan filmography. Wikipedia. https://en.wikipedia.org/wiki/Christopher_Nolan_filmography#cite_note-24
Wikipedia contributors. (2025l, February 18). Oppenheimer (film). Wikipedia. https://en.wikipedia.org/wiki/Oppenheimer_(film)
Wikipedia contributors. (2025m, February 18). The Prestige (film). Wikipedia. https://en.wikipedia.org/wiki/The_Prestige_(film)
Yassin, D., & Yassin, D. (2021, April 20). ‘Interstellar’: Time and love. The Michigan Daily. https://www.michigandaily.com/arts/interstellar-time-and-love/
Yu, E. (2023, August 23). Vanishing Act: Review of Christopher Nolan’s “Following” (1998). Automachination. https://www.automachination.com/vanishing-act-review-christopher-nolan-following-1998/
Jaswal, M. (2022, August 18). Why Christopher Nolan crashed a real plane in Tenet. ScreenRant. https://screenrant.com/tenet-christopher-nolan-plane-crash-stunt-real-explained/
Maio, A. (2024, December 2). What is The Three Act Structure — And Why It Works. StudioBinder. https://www.studiobinder.com/blog/three-act-structure/

39:[{"id":"97ad53cf19f27343bad79a2a5045d06fe764f98a319cd647ed010463026f47b972f411800972b31fbeb1965f81d1285db10595f09b65cc7db4039ae95f8f6265","href":"https://static.observableusercontent.com/files/97ad53cf19f27343bad79a2a5045d06fe764f98a319cd647ed010463026f47b972f411800972b31fbeb1965f81d1285db10595f09b65cc7db4039ae95f8f6265","name":"nolan.png","type":"image/png","lastModified":1739938028073.287,"size":1223515},{"id":"67b840cec2543b0934411c58617265021268dff31872ef1d0735a2f64e9434c1f3d0472ccc63d806f9b4cf52692b9e7224598b1e489c663ebf7135baf7f81bd8","href":"https://static.observableusercontent.com/files/67b840cec2543b0934411c58617265021268dff31872ef1d0735a2f64e9434c1f3d0472ccc63d806f9b4cf52692b9e7224598b1e489c663ebf7135baf7f81bd8","name":"OPpei.gif","type":"image/gif","lastModified":1739951259878.948,"size":3528785},{"id":"813537b86839792e78fbda4af818708b981502b7f4ddfe056cde09ec0fed108796ed17951f214477da353ff9702b01b82b5cefa2dbcf6468e82474f6dd49b521","href":"https://static.observableusercontent.com/files/813537b86839792e78fbda4af818708b981502b7f4ddfe056cde09ec0fed108796ed17951f214477da353ff9702b01b82b5cefa2dbcf6468e82474f6dd49b521","name":"image@2.png","type":"image/png","lastModified":1740623720947.745,"size":1181629},{"id":"6fe711a93c6c07c7e79b169aa03b020b195b70797b76544f189f80c96edf45ea0fd7e28d37ecb80328ae2180f9abd19f82ed328fcc0812beef94f81e849f2940","href":"https://static.observableusercontent.com/files/6fe711a93c6c07c7e79b169aa03b020b195b70797b76544f189f80c96edf45ea0fd7e28d37ecb80328ae2180f9abd19f82ed328fcc0812beef94f81e849f2940","name":"image@3.png","type":"image/png","lastModified":1740624121382.982,"size":29876},{"id":"182b1321f0b1ace2d6b702d0c46f02c4a188cea5a95b594ad3bbb345addae41d1f7076b4edf753159013fba9f9ce14de10b8fd99c9b5c4a3c19a0b458d3f3265","href":"https://static.observableusercontent.com/files/182b1321f0b1ace2d6b702d0c46f02c4a188cea5a95b594ad3bbb345addae41d1f7076b4edf753159013fba9f9ce14de10b8fd99c9b5c4a3c19a0b458d3f3265","name":"image@4.png","type":"image/png","lastModified":1740624149481.848,"size":85506}] 30:{"id":"abd542fcb5159db5","slug":"the-inception-of-christopher-nolan","title":"The Inception of Christopher Nolan","thumbnail":"f69d5a50c5ae18e7c4049bb07d1c3e55a2d0fb4b67af0cf4ed75dac709eccfd2","access_level":"public","create_time":"$D2025-02-14T21:51:37.173Z","update_time":"$D2025-02-27T02:42:35.179Z","view_time":null,"first_public_time":"$D2025-02-19T10:47:59.257Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"de843a7353c193c8","login":"samehs-workspace","name":"Sameh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e2b1d1d8a259d9ff2a97d6494c268b342346d926640394027fadd30fe9098680","tier":"starter_2024","bio":""},"version":1683,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02fdbba53e6158a5","login":"sameh-waghmare","name":"Sameh Waghmare","avatar_url":"https://avatars-next.observableusercontent.com/9b7dcb679c1fbb8bf6fada914486e2daab9a70774e0362ace7ccf3327b6eaf22","tier":null,"bio":""}],"members":[{"type":"individual","id":"02fdbba53e6158a5","login":"sameh-waghmare","name":"Sameh Waghmare","avatar_url":"https://avatars-next.observableusercontent.com/9b7dcb679c1fbb8bf6fada914486e2daab9a70774e0362ace7ccf3327b6eaf22","tier":null,"role":"editor"},{"type":"team","id":"de843a7353c193c8","login":"samehs-workspace","name":"Sameh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e2b1d1d8a259d9ff2a97d6494c268b342346d926640394027fadd30fe9098680","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Inception of Christopher Nolan","cells":[{"id":0,"value":"

The Inception of Christopher Nolan

\"The screen is the same size for every story. A shot of a teacup is the same size as an army coming over the hill. It’s all storytelling.\"

\nRecently, I experienced Interstellar in IMAX—a true visual spectacle that felt entirely fresh and immersive. Every time I watch a Christopher Nolan film, I’m captivated by his impeccable sound design, breathtaking visuals, and intricate, often fractured, plotlines, all woven together with a profound exploration of human emotions. The ending of Inception still sparks debate, the Batman trilogy redefined the superhero genre, and Tenet pushed storytelling into bold, experimental territory with time. Now, having revisited some of his early work, it’s clear that in every film, Nolan’s unwavering commitment to storytelling and his ability to captivate audiences remain at the core of his artistry.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1099,"value":"nolan = FileAttachment(\"nolan.png\").image({\n style: \"width: 100%; height: 100%; object-fit: cover;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"

\nIt made me wonder: Where did his journey begin? How did his early works shape the genius we see today?\n
\nThis curiosity sparked my journey and created these series of data visualizations, and I’m excited to share that exploration with you.\n

Exploring Christopher Nolan's Filmography

\n To begin with, I reviewed his entire catalogue of films—both those I had seen and those I hadn’t—to understand the recurring themes, subject matters, and the point at which he began to gain traction. I meticulously recorded each film’s initial budget alongside its box office earnings, aiming to determine whether he managed to overcome the financial constraints of indie filmmaking and truly make a name for himself.\n
\n I was also curious about his production timelines: specifically, the interval between when his screenplay was finalized and when the film was released. While release dates were readily available, the exact dates of screenplay finalization were not. In many cases, I had to consult additional articles and interviews to deduce approximate dates. These best-case approximations shed light on his creative process and the efficiency of his production.\n

\n \n

\n Initial Budget of the Movie\n

\n \n

\n Box Office Earnings\n

\n The circle’s size corresponds to the amount of money, allowing you to visualise each film’s budget against its earnings.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"\n

\nData taken from YouTube Interviews, Wikipedia and Brittanica (Sources cited at the bottom of the page).\n

\nAs we can see - From the beginning, Nolan's films have garnered significant attention from audiences. Most of his films have performed well at the box office, with several achieving substantial commercial success. Over time, he developed a distinct storytelling style that resonated with a wide audience. While some films, such as Tenet, have been noted for prioritizing concept over narrative, and others, like Interstellar, for emphasizing spectacle over character, his works consistently engage viewers and generate discussion.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1589,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"\n

\nData from IMdB, Rotten Tomatoes and MetaCritic\n

\nWhat stood out to me was the small film at the beginning of the chart—Following. Curious about Nolan's first project, I watched it and was thoroughly impressed. Despite a budget of just $6,000 and a small cast of 8–10 people, Following was meticulously planned to be as cost-effective as possible. However, Nolan himself described the production as \"extreme,\".\n\nWith limited funds, minimal equipment, and a cast and crew who had full-time jobs during the week, the production stretched over a full year. Filming took place exclusively on Saturdays over 3–4 months, with around fifteen minutes of footage shot each day. This approach helped control the cost of film stock, which Nolan covered using his own salary (Wikipedia, N.D).\n
\nFollowing demonstrates how dedication and resourcefulness can help independent filmmakers overcome typical constraints and bring their vision to life. Let’s explore this film in more detail to see how Nolan’s early innovation set the foundation for his career.\n

Temporal Experimentation

\"If you’re trying to challenge an audience and make them look at elements in a different way, you’ve got to give them a familiar context to hang onto. But you have to be very aware that the audience is extremely ruthless in its demand for newness, novelty and freshness.\"\n
\n- Christopher Nolan\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1220,"value":"Following (1998) is a neo-noir thriller that centers on Bill, aimless writer who becomes obsessed with the act of following strangers around London for inspiration. \nInitially, he sees it as a creative exercise—observing people and using their behavior to fuel his writing. However, his voyeuristic pastime takes a dark turn when he encounters Cobb, a charismatic, mysterious figure who introduces him to a world of burglary. Under this man's influence, the writer is drawn into breaking into the homes of the very people he’s been following. As he becomes entangled in this criminal underworld, the line between observer and participant blurs. The film gradually reveals layers of deception and manipulation, forcing both the protagonist and the audience to question the reliability of perception and identity.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"

\n The three-act structure is one of the most widely used frameworks in storytelling, providing a clear narrative arc that guides a film’s progression. Act 1 serves as the foundation, introducing the audience to the world, characters, and key elements that will drive the story forward. Act 2 builds upon this setup, developing conflicts, raising stakes, and keeping the audience engaged as the plot unfolds.\n\nThe transition from Act 2 to Act 3 marks the climax—the moment of highest tension—where everything the story has been leading up to reaches its peak. Finally, Act 3 brings resolution, tying up loose ends and providing a satisfying conclusion.\n
\nAbove is a breakdown of Following through the lens of this classic structure.\n

\n At first glance, breaking the film down in this way might make it seem like a straightforward story. However, Nolan deliberately avoids a chronological narrative. Instead, he employs the perspective of an unreliable narrator, presenting a fractured timeline that only fully comes together at the end for a satisfying resolution.\n
\n The protagonist, Bill, serves as our visual cue to track different points in the timeline. At the start, he has long, unkempt hair, signaling the earliest stage of events. Later, he shaves and cuts his hair, marking a shift in time. Finally, we see him with short hair and visible bruises, indicating yet another distinct period. These visual markers help us piece together the film’s non-linear storytelling.\n

\n To better understand this structure, I personally analyzed the film, noting the timestamps of key scenes, tracking character actions, and using Bill’s appearance as a reference for where each moment fits in the timeline. I then distilled the entire story into 58 steps, wherein each step was an essential plot point, represented by the squares below. Hover over the squares to reveal each plot point.\nAdditionally, the squares are grouped by color into sections based on how Nolan presents the story. \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"

\n By clicking the button above, you can compare the actual sequence of scenes in Following with the chronological order of events. \n
\n This visualization highlights how masterfully Nolan weaves between different points in time, revealing only what is necessary at each moment—until it all comes together in the film’s conclusion.\n

\n What does this tell us? In his very first film, Following, we can already see Nolan’s fascination with time and nonlinear storytelling taking shape. Despite working with a minuscule budget and limited resources, he didn’t let the constraints of indie filmmaking stifle his ambition. Instead, he embraced these limitations, using creative problem-solving to craft a film that feels far larger than its means. His use of an unreliable narrator, fractured timelines, and a methodical reveal of key story elements all foreshadow the techniques he would go on to refine in his later films.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1426,"value":"oppei = FileAttachment(\"OPpei.gif\").image({\n style: \"width: 100%; height: 100%; object-fit: cover;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"\n

\nVisual Scene from Oppenheimer (2023).\n

Themes of Nolan

\n Speaking of his later films, it’s likely that most of you have seen at least one of Nolan’s works and are familiar with his deep focus on themes and emotions. Whether it’s exploring the nature of dreams in Inception, bending space-time and relativity in Interstellar, or immersing audiences in the land, sea, and air perspectives of Dunkirk, his ability to weave complex ideas into gripping narratives sets him apart.\n
\nWhat further distinguishes Nolan as a filmmaker is his commitment to practical effects over CGI whenever possible. He strives for authenticity, using traditional filmmaking techniques to enhance realism and immersion. A striking example of this is in Tenet, where instead of relying on digital effects, a real Boeing 747-200 freighter was purchased, repainted, and then crashed into a building for a pivotal scene.\n

\n Below is a text field where you can test your knowledge of Christopher Nolan's recurring themes by guessing them in five tries. Each correct or incorrect guess will be reflected visually, giving you a score at the end.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1344,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1542,"value":"

Recurring Themes

\n My goal here was to identify common thematic patterns across Christopher Nolan’s films and determine which themes he revisits most frequently. To achieve this, I analyzed movie reviews, critic ratings, and in-depth breakdowns from various sources, compiling a list of themes and keywords associated with each film.\n\nWith this data, I created a bubble chart where the size of each bubble represents the frequency of a theme across his movies. The larger the bubble, the more often that theme appears in his work. You can click on the larger bubbles to see which films explore that particular theme.\n

\n I recommend trying the game above first before revealing the themes, as clicking this button will deactivate the guessing feature.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"

\n From analyzing his filmography, we can see that certain themes appear repeatedly in Christopher Nolan's work. Sacrifice stands out as the most frequent, appearing in seven of his films, followed closely by Identity and Time, each featured six times. Morality and Justice also play significant roles in shaping his narratives. These recurring themes highlight Nolan’s fascination with characters facing deep internal and external struggles, often navigating high-stakes environments where choices have profound consequences.\n

Conclusion

\n Through this journey, we’ve explored Christopher Nolan’s evolution as a filmmaker—how he started, how he experimented with different structure, and how his films consistently push the boundaries of storytelling. His dedication to practical effects, nonlinear narratives, and deeply thematic storytelling is what makes him one of the most influential filmmakers of our time.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1669,"value":"image2 = FileAttachment(\"image@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"\n

\nMatt Damon as Odysseus in Christopher Nolan's Next Movie - The Odyssey (from Empire Online)\n

\n Storytelling surrounds us everywhere—whether it’s the narrative of a blockbuster film or the data in a humble spreadsheet. It has the power to transform the mundane into something meaningful, making simple things clearer, more engaging, and ultimately more memorable. Christopher Nolan understood this long ago; his films are not just visual spectacles, but carefully woven tales that elevate everyday moments into art.\n
\nAs you reflect on these ideas, consider this: how can you harness the power of storytelling in your own life to transform the ordinary into something extraordinary?\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1680,"value":"FileAttachment(\"image@4.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"References:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1226,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"