25:["$","title",null,{"children":"Interactive Movie Data Visualization | Mak Ahmad | Observable"}] 49:T588,movies = { const genres = ["Action", "Comedy", "Drama", "Sci-Fi", "Horror", "Romance", "Thriller"]; const titles = [ "Stellar Wars", "Ocean's Revenge", "The Last Knight", "Comedy Central", "Love Actually", "Space Odyssey", "Dark Night", "Summer Love", "Fast Track", "Mind Games", "Lost World", "Happy Days", "Thriller Night", "Romance Road", "Action Hero", "Sci-Fi Future", "Horror House", "Comedy Club", "Drama Queen", "Adventure Time", "Galaxy Quest", "Beach Party", "Mountain High", "City Lights", "Forest Deep", "Desert Storm", "Ocean Blue", "Sky High", "Earth Below", "Fire Storm", "Ice Age", "Thunder Strike", "Lightning Fast", "Storm Chaser", "Wind Walker", "Rain Dance", "Snow Fall", "Sun Rise", "Moon Light", "Star Bright", "Dream Big", "Hope High", "Faith Strong", "Love Deep", "Joy Full", "Peace Now", "Time Traveler", "Space Explorer", "Deep Sea", "High Sky" ]; return Array.from({length: 50}, (_, i) => ({ id: i + 1, title: titles[i], genre: genres[Math.floor(Math.random() * genres.length)], year: Math.floor(Math.random() * 34) + 1990, // 1990-2023 budget: Math.floor(Math.random() * 180) + 20, // $20M - $200M revenue: Math.floor(Math.random() * 800) + 50, // $50M - $850M rating: Math.round((Math.random() * 6 + 4) * 10) / 10, // 4.0 - 10.0 duration: Math.floor(Math.random() * 90) + 90 // 90-180 minutes })); } 4a:T202a,chart = { const width = 800; const height = 500; const margin = {top: 40, right: 120, bottom: 60, left: 80}; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%"); if (chartType === "scatter") { // SCATTER PLOT IMPLEMENTATION (INLINE TO ACCESS MUTABLE STATE) const xScale = d3.scaleLinear() .domain(d3.extent(filteredMovies, d => d.budget)) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(filteredMovies, d => d.revenue)) .range([height - margin.bottom, margin.top]); const colorScale = d3.scaleOrdinal() .domain(["Action", "Comedy", "Drama", "Sci-Fi", "Horror", "Romance", "Thriller"]) .range(d3.schemeCategory10); const sizeScale = d3.scaleSqrt() .domain(d3.extent(filteredMovies, d => d.rating)) .range([4, 12]); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) .append("text") .attr("x", width / 2) .attr("y", 35) .attr("fill", "black") .style("text-anchor", "middle") .text("Budget ($ millions)"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -50) .attr("x", -height / 2) .attr("fill", "black") .style("text-anchor", "middle") .text("Revenue ($ millions)"); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Movie Budget vs Revenue"); // Create tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(0,0,0,0.8)") .style("color", "white") .style("padding", "10px") .style("border-radius", "5px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "1000"); // Add circles with interactions const circles = svg.selectAll("circle") .data(filteredMovies) .join("circle") .attr("cx", d => xScale(d.budget)) .attr("cy", d => yScale(d.revenue)) .attr("r", d => sizeScale(d.rating)) .attr("fill", d => colorScale(d.genre)) .attr("stroke", "#333") .attr("stroke-width", 0.5) .style("opacity", 0.7) .style("cursor", "pointer"); // Add hover interactions circles .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", d => sizeScale(d.rating) * 1.5) .style("opacity", 1) .attr("stroke-width", 2); tooltip .style("visibility", "visible") .html(` ${d.title}
Genre: ${d.genre}
Year: ${d.year}
Budget: $${d.budget}M
Revenue: $${d.revenue}M
Rating: ${d.rating}/10
Duration: ${d.duration} min `); }) .on("mousemove", function(event) { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", d => sizeScale(d.rating)) .style("opacity", 0.7) .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { // Toggle selection - this now has access to mutable selectedMovies const currentSelected = mutable selectedMovies; const isSelected = currentSelected.some(movie => movie.id === d.id); if (isSelected) { mutable selectedMovies = currentSelected.filter(movie => movie.id !== d.id); } else { mutable selectedMovies = [...currentSelected, d]; } // Update visual feedback d3.select(this) .attr("stroke", isSelected ? "#333" : "#ff0000") .attr("stroke-width", isSelected ? 0.5 : 3); }); // Add legend const legend = svg.selectAll(".legend") .data(colorScale.domain()) .join("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(${width - 100}, ${50 + i * 20})`); legend.append("circle") .attr("r", 6) .attr("fill", d => colorScale(d)); legend.append("text") .attr("x", 12) .attr("y", 4) .style("font-size", "12px") .text(d => d); } else if (chartType === "bar") { // BAR CHART IMPLEMENTATION const genreData = d3.rollup(filteredMovies, v => d3.sum(v, d => d.revenue), d => d.genre ); const barData = Array.from(genreData, ([genre, revenue]) => ({genre, revenue})) .sort((a, b) => b.revenue - a.revenue); const xScale = d3.scaleBand() .domain(barData.map(d => d.genre)) .range([margin.left, width - margin.right]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.revenue)]) .range([height - margin.bottom, margin.top]); const colorScale = d3.scaleOrdinal() .domain(["Action", "Comedy", "Drama", "Sci-Fi", "Horror", "Romance", "Thriller"]) .range(d3.schemeCategory10); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Total Revenue by Genre"); // Add bars svg.selectAll("rect") .data(barData) .join("rect") .attr("x", d => xScale(d.genre)) .attr("y", d => yScale(d.revenue)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0) - yScale(d.revenue)) .attr("fill", d => colorScale(d.genre)) .style("opacity", 0.8); // Add legend for bar chart const legend = svg.selectAll(".legend") .data(barData) .join("g") .attr("class", "legend") .attr("transform", (d, i) => `translate(${width - 100}, ${50 + i * 20})`); legend.append("rect") .attr("width", 12) .attr("height", 12) .attr("fill", d => colorScale(d.genre)); legend.append("text") .attr("x", 16) .attr("y", 9) .style("font-size", "12px") .text(d => d.genre); } else { // HISTOGRAM IMPLEMENTATION const xScale = d3.scaleLinear() .domain(d3.extent(filteredMovies, d => d.rating)) .range([margin.left, width - margin.right]); const bins = d3.histogram() .value(d => d.rating) .domain(xScale.domain()) .thresholds(20)(filteredMovies); const yScale = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]) .range([height - margin.bottom, margin.top]); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Distribution of Movie Ratings"); // Add bars svg.selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0)) .attr("y", d => yScale(d.length)) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - 1)) .attr("height", d => yScale(0) - yScale(d.length)) .attr("fill", "steelblue") .style("opacity", 0.8); } return svg.node(); }4b:T606,

${summaryStats.count}

Movies

$${summaryStats.avgBudget}M

Avg Budget

$${summaryStats.avgRevenue}M

Avg Revenue

${summaryStats.avgRating}

Avg Rating

$${summaryStats.totalRevenue}M

Total Revenue

${summaryStats.profitMargin}%

Profit Margin

4c:T667,## Interaction Techniques Demonstrated This notebook showcases several key **interaction techniques** from visualization research: ### 🎯 **Selecting and Highlighting** - **Hover effects**: Points enlarge and show tooltips when you hover over them - **Click selection**: Click points to add them to the selection table below - **Visual feedback**: Selected points get red borders ### 🔗 **Linking and Brushing** - **Coordinated views**: Selected points in the main chart appear in the linked table - **Cross-highlighting**: Visual feedback shows which points are selected ### 🔍 **Dynamic Filtering** - **Real-time updates**: All filters update the visualization immediately - **Multiple filter types**: Genre (categorical), year (range), rating (threshold) ### 📊 **Re-encoding** - **Chart type switching**: Same data displayed as scatter plot, bar chart, or histogram - **Dynamic encoding**: Each chart type emphasizes different aspects of the data ### 📈 **Focus + Context** - **Summary statistics**: High-level overview updates with your selections - **Detail on demand**: Tooltips provide specific movie information ### ↗️ **Smooth Transitions** - **Animated interactions**: Hover effects use smooth transitions - **Visual continuity**: Changes between states are animated (with D3 transitions) ### 🎛️ **Navigation and Control** - **Multiple input types**: Checkboxes, sliders, dropdowns, buttons - **Reset functionality**: Clear all filters to return to original state *Try different combinations of filters and chart types to see how interaction techniques affect your understanding of the movie data!*4d:[] 29:{"id":"c678aadf815b2f4a","slug":null,"title":"Interactive Movie Data Visualization","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-06-16T02:56:41.488Z","update_time":"$D2025-06-18T16:30:21.622Z","view_time":null,"first_public_time":"$D2025-06-16T15:29:02.751Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":"education_2026","role":"editor"},{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6afcab3eab45518a","slug":"klm-summer-2025","title":"KLM - Summer 2025","owner":{"id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad"}},"type":"notebook","body":{"titling":"auto","title":"Interactive Movie Data Visualization","cells":[{"id":0,"value":"# Interactive Movie Data Visualization\n\nThis notebook demonstrates key **interaction techniques** in data visualization using a movie dataset. \n\n## Learning Objectives:\n- Experience **brushing and linking** between views\n- Understand **dynamic filtering** and real-time updates \n- See how **re-encoding** changes data stories\n- Practice **selecting and highlighting** data points\n- Observe **smooth transitions** between states\n\n*Adjust the controls below and watch how different interaction techniques affect your data exploration!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"mutable selectedMovies = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"**Debug Info**: Total movies in dataset: ${movies.length}\n\n## Interactive Controls\n*Use these controls to filter and explore the data. Notice how all visualizations update in real-time!*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Interactive Controls\n*Use these controls to filter and explore the data. Notice how all visualizations update in real-time!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"viewof genreFilter = Inputs.checkbox(\n [\"Action\", \"Comedy\", \"Drama\", \"Sci-Fi\", \"Horror\", \"Romance\", \"Thriller\"],\n {\n label: \"📽️ Genre Filter (Multi-select)\",\n value: [\"Action\", \"Comedy\", \"Drama\", \"Sci-Fi\", \"Horror\", \"Romance\", \"Thriller\"]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof yearRange = Inputs.range(\n [1990, 2023], \n {\n step: 1, \n label: \"📅 Year Range\", \n value: [1990, 2023],\n format: d => d,\n value: 1995\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof ratingThreshold = Inputs.range(\n [4, 10], \n {\n step: 0.1, \n label: \"⭐ Minimum Rating\", \n value: 4,\n format: d => d.toFixed(1)\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof sortBy = Inputs.select(\n [\"budget\", \"revenue\", \"rating\", \"year\"], \n {\n label: \"🔄 Sort By\",\n value: \"revenue\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof chartType = Inputs.select(\n [\"scatter\", \"bar\", \"histogram\"], \n {\n label: \"📊 Chart Type\", \n value: \"scatter\"\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof resetButton = Inputs.button(\"🔄 Reset All Filters\", {\n reduce: () => {\n // Clear selected movies when reset is clicked\n mutable selectedMovies = [];\n return Math.random(); // Return random value to trigger updates\n }\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"filteredMovies = {\n resetButton;\n \n // Ensure yearRange is valid\n const minYear = Array.isArray(yearRange) ? yearRange[0] : 1990;\n const maxYear = Array.isArray(yearRange) ? yearRange[1] : 2023;\n \n let filtered = movies.filter(d => \n genreFilter.includes(d.genre) &&\n d.year >= minYear && d.year <= maxYear &&\n d.rating >= ratingThreshold\n );\n \n filtered.sort((a, b) => b[sortBy] - a[sortBy]);\n \n return filtered;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"**Debug Info**: Filtered movies count: ${filteredMovies.length}\n- Genres selected: ${genreFilter.join(\", \")}\n- Year range: ${yearRange[0]} - ${yearRange[1]} \n- Min rating: ${ratingThreshold}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Main Visualization\n*This demonstrates **multiple interaction techniques**:*\n- **Hover** for highlighting and tooltips\n- **Click** to select individual movies\n- **Dynamic filtering** updates in real-time\n- **Re-encoding** when switching chart types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## Summary Statistics\n*This panel demonstrates **dynamic updates** - watch how the statistics change as you filter the data!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"summaryStats = {\n const count = filteredMovies.length;\n const avgBudget = d3.mean(filteredMovies, d => d.budget).toFixed(1);\n const avgRevenue = d3.mean(filteredMovies, d => d.revenue).toFixed(1);\n const avgRating = d3.mean(filteredMovies, d => d.rating).toFixed(1);\n const totalRevenue = d3.sum(filteredMovies, d => d.revenue);\n const profitMargin = ((avgRevenue - avgBudget) / avgBudget * 100).toFixed(1);\n \n return {\n count,\n avgBudget,\n avgRevenue, \n avgRating,\n totalRevenue,\n profitMargin\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## Selected Movies Table\n*This demonstrates **linking between views** - movies you click in the visualization above appear here!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"selectedMoviesTable = {\n // Access the mutable variable directly\n const selected = mutable selectedMovies;\n \n if (selected.length === 0) {\n return html`

Click on points in the scatter plot to select movies and see them here!

`;\n }\n \n return Inputs.table(selected, {\n columns: [\"title\", \"genre\", \"year\", \"budget\", \"revenue\", \"rating\"],\n header: {\n title: \"Movie Title\",\n genre: \"Genre\", \n year: \"Year\",\n budget: \"Budget ($M)\",\n revenue: \"Revenue ($M)\",\n rating: \"Rating\"\n },\n width: {\n title: 200,\n genre: 100,\n year: 80,\n budget: 100,\n revenue: 100,\n rating: 80\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"selectedMoviesTable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null