2b:null 2c:["$","title",null,{"children":"Disney’s Blockbuster Success: Iconic Classics and Adventure Films Drive Major Revenue | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:Tb23,{ const treemapData = laidoutData; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, (width * 3) / 4]) .style("font", "10px sans-serif"); const leaf = svg .selectAll("g.leaf") .data(treemapData.leaves().filter(d => d.x1 - d.x0 > 0.5)) //exclude very small rectangles .join("g") .attr("class", "leaf") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title").text( d => `${d .ancestors() .reverse() .map(d => d.name) .join("/")}\n${format(d.value)}` ); leaf .append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data[0]); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf .filter(d => d.x1 - d.x0 > 30) // Don't do text on very small nodes .call(leaf => { leaf .append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf .append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d .ancestors() .reverse() .slice(1) .map(d => d.name) .concat(format(d.value)) ) .join("tspan") .attr("x", 3) .attr( "y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em` ) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null ) .text(d => d); }); const innerNodes = svg .selectAll("g.inner") .data( treemapData .descendants() .filter(d => d.children && d.depth <= 2 && d.x1 - d.x0 > 20) ) .join("g") .attr("class", "inner") .style("pointer-events", "none") .style("cursor", "none") .attr("transform", d => `translate(${d.x0},${d.y0})`); innerNodes .append("rect") .style("fill", "none") .style("stroke", "#333") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); innerNodes .append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); innerNodes .append("text") .attr("clip-path", d => d.clipUid) .attr("y", d => (d.depth === 1 ? 30 : (d.y1 - d.y0) / 2)) .attr("x", d => (d.x1 - d.x0) / 2) .style("text-anchor", "middle") .style("font-size", "3em") .attr("fill-opacity", 0.3) .style("stroke", "white") .style("stroke-width", d => (d.depth === 1 ? 1 : 0.5)) .text(d => d.name); return svg.node(); }32:T4f3,## Table of Contents * [Real insights](https://observablehq.com/d/e3acdcad2039e33e#cell-56) * [Target audience](https://observablehq.com/d/e3acdcad2039e33e#cell-58) * [Task abstraction](https://observablehq.com/d/e3acdcad2039e33e#cell-60) * [Example made-up insights (Hypothesis) and considerations](https://observablehq.com/d/e3acdcad2039e33e#cell-62) * [Tasks](https://observablehq.com/d/e3acdcad2039e33e#cell-64) * [How abstraction](https://observablehq.com/d/e3acdcad2039e33e#cell-66) * [Data Abstraction](https://observablehq.com/d/e3acdcad2039e33e#cell-68) * [Data source](https://observablehq.com/d/e3acdcad2039e33e#cell-70) * [Dataset discription](https://observablehq.com/d/e3acdcad2039e33e#cell-72) * [Overview of data using Navio](https://observablehq.com/d/e3acdcad2039e33e#cell-74) * [Data availability](https://observablehq.com/d/e3acdcad2039e33e#cell-82) * [Attributes Used](https://observablehq.com/d/e3acdcad2039e33e#cell-84) * [Data processing](https://observablehq.com/d/e3acdcad2039e33e#cell-50) * [Appendix: The public libraries used in this project](https://observablehq.com/d/e3acdcad2039e33e#cell-94) * [tweet](https://x.com/cherryflaneur/status/1857635956897325082) & [video](https://youtu.be/tdZwJSnX1L0) explaining the project33:T5c9,## 2. How abstraction * Mark: Area * Channels: * Spatial Region (Genre, categorical attribute): Movies are grouped into categories (e.g., genres like adventure, musical, drama) within distinct spatial regions. * Expressiveness: Spatial regions are used to group movies by genre. This spatial proximity makes it easy for users to see all movies within a particular genre in one contiguous block. * Effectiveness: Spatial grouping leverages human's natural ability to recognize clusters, making it easier to identify genre-based patterns and distributions at a glance. * Color Hue (Genre, categorical attribute): Different genres are encoded using distinct colors. * Expressiveness: Color expresses categorical information (genre), enabling users to identify patterns across genres. * Effectiveness: Color helps distinguish genres clearly. This makes it easy for users to differentiate between groups. * Area (2D Size) (Inflation_Adjusted_Gross, quantitative attribute): The size of each rectangle represents the Inflation Adjusted Gross generated by the corresponding movie. * Expressiveness: Area expresses the revenue values accurately, as the larger rectangles directly correspond to higher revenue. It aligns with the quantitative nature of the dataset. * Effectiveness: Area allows users to make clear visual comparison of revenue differences between movies. Larger areas immediately draw attention to high-grossing films. 34:T444,### 3.5 Attributes Used * Movie_Title - Categorical attribute: The name of each Disney movie. * Genre - Categorical attribute: The categorization of each movie into genres such as Musical, Adventure, and Drama. * MPAA_Rating - Categorical attribute: The movie's rating (e.g., G) as assigned by the Motion Picture Association of America. * G (General Audiences): Suitable for all ages; contains no content that would offend parents if viewed by children. * PG (Parental Guidance): Some material may not be suitable for children; parents are urged to provide guidance. * PG-13 (Parents Strongly Cautioned): Some material may be inappropriate for children under 13; parents are strongly urged to supervise. * R (Restricted): Restricted to viewers 17 and older unless accompanied by an adult; may contain adult material not suitable for children. * Inflation_Adjusted_Gross - Quantitative attribute: The total box office revenue adjusted for inflation, allowing for comparison between movies released in different time periods.35:[{"id":"321781173bb6313ee3105e023933dc5182fdc0a0fe541274658a7c69595bd17761b847fa1f65cee8a3ca5be0dec4b3a8699d48b83cd0563d63e92aba3ac85595","href":"https://static.observableusercontent.com/files/321781173bb6313ee3105e023933dc5182fdc0a0fe541274658a7c69595bd17761b847fa1f65cee8a3ca5be0dec4b3a8699d48b83cd0563d63e92aba3ac85595","name":"disney_movie_gross_data.csv","type":"text/csv","lastModified":1731702730992.657,"size":33720}] 2f:{"id":"e3acdcad2039e33e","slug":null,"title":"Disney’s Blockbuster Success: Iconic Classics and Adventure Films Drive Major Revenue","thumbnail":"6a491979ac4f0bf272af7b6c890bfe6a69d3fdee0b979f14c0e716632aca0576","access_level":"public","create_time":"$D2024-11-15T20:27:29.353Z","update_time":"$D2024-11-16T04:15:13.210Z","view_time":null,"first_public_time":"$D2024-11-16T03:33:48.241Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a66d9c6f7c527559","login":"shufan-chai","name":"Shufan Chai","avatar_url":"https://avatars-next.observableusercontent.com/c9b39c358d361b518562d961d655caa1a16cee2580758c0c44efaf089197ceda","tier":null,"bio":"Thou art more lovely and more temperate."}],"members":[{"type":"individual","id":"a66d9c6f7c527559","login":"shufan-chai","name":"Shufan Chai","avatar_url":"https://avatars-next.observableusercontent.com/c9b39c358d361b518562d961d655caa1a16cee2580758c0c44efaf089197ceda","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Disney’s Blockbuster Success: Iconic Classics and Adventure Films Drive Major Revenue","cells":[{"id":0,"value":"# Disney’s Blockbuster Success: Iconic Classics and Adventure Films Drive Major Revenue\nAnalyzed Using Movie Data from 1937 to 2016","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"This is a data visuzalization project made by [Shufan Chai](https://observablehq.com/user/@shufan-chai) from Northeastern University for the course [CS7295: Information Visualization](https://johnguerra.co/classes/data_visualization_fall_2024/) Fall 2024 with [Professor John Alexis Guerra Gomez](https://johnguerra.co/).\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## Introduction\nIt all started with a dream and a few iconic characters. Over the years, Disney has built a magical film empire, creating unforgettable stories that have shaped the childhoods of millions and captured the hearts of audiences worldwide. From beloved classics to record-breaking blockbusters, Disney’s movies have become a symbol of wonder and imagination.\n\nThis project is designed for Disney fans, industry professionals, and anyone curious about the magic behind the numbers. Using a treemap visualization, it explores Disney’s movies from a financial perspective, uncovering how genres like adventure have dominated in revenue, and highlighting the significant impact of timeless hits like The Lion King, Star Wars, and Snow White and the Seven Dwarfs. Through this visualization, we invite you to dive deeper into the world of Disney, discovering the trends and stories that have turned a mouse into a global symbol of joy and success!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"## Real insights\n* There is a significant head effect in Disney’s revenue distribution. Most of Disney’s high-revenue movies are well-known titles, such as pinocchio, Star Wars, The Lion King, 101 dalmatians, The avengers, and Snow White and the Seven Dwarfs. This indicates that a few classic films had a significant contribution to the revenue, while each movie represented by a smaller block generated relatively lower revenue.\n* Adventure movies have a broader appeal to audiences compared to other genres. Adventure movies stand out as a dominant genre in Disney’s portfolio, in terms of revenue. In comparison, genres like comedy, action and drama occupy smaller portions on the treemap, suggesting that while some films in these categories perform well, they don’t generate the same level of overall revenue or have the same widespread presence as adventure films.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"## Target audience\n* Disney Fans and Movie Buffs: Disney enthusiasts, like me, and movie fans might enjoy seeing the revenue impact of their favorite films, gaining insight into which classics and franchises have been most successful financially.\n* Investors and Stakeholders: Those with a financial interest in Disney, such as investors or business analysts, could use the visualization to better understand the profitability of Disney’s film portfolio, informing their investment decisions.\n* Professionals in the film industry: They could use this treemap to identify successful movie genres, providing insights for future content development and investment decisions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"## 1. Task abstraction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"### 1.1 Example made-up insights (Hypothesis) and considerations\n* [selected] Disney’s revenue distribution demonstrates a significant 'head effect,' with a few iconic films. In comparison, each of the remaining movies generated much lower revenue.\n * Considerations\n * I would need revenue data for all Disney movies in the dataset.\n * For the Idiom, I need to build a treemap showing the revenue distribution by each movie.\n* [selected] Adventure movies dominate Disney’s portfolio in revenue.\n * Considerations\n * I would need revenue data for all Disney movies in the dataset.\n * Additionally, I would need genre data for all Disney movies in the dataset.\n * For the Idiom, I need to build a treemap showing the revenue and quantity distribution by movie genre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"### 1.2 Tasks\n* T1: Summarize the revenue contributions of Disney movies. (Summarize, Distribution)\n * T1.1: Compare the revenue across different movie genres. (Compare, Distribution)\n * T1.2: Identify the genre that dominates the revenue in Disney’s portfolio. (Identify, Distribution)\n * T1.3: Identify the movies that dominate the revenue within each genre. (Identify, Distribution)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"## 3. Data Abstraction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"### 3.1 Data source\nThe Disney Movies Dataset is from Kaggle. It includes data on Disney movies from 1937 to 2016. \n\nLink to the dataset and its detailed description: https://www.kaggle.com/datasets/suvroo/disney-movies-dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"### 3.2 Dataset discription\nThis dataset is a table that originally contained 579 rows and 6 columns. See the table below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Inputs.table(tableData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"### 3.3 Overview of data using Navio\nNavio is a data exploration widget created by [Professor John Alexis Guerra Gomez](https://observablehq.com/@john-guerra/navio), which you can use to explore the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"viewof selectedData = navio(tableData, { attribWidth: 27 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"### 3.4 Data availability\nStatic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"## 4 Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"### 4.0 Import data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"tableData = FileAttachment(\"disney_movie_gross_data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### 4.1 Transform into tree format","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"treeData = d3.group(\n tableData.filter(d => d.Genre !== \"Unknown\"), \n d => d.Genre.trim(),\n d => d.Movie_Title.trim()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"### 4.2 Create a hierarchy from the tree data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"hierarchyData = {\n const extractName = d => {\n console.log(d);\n d.name = d.children ? d.data[0] || \"\" : d.data.MPAA_Rating;\n d.name = d.name.toLowerCase();\n d.id = (d.parent ? d.parent.id + \".\" : \"\") + d.name;\n };\n\n return d3\n .hierarchy(treeData)\n .eachBefore(extractName)\n .sum(d => +d.Inflation_Adjusted_Gross)\n .sort((a, b) => b.value - a.value);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### 4.3 Apply a layout to this hiearchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"laidoutData = {\n const treemapLayout = d3.treemap()\n .tile(d3.treemapSquarify)\n .size([width, width*3/4])\n .round(true)\n .paddingInner(1);\n \n return treemapLayout(hierarchyData);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"### 4.4 Draw the treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"format = d3.format(\"$,.2s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = d3.scaleOrdinal(d3.schemePastel2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"[Code for the treemap](https://observablehq.com/d/e3acdcad2039e33e#cell-28)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"## Appendix: The public libraries used in this project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"