31:Ta8e,gross_chart = ele => { make_treemap_layout(hierarchy.sum(d => d.total_gross)); const svg = ele .append("svg") .attr("width", width + 50) .attr("height", height + 20); svg .selectAll("rect") .data(hierarchy.leaves()) .join(enter => { const gs = enter .append("g") .attr("transform", d => `translate(0 , ${height / 2})`); gs.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .style("stroke", "white") .style("fill", d => color(d.parent.data.key)) .on("mouseover", function(d) { tooltip.html( "" + d.data.title + "" + "
" + "Raw Total Gross: " + "$" + d3.format(",")(d.data.total_gross) + "
" + "Inflation Adjusted Gross: " + "$" + d3.format(",")(d.data.inflation_adjusted_gross) + "
" + "Release Date: " + d.data.release_date + "
" + "Genre: " + d.data.genre ); tooltip.style("visibility", "visible"); d3.select(this).style("stroke", "black"); }) .on("mousemove", function() { return tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { d3.select(this).style("stroke", "white"); return tooltip.style("visibility", "hidden"); }); gs.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); gs.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.title .split(/(?=[A-Z][a-z])|\s+/g) .concat("$" + format(d.data.total_gross)) ) .join("tspan") .attr("font-size", "12px") .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); return gs; }) .attr("transform", d => `translate(${d.x0}, ${d.y0 + 20})`) .selectAll("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); svg .append("text") .attr("x", 0) .attr("y", 18) .text("Raw Total Gross") .attr("font-size", "18px") .attr("fill", "black"); return svg.node(); }32:Tb34,adjusted_gross_chart = ele => { make_treemap_layout(hierarchy_adjusted.sum(d => d.inflation_adjusted_gross)); const svg = ele .append("svg") .attr("width", width) .attr("height", height + 20); svg .selectAll("rect") .data(hierarchy_adjusted.leaves()) .join(enter => { const gs = enter .append("g") .attr("transform", d => `translate(${width / 2 + 20}, ${height / 2})`); gs.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .style("stroke", "white") .style("fill", d => color(d.parent.data.key)) .on("mouseover", function(d) { tooltip.html( "" + d.data.title + "" + "
" + "Raw Total Gross: " + "$" + d3.format(",")(d.data.total_gross) + "
" + "Inflation Adjusted Gross: " + "$" + d3.format(",")(d.data.inflation_adjusted_gross) + "
" + "Release Date: " + d.data.release_date + "
" + "Genre: " + d.data.genre ); tooltip.style("visibility", "visible"); d3.select(this).style("stroke", "black"); }) .on("mousemove", function() { return tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { d3.select(this).style("stroke", "white"); return tooltip.style("visibility", "hidden"); }); gs.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); gs.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.title .split(/(?=[A-Z][a-z])|\s+/g) .concat("$" + format(d.data.inflation_adjusted_gross)) ) .join("tspan") .attr("font-size", "12px") .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); return gs; }) .attr("transform", d => `translate(${d.x0}, ${d.y0 + 20})`) .selectAll("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .style("left", function(d) { return d.x + "px"; }); svg .append("text") .attr("x", 0) .attr("y", 18) // +20 to adjust position (lower) .text("Adjusted Total Gross") .attr("font-size", "18px") .attr("fill", "black"); return svg.node(); }33:T5aa,md`In the total gross chart, it is apparent that newer movies tend to make more raw money, this could be due to the general inflation over the years. In recent years, adventure and action movies have been the most popular. The top 10 moviews in descending order for total gross are Star Wars Ep. VII: The Force Awakens, The Avengers, Rogue One: A Star Wars Story, Finding Dory, Avengers: Age of Ultron, Pirates of the Caribbean: Dead Man, The Lion King, Toy Story 3, Iron Man 3, and Captain America: Civil War. Half of these movies were created by Marvel. In the Adjusted Inflation Gross treemap, there is a bit more variety, with movies under the Adventure, Comedy, Musical, and Drama genres. These movies are a bit older and may be seen as classic movies by many Disney fans, besides Star Wars Episode 7 since it came out more recently. With most movies on this list being older, it makes it apparent how much inflation has occurred. Snow White only earned $184,925,485 back when it was released, but if we change that value into today's dollar value, then it earned over 5 Billion dollars, while Star Wars Episode 7 earned over 900 million. The movies with the highest inflated gross total in descending order are Snow White and the Seven Dwarfs, Pinocchio, Fantasia, 101 Dalmatians, Lady and the Tramp, Song of the South, Star Wars Ep. VII: The Force Awakens, Cinderella, The Jungle Book, The Lion King`34:[{"id":"43f322d538fc70fdd6cafd54978e9faedcbd7d5703699d8cbd7c40ebdee273e0dcbe44c1150c5c5db805edf32a75cecdcdf267717e2dcd9c688a05b9c44adb47","href":"https://static.observableusercontent.com/files/43f322d538fc70fdd6cafd54978e9faedcbd7d5703699d8cbd7c40ebdee273e0dcbe44c1150c5c5db805edf32a75cecdcdf267717e2dcd9c688a05b9c44adb47","name":"disney_movies_total_gross.csv","type":"text/csv","lastModified":1591432926165.043,"size":45332}] 2f:{"title":"Highest Total Gross (raw vs adjusted) Disney Movies","cells":[{"id":0,"value":"md`# Highest Total Gross (raw vs adjusted) Disney Movies #`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md`## Treemaps ##`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"make_treemap_layout = d3\n .treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"hierarchy = d3.hierarchy(\n { key: \"genres\", values: top10_gross_nest },\n d => d.values\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"hierarchy_adjusted = d3.hierarchy(\n { key: \"genres\", values: top10_adjusted_nest },\n d => d.values\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Musical\", \"Adventure\", \"Action\", \"Drama\", \"Comedy\"])\n .range([\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"legend = swatches({\n color: d3.scaleOrdinal(\n [\"Musical\", \"Adventure\", \"Action\", \"Drama\", \"Comedy\"],\n [\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\"]\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"treemaps = {\n const div = d3.create(\"div\");\n const charts = div\n .attr(\"class\", \"chart-container\")\n .call(gross_chart)\n .call(adjusted_gross_chart);\n\n // .style(\"height\", 500 + \"px\")\n // .style(\"width\", 1000 + \"px\");\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\")\n .style(\"color\", \"white\")\n .style(\"padding\", \"8px\")\n .style(\"background-color\", \"rgba(0, 0, 0, 0.8)\")\n .style(\"border-radius\", \"3px\")\n .style(\"font\", \"13px sans-serif\")\n .text(\"tooltip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`## Analysis ##`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"md`## Data ##`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"disney_movies_total_gross.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"disney_gross_data = data.map(d => {\n return {\n title: d.movie_title,\n genre: d.genre,\n total_gross: parseInt(d.total_gross.substr(1).replace(/,/g, '')),\n inflation_adjusted_gross: parseInt(\n d.inflation_adjusted_gross.substr(1).replace(/,/g, '')\n ),\n release_date: d.release_date\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"top10_gross = disney_gross_data\n .sort((a, b) => d3.descending(a.total_gross, b.total_gross))\n .filter((d, i) => {\n return i < 10;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"top10_adjusted = disney_gross_data\n .sort((a, b) =>\n d3.descending(a.inflation_adjusted_gross, b.inflation_adjusted_gross)\n )\n .filter((d, i) => {\n return i < 10;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"top10_gross_nest = nest_class.entries(top10_gross)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"top10_adjusted_nest = nest_class.entries(top10_adjusted)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Appendix ##`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"nest_class = d3.nest().key(d => d.genre)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}