29:null 2a:["$","title",null,{"children":"Rocky Morphology (Redesign) | Columbia Dataviz | Observable"}] 2f:T143e,chart = { var width = 1000; var height = 1000; var margin = { top: 50, right: 270, bottom: 70, left: 70 }; var xScale = d3.scaleLinear() .domain([0, 6]) .range([margin.left, width - margin.right]); var yScale = d3.scaleLinear() .domain([0, 10]) .range([height - margin.bottom, margin.top]); function createPacking(movieData) { const packData = { name: movieData.Film, children: [ { name: "Fight", value: movieData.Fight }, { name: "Pre Fight", value: movieData["Pre Fight"] }, { name: "Montage", value: movieData.Montage }, { name: "Training", value: movieData.Training }, { name: "Dialogue", value: movieData.Dialogue }, { name: "Credits", value: movieData.Credits } ] }; const root = d3.hierarchy(packData).sum(d => d.value); const totalContent = d3.sum(packData.children, d => d.value); const maxRadius = Math.sqrt(totalContent) * 5.5; const pack = d3.pack() .size([maxRadius * 2, maxRadius * 2]) .padding(3); return pack(root); } const categoryColors = d3.scaleOrdinal() .domain(["Fight", "Pre Fight", "Montage", "Training", "Dialogue", "Credits"]) .range(["#a91e19", "#af441e", "#f1ed5d", "#52728f", "#464646", "#000000"]); data.forEach(d => { d.packed = createPacking(d); }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(6).tickFormat(d => d === 0 ? "" : `Rocky ${d}`)) .attr("font-size", "14px"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .attr("font-size", "14px"); svg.append("text") .attr("x", width / 2.5) .attr("y", height - 15) .attr("text-anchor", "middle") .text("Rocky Movies") .attr("font-size", "18px"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Rating") .attr("font-size", "18px"); svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .text("Rocky Morphology Redesign") .attr("font-size", "30px") .attr("font-weight", "bold"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#fff") .style("padding", "6px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("pointer-events", "none") .style("opacity", 0); const movieGroups = svg.selectAll(".movie") .data(data) .join("g") .attr("class", "movie") .attr("transform", d => `translate(${xScale(d.Part)},${yScale(d.Rating)})`); movieGroups.each(function (d) { const group = d3.select(this); const packed = d.packed; const rootRadius = packed.r; const totalDuration = d3.sum([d.Fight, d["Pre Fight"], d.Montage, d.Training, d.Dialogue, d.Credits]); group.selectAll(".pack-circle") .data(packed.descendants().filter(node => node.depth === 1)) .join("circle") .attr("class", "pack-circle") .attr("cx", node => node.x - rootRadius) .attr("cy", node => node.y - rootRadius) .attr("r", node => node.r) .attr("fill", node => categoryColors(node.data.name)) .attr("fill-opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 1) .on("mouseover", (event, node) => { const percent = ((node.data.value / totalDuration) * 100).toFixed(1); tooltip.transition().duration(200).style("opacity", 0.9); tooltip.html(` ${node.data.name}
Segment Duration: ${node.data.value.toFixed(1)} min
Percentage of Film: ${percent}%
Year Movie Released: ${d.Year}
Movie Rating: ${d.Rating.toFixed(1)} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", () => { tooltip.transition().duration(500).style("opacity", 0); }); }); const categories = ["Dialogue", "Training", "Montage", "Pre Fight", "Fight", "Credits"]; const legendSpacing = 25; const legendGroup = svg.append("g") .attr("transform", `translate(${width - margin.right + 100}, ${margin.top + 30})`); legendGroup.selectAll("rect") .data(categories) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * legendSpacing) .attr("width", 15) .attr("height", 15) .attr("fill", d => categoryColors(d)); legendGroup.selectAll("text") .data(categories) .join("text") .attr("x", 20) .attr("y", (d, i) => i * legendSpacing + 12) .attr("font-size", "12px") .text(d => d); legendGroup.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Narrative Segments"); return svg.node(); }30:T88e,# Writeup/Critique I noticed that the original visualization lacked source material for the data, which I had to compile manually using a text file and then appropriately convert for use in the redesign. What stood out to me most during this process, particularly while breaking down the narrative segments (dialogue, training, montages, pre-fight, fight, and credits), was how misleading the information could be when users interact with the visual. For example, certain segments differentiated by color often overlapped with others they were meant to distinguish from, leading to potential confusion. Drawing on Donald Norman’s guidance on the representation of numbers, I also felt that using Arabic numerals instead of Roman numerals to identify the films would make the visualization more immediately understandable to users. If I had more time, I would incorporate additional interactive features tailored to the data in order to further enhance user experience and comprehension of the visual. From the redesigned visualization, it's immediately clear that the 'Dialogue' segment consistently dominates the narrative structure and comprises the majority of the runtime across all the films. Another compelling insight revealed through the redesign is the gradual decline in ratings for the sequels over time, except for the final film, Rocky VI, which was surprisingly rated nearly as high as the second installment. While the redesign is less complex than the original, I believe it is more visually accessible, avoids overwhelming the viewer, and effectively communicates the core information that users are likely seeking. The addition of tooltip-based interactivity allows users to explore further details at their discretion. This revised data visualization aims to present the narrative elements of each Rocky movie in a way that is clear, accessible, and relevant, making it easier for viewers to engage with and interpret the data without unnecessary effort. To illustrate my design process, I’ve included initial brainstorming notes and sketches (see the PDF below), along with visual checkpoints that document key stages in the development of the redesign (below).31:T48d,blankChart = { // Declare the chart dimensions and margins. const width = 960; const height = 960; const marginTop = 40; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([0, 6]) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, 10]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)); // Add the y-axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)); // title label svg.append("text") .attr("x", width/2) .attr("y", marginTop/2) .attr("text-anchor", "middle") .attr("font-size","24px") .text("Rocky Morphology Redesign (Checkpoint 1)"); // Return the SVG element. return svg.node(); }32:Tc62,initialChart = { // Declare the chart dimensions and margins. const width = 960; const height = 960; const marginTop = 50; const marginRight = 50; const marginBottom = 40; const marginLeft = 70; // Declare the x (horizontal position) scale. const x = d3.scaleLinear() .domain([0, 6]) .range([marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, 10]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(6).tickFormat(d => (d === 0 ? "" : `Rocky ${d}`))) .attr("font-size","16px"); // Add the y-axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .attr("font-size","16px"); // y-axis label ('Rating') svg.append("text") .attr("transform", `rotate(-90)`) .attr("x", -height/2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size","20px") .text("Rating"); // title label svg.append("text") .attr("x", width/2) .attr("y", marginTop/2) .attr("text-anchor", "middle") .attr("font-size","24px") .text("Rocky Morphology Redesign (Checkpoint 2)"); svg.selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.Part)) .attr("cy", d => y(d.Rating)) .attr("r", 6) .attr("fill", "red"); // circular packing // var sizeDivisor = 100, nodePadding = 2.5; // var color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f", "#e5c494", "#b3b3b3"]); // var simulation = d3.forceSimulation() // .force("forceX", d3.forceX().strength(.1).x(width * .5)) // .force("forceY", d3.forceY().strength(.1).y(height * .5)) // .force("center", d3.forceCenter().x(width * .5).y(height * .5)) // .force("charge", d3.forceManyBody().strength(-15)); // // sort the nodes so that the bigger ones are at the back // var graph = data.sort(function(a,b){ return b.Fight - a.Fight; }); // //update the simulation based on the data // simulation // .nodes(graph) // .force("collide", d3.forceCollide().strength(.5).radius(function(d){ return d.radius + nodePadding; }).iterations(1)) // .on("tick", function(d){ // node // .attr("cx", function(d){ return d.x; }) // .attr("cy", function(d){ return d.y; }) // }); // var node = svg.append("g") // .attr("class", "node") // .selectAll("circle") // .data(graph) // .enter().append("circle") // .attr("r", function(d) { return d.radius; }) // .attr("fill", function(d) { return color(d.Film); }) // .attr("cx", function(d){ return d.x; }) // .attr("cy", function(d){ return d.y; }); // Return the SVG element. return svg.node(); }33:T1d04,{ // Set up dimensions and margins var width = 960 var height = 960 var margin = {top: 50, right: 50, bottom: 200, left: 70} // Create scales (keeping the same linear scales as before) var xScale = d3.scaleLinear() .domain([0, 6]) // Parts 1 through 6 .range([margin.left, width - margin.right]) var yScale = d3.scaleLinear() .domain([0, 10]) // Rating range with padding .range([height - margin.bottom, margin.top]) // Function to create circular packing for each movie function createPacking(movieData) { // Create hierarchical data structure for packing const packData = { name: movieData.Film, children: [ { name: "Fight", value: movieData.Fight }, { name: "Pre Fight", value: movieData["Pre Fight"] }, { name: "Montage", value: movieData.Montage }, { name: "Training", value: movieData.Training }, { name: "Dialogue", value: movieData.Dialogue }, { name: "Credits", value: movieData.Credits } ] }; // Create hierarchy and pack layout const root = d3.hierarchy(packData) .sum(d => d.value); // Maximum radius based on total content const totalContent = movieData.Fight + movieData["Pre Fight"] + movieData.Montage + movieData.Training + movieData.Dialogue + movieData.Credits; const maxRadius = Math.sqrt(totalContent) * 5.5; // Create packer with size based on movie content const pack = d3.pack() .size([maxRadius * 2, maxRadius * 2]) .padding(3); return pack(root); } // Create color scale for different content categories const categoryColors = d3.scaleOrdinal() .domain(["Fight", "Pre Fight", "Montage", "Training", "Dialogue", "Credits"]) .range(["red", "orange", "yellow", "blue", "grey", "black"]); // Create color scale for rating var ratingColorScale = d3.scaleLinear() .domain([5.4, 8.1]) // Min and max ratings .range(["#f7fbff", "#08306b"]) // Light blue to dark blue // Create packed data for each movie data.forEach(d => { d.packed = createPacking(d); }); // Create the SVG container const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // Add x-axis svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(6).tickFormat(d => d===0? "": `Rocky ${d}`)) .attr("font-size", "12px"); // Add y-axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .attr("font-size", "12px"); // Add axis titles svg.append("text") .attr("x", width / 2) .attr("y", height - 15) .attr("text-anchor", "middle") .text("Movies") .attr("font-size", "14px"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Rating") .attr("font-size", "14px"); // Add chart title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .text("Rocky Morphology Redesign (Checkpoint 3)") .attr("font-size", "24px") .attr("font-weight", "bold"); // Create a group for each movie const movieGroups = svg.selectAll(".movie") .data(data) .join("g") .attr("class", "movie") .attr("transform", d => `translate(${xScale(d.Part)},${yScale(d.Rating)})`); // Add circular packing for each movie movieGroups.each(function(d) { const group = d3.select(this); const packed = d.packed; // Adjust the transform to center the packed circles const rootRadius = packed.r; // Add only the child circles (skip the outer ring) group.selectAll(".pack-circle") .data(packed.descendants().filter(node => node.depth === 1)) .join("circle") .attr("class", "pack-circle") .attr("cx", node => node.x - rootRadius) .attr("cy", node => node.y - rootRadius) .attr("r", node => node.r) .attr("fill", node => categoryColors(node.data.name)) .attr("fill-opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 1); // Add labels for content categories (only for larger circles) // group.selectAll(".pack-label") // .data(packed.descendants().filter(node => node.depth === 1 && node.r > 12)) // .join("text") // .attr("class", "pack-label") // .attr("x", node => node.x - rootRadius) // .attr("y", node => node.y - rootRadius) // .attr("text-anchor", "middle") // .attr("dominant-baseline", "middle") // .attr("font-size", node => Math.min(node.r / 3, 10)) // .attr("fill", "white") // .text(node => `${node.data.value.toFixed(1)}%`); // Add indicators for rating using circle stroke color // group.append("circle") // .attr("r", rootRadius) // .attr("fill", "none") // .attr("stroke", ratingColorScale(d.rating)) // .attr("stroke-width", 3) // .attr("stroke-opacity", 0.8) // .attr("stroke-dasharray", "5,3"); // Add legend for ratings const ratingLegendGroup = svg.append("g") .attr("transform", `translate(${width - 180}, ${height - 120})`); // Create gradient for rating legend const gradient = ratingLegendGroup.append("defs") .append("linearGradient") .attr("id", "rating-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#f7fbff"); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#08306b"); // Add gradient rectangle ratingLegendGroup.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 150) .attr("height", 15) .attr("fill", "url(#rating-gradient)"); // Add rating labels ratingLegendGroup.selectAll(".rating-label") .data([5.4, 6.5, 7.5, 8.1]) .join("text") .attr("class", "rating-label") .attr("x", d => ((d - 5.4) / (8.1 - 5.4)) * 150) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "10px") .text(d => d.toFixed(1)); // Add rating legend title ratingLegendGroup.append("text") .attr("x", 75) .attr("y", -10) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Rating Scale"); // Add legend for content categories const categories = ["Fight", "Pre Fight", "Montage", "Training", "Dialogue", "Credits"]; const legendSpacing = 20; const legendGroup = svg.append("g") .attr("transform", `translate(20, ${height - 150})`); // Add color squares legendGroup.selectAll("rect") .data(categories) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * legendSpacing) .attr("width", 15) .attr("height", 15) .attr("fill", d => categoryColors(d)); // Add labels legendGroup.selectAll("text") .data(categories) .join("text") .attr("x", 20) .attr("y", (d, i) => i * legendSpacing + 12) .attr("font-size", "12px") .text(d => d); // Add legend title legendGroup.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "14px") .attr("font-weight", "bold") .text("Content Categories"); }); return svg.node(); } 34:T144b,chartFinal = { var width = 1000; var height = 1000; var margin = { top: 50, right: 270, bottom: 70, left: 70 }; var xScale = d3.scaleLinear() .domain([0, 6]) .range([margin.left, width - margin.right]); var yScale = d3.scaleLinear() .domain([0, 10]) .range([height - margin.bottom, margin.top]); function createPacking(movieData) { const packData = { name: movieData.Film, children: [ { name: "Fight", value: movieData.Fight }, { name: "Pre Fight", value: movieData["Pre Fight"] }, { name: "Montage", value: movieData.Montage }, { name: "Training", value: movieData.Training }, { name: "Dialogue", value: movieData.Dialogue }, { name: "Credits", value: movieData.Credits } ] }; const root = d3.hierarchy(packData).sum(d => d.value); const totalContent = d3.sum(packData.children, d => d.value); const maxRadius = Math.sqrt(totalContent) * 5.5; const pack = d3.pack() .size([maxRadius * 2, maxRadius * 2]) .padding(3); return pack(root); } const categoryColors = d3.scaleOrdinal() .domain(["Fight", "Pre Fight", "Montage", "Training", "Dialogue", "Credits"]) .range(["#a91e19", "#af441e", "#f1ed5d", "#52728f", "#464646", "#000000"]); data.forEach(d => { d.packed = createPacking(d); }); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(6).tickFormat(d => d === 0 ? "" : `Rocky ${d}`)) .attr("font-size", "14px"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .attr("font-size", "14px"); svg.append("text") .attr("x", width / 2.5) .attr("y", height - 15) .attr("text-anchor", "middle") .text("Rocky Movies") .attr("font-size", "18px"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Rating") .attr("font-size", "18px"); svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .text("Rocky Morphology Redesign (Final)") .attr("font-size", "30px") .attr("font-weight", "bold"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#fff") .style("padding", "6px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("pointer-events", "none") .style("opacity", 0); const movieGroups = svg.selectAll(".movie") .data(data) .join("g") .attr("class", "movie") .attr("transform", d => `translate(${xScale(d.Part)},${yScale(d.Rating)})`); movieGroups.each(function (d) { const group = d3.select(this); const packed = d.packed; const rootRadius = packed.r; const totalDuration = d3.sum([d.Fight, d["Pre Fight"], d.Montage, d.Training, d.Dialogue, d.Credits]); group.selectAll(".pack-circle") .data(packed.descendants().filter(node => node.depth === 1)) .join("circle") .attr("class", "pack-circle") .attr("cx", node => node.x - rootRadius) .attr("cy", node => node.y - rootRadius) .attr("r", node => node.r) .attr("fill", node => categoryColors(node.data.name)) .attr("fill-opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 1) .on("mouseover", (event, node) => { const percent = ((node.data.value / totalDuration) * 100).toFixed(1); tooltip.transition().duration(200).style("opacity", 0.9); tooltip.html(` ${node.data.name}
Segment Duration: ${node.data.value.toFixed(1)} min
Percentage of Film: ${percent}%
Year Movie Released: ${d.Year}
Movie Rating: ${d.Rating.toFixed(1)} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", () => { tooltip.transition().duration(500).style("opacity", 0); }); }); const categories = ["Dialogue", "Training", "Montage", "Pre Fight", "Fight", "Credits"]; const legendSpacing = 25; const legendGroup = svg.append("g") .attr("transform", `translate(${width - margin.right + 100}, ${margin.top + 30})`); legendGroup.selectAll("rect") .data(categories) .join("rect") .attr("x", 0) .attr("y", (d, i) => i * legendSpacing) .attr("width", 15) .attr("height", 15) .attr("fill", d => categoryColors(d)); legendGroup.selectAll("text") .data(categories) .join("text") .attr("x", 20) .attr("y", (d, i) => i * legendSpacing + 12) .attr("font-size", "12px") .text(d => d); legendGroup.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Narrative Segments"); return svg.node(); }35:[{"id":"c46622b860efe8a91d5be7fe54628f92d1ac2b00f46af7597bb913336304c296a319df277d9dc6f66a4e3c718e93bd993cdf357d2a819f059bbb2a5abcbee09d","href":"https://static.observableusercontent.com/files/c46622b860efe8a91d5be7fe54628f92d1ac2b00f46af7597bb913336304c296a319df277d9dc6f66a4e3c718e93bd993cdf357d2a819f059bbb2a5abcbee09d","name":"rocky_narratives_by_segment@1.csv","type":"text/csv","lastModified":1745409586255.502,"size":299},{"id":"aebad7517c3d2825a5274bb2c6a94bf9d309723be867b340fbca88519c61ff6cb80d2f82a2289ed29f9e63cb6cd9840491b916e638a16d1f9f243c6e70c02216","href":"https://static.observableusercontent.com/files/aebad7517c3d2825a5274bb2c6a94bf9d309723be867b340fbca88519c61ff6cb80d2f82a2289ed29f9e63cb6cd9840491b916e638a16d1f9f243c6e70c02216","name":"rocky_narrative_totals_with_rating_and_year.csv","type":"text/csv","lastModified":1745412136246.977,"size":390},{"id":"aebad7517c3d2825a5274bb2c6a94bf9d309723be867b340fbca88519c61ff6cb80d2f82a2289ed29f9e63cb6cd9840491b916e638a16d1f9f243c6e70c02216","href":"https://static.observableusercontent.com/files/aebad7517c3d2825a5274bb2c6a94bf9d309723be867b340fbca88519c61ff6cb80d2f82a2289ed29f9e63cb6cd9840491b916e638a16d1f9f243c6e70c02216","name":"data.csv","type":"text/csv","lastModified":1745412461783.814,"size":390},{"id":"1649fd1efd2d064516d50f819c6f2f7ba36e7a8fe47ccb782644c2f47bb3cfc683bad1d048db0d414d9ee479146c2ebe09cb6e0e24144b833e6492867d6b1828","href":"https://static.observableusercontent.com/files/1649fd1efd2d064516d50f819c6f2f7ba36e7a8fe47ccb782644c2f47bb3cfc683bad1d048db0d414d9ee479146c2ebe09cb6e0e24144b833e6492867d6b1828","name":"rocky_redesign_initial_sketch.pdf","type":"application/pdf","lastModified":1745458246438.585,"size":764197},{"id":"a6dc96d9d41935824d1951d984fd09150e7b18ff5ea6af67f5b2646c27232c9fbe017251796439b6bffdec488ba0dbbe9362e60d7ef2c827f810947108dc915e","href":"https://static.observableusercontent.com/files/a6dc96d9d41935824d1951d984fd09150e7b18ff5ea6af67f5b2646c27232c9fbe017251796439b6bffdec488ba0dbbe9362e60d7ef2c827f810947108dc915e","name":"Rocky-morphology.png","type":"image/png","lastModified":1745010200047.418,"size":141828},{"id":"4e16d8460c45a2bfe48004597140c004f5ad9bc086bbb1456d20170d4c784d689d7c931a0124abc59f9209c2f0cb2763e0d9be16d8c00db25c6b6d8c4fe38a6c","href":"https://static.observableusercontent.com/files/4e16d8460c45a2bfe48004597140c004f5ad9bc086bbb1456d20170d4c784d689d7c931a0124abc59f9209c2f0cb2763e0d9be16d8c00db25c6b6d8c4fe38a6c","name":"Rocky Movie Narrative Breakdown.txt","type":"text/plain","lastModified":1745020932154.196,"size":3032}] 2d:{"id":"9abff9114430cee9","slug":null,"title":"Rocky Morphology (Redesign)","thumbnail":"7cb110714da0fafdf234159f0b37ffe1bc631e8e64f95c721805e9596d742c1b","access_level":"public","create_time":"$D2025-04-18T20:58:39.963Z","update_time":"$D2025-04-24T03:54:50.493Z","view_time":null,"first_public_time":"$D2025-11-17T13:18:15.873Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":400,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e9d432fe67686dc8","login":"edward-yi","name":"Edward Yi","avatar_url":"https://avatars-next.observableusercontent.com/eef037efb131063aaa8cf5b5efbdc86eb9bba8ff6a073b40e2561d2619c64f76","tier":null}],"members":[{"type":"individual","id":"e9d432fe67686dc8","login":"edward-yi","name":"Edward Yi","avatar_url":"https://avatars-next.observableusercontent.com/eef037efb131063aaa8cf5b5efbdc86eb9bba8ff6a073b40e2561d2619c64f76","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rocky Morphology (Redesign)","cells":[{"id":0,"value":"# Rocky Morphology (Redesign)\n\nReferences:\n\nRocky Movies Chronology (IMDb): https://www.imdb.com/list/ls539962985/\n\nCircular Packing (D3):\nhttps://d3-graph-gallery.com/circularpacking.html\n\nDesign and Redesign article: https://medium.com/@hint_fm/design-and-redesign-4ab77206cf9#.mha4ohu1t\n\nRocky Morphology (original visualization):\nhttps://fathom.info/rocky/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"rockyMorphology = FileAttachment(\"Rocky-morphology.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"rockyMovieNarrativeBreakdown = FileAttachment(\"Rocky Movie Narrative Breakdown.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"data = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"# Redesign Methodology\n\nMy approach to redesigning this visualization focused on making the information more easily digestible, enhancing the communication of the narrative elements in these films in a way that is more visually intuitive for viewers and users, while ensuring it remained feasible within the scope of my current skills and the time available.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":360,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":370,"value":"rocky_redesign_initial_sketch = FileAttachment(\"rocky_redesign_initial_sketch.pdf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"