2b:null 2c:["$","title",null,{"children":"Diversity and Representation in Disney Animated Movies | Columbia Data Viz Sp21 | Observable"}] 31:T1749,{ const margin = {top: 50, right: 50, bottom: 50, left: 50}; const width = 1000; const height = 500; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); var data = characters.sort(function(a, b) { return a.year - b.year; }); let currYear = 0; let genders = ["Male", "Female", "Nonbinary or Other"]; let races = ['White', 'Asian', 'Black or African American', 'Hispanic or Latino', 'Middle Eastern', 'Native Hawaiian or Other Pacific Islander', 'American Indian or Alaska Native', 'Two or More Races', 'Other']; if (feature == "Gender") { for (let i = 0; i < genders.length; i++) { svg.append("circle") .attr("cx", 700) .attr("cy", 20 * i + 20) .attr("r", 5) .attr("fill", color.get(genders[i])); svg.append("text") .attr("x", 720) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genders[i]); } } else { for (let i = 0; i < races.length; i++) { svg.append("circle") .attr("cx", 600) .attr("cy", 20 * i + 20) .attr("r", 5) .attr("fill", color.get(races[i])); svg.append("text") .attr("x", 620) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(races[i]); } } svg.append('line') .style("stroke", "black") .style("stroke-width", 1) .attr("x1", 10) .attr("y1", 425) .attr("x2", 985) .attr("y2", 425); svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.race); } else { return "black"; } }) .attr("x", (d, i) => { if (d.year > currYear && d.year % 2 == 1 && d.year != 1977) { svg.append('line') .style("stroke", "black") .style("stroke-width", 1) .attr("x1", i * 4 + 20) .attr("y1", 425) .attr("x2", i * 4 + 20) .attr("y2", 440); svg.append('text') .attr("x", -470) .attr("y", i * 4 + 25) .attr("text-anchor", "left") .attr("font-family", "Courier") .attr("font-size", "11px") .attr("fill", "black") .attr("transform", "rotate(-90)") .text(`${d.year}`); currYear = d.year; } return i * 4 + 20; }) .attr("y", d => 400) .attr("height", d => 20) .attr("width", 3) .on("mouseover", function(d, i) { d3.select(this) var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); //var movieStr = "Movie: " + d.movie + " (" + d.year + ")"; var movieStr = d.movie + " (" + d.year + ")"; var roleStr = "Role: " + d.role; var genderStr = "Gender: " + d.gender; var raceStr = "Race: " + d.race; var widthVal = Math.max(0, d.name.length * 9.5 + 20, movieStr.length * 9.5 + 20, roleStr.length * 8.3 + 20, genderStr.length * 8.3 + 20, raceStr.length * 8.3 + 20); svg.append("g") .attr("id", "tooltip1") .append("rect") .attr("fill", x => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.race); } else { return "black"; } }) .attr("x", i * 4 + 20) .attr("y", 350) .attr("height", 50) .attr("width", 3) var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${Math.min(xpos + 1.5, 970-widthVal)},${ypos - 150})`); tgrp.append("rect") .attr("width", widthVal) .attr("height", "110px") .attr("fill", "white") .attr("stroke", x => { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("stroke-width", 3); tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(d.name); tgrp.append("text") .attr("x", 10) .attr("y", 40) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(movieStr); tgrp.append("text") .attr("x", 10) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(`Role: ` + d.role); tgrp.append("text") .attr("x", 10) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genderStr); tgrp.append("text") .attr("x", 10) .attr("y", 100) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(raceStr); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(20) .attr("stroke-width", 0); d3.select("#tooltip").remove(); d3.select("#tooltip1").remove(); }); return svg.node(); }32:T1efc,{ const size = {"width":850, "height": 700} const mar = {top: 12, right: 10, bottom: 100, left: 100} const xScale = d3.scaleLinear() .domain([0, 260000100]) .range([mar.left, size.width - mar.right]) const yScale = d3.scaleLinear() .domain([0, 1450000000]) .range([size.height - mar.bottom, mar.top]) const svg = d3.select(DOM.svg(size.width + 300, size.height)); const xAxis = d3.axisBottom(xScale) const yAxis = d3.axisLeft(yScale) var money_data = []; var main = "none"; var year = 0; var actor = "none"; var gender = "none"; var name = "none"; for (var i = 0; i < movies.length; i++) { main = "none"; for (var j = 0; j < characters.length; j++) { if (movies[i]["title"] === characters[j]["movie"] && characters[j]["main"] === "y") { main = characters[j]["race"]; year = characters[j]["year"]; actor = characters[j]["actor_race"]; gender = characters[j]["gender"]; name = characters[j]["name"]; } else if (movies[i]["title"] === characters[j]["movie"]) { year = characters[j]["year"]; } } if (main != "none" && gender != "none") { money_data.push({"title" : movies[i]["title"], "budget" : movies[i]["budget"], "box" : movies[i]["box"], "name" : name, "race" : main, "gender" : gender, "year" : year, "actor_race" : actor, "imdb" : movies[i]["imdb"] }); } } svg.append('g') .attr('transform', `translate(0, ${size.height - mar.bottom})`) .call(xAxis); svg.append('g') .attr('transform', `translate(${mar.left}, 0)`) .call(yAxis); svg.append("text") .attr("font-family", "Andale Mono") .attr("font-size", "12px") .attr("fill", "black") .attr("transform", "rotate(180)") .attr("transform", function(d,i){ var xText = 5; var yText = 240; return "translate(" + xText + "," + yText + ") rotate(90)"; }) .text("Box Office Sales ($)"); svg.append("text") .attr("font-family", "Andale Mono") .attr("font-size", "12px") .attr("fill", "black") .attr("transform", "rotate(180)") .attr("transform", function(d,i){ var xText = 460; var yText = size.height - 55; return "translate(" + xText + "," + yText + ")"; }) .text("Budget ($)"); svg.append('line') .style("stroke", "grey") .style("stroke-width", 1) .attr("x1", xScale(0)) .attr("y1", yScale(0)) .attr("x2", xScale(260000000)) .attr("y2", yScale(260000000)); let genders = ["Male", "Female", "Nonbinary or Other"]; let races = ['White', 'Asian', 'Black or African American', 'Hispanic or Latino', 'Middle Eastern', 'Native Hawaiian or Other Pacific Islander', 'American Indian or Alaska Native', 'Two or More Races', 'Other']; if (feature == "Gender") { for (let i = 0; i < genders.length; i++) { svg.append("rect") .attr("x", 700) .attr("y", 20 * i + 16) .attr("width", "9px") .attr("height", "9px") .attr("fill", color.get(genders[i])); svg.append("text") .attr("x", 720) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genders[i]); } } else { for (let i = 0; i < races.length; i++) { svg.append("rect") .attr("x", 670) .attr("y", 20 * i + 18) .attr("width", "8px") .attr("height", "8px") .attr("fill", color.get(races[i])); svg.append("text") .attr("x", 690) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "11px") .attr("fill", "black") .text(races[i]); } } svg.append("g") .selectAll("circle") .data(money_data) .enter().append("circle") .attr("cx", d => xScale(parseInt(d.budget))) .attr("cy", d => yScale(parseInt(d.box))) .attr("fill", function(d) { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("r", 5) .style("opacity", 0.9) .on("mouseover", function(d, i) { d3.select(this) var xpos = parseFloat(d3.select(this).attr("cx")); var ypos = parseFloat(d3.select(this).attr("cy")); svg.append("line") .attr("id", "tooltip2") .style("stroke", "grey") .style("stroke-width", 1) .attr('stroke-dasharray', 5, 5) .attr("x1", xScale(parseInt(d.budget))) .attr("y1", yScale(parseInt(d.box))) .attr("x2", xScale(parseInt(d.budget))) .attr("y2", yScale(parseInt(d.budget))); var movieStr = d.title + " (" + d.year + ")"; var genderStr = "Gender: " + d.gender; var raceStr = "Race: " + d.race; var nameStr = "Main Char: " + d.name; var profitStr = "Profit: $" + parseInt((parseInt(d.box) - parseInt(d.budget)) / 1000000) + " mil"; var widthVal = Math.max(0, nameStr.length * 9.5 + 20, movieStr.length * 9.5 + 20, profitStr.length * 8.3 + 35, genderStr.length * 8.3 + 20, raceStr.length * 8.3 + 20); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", x => { if (d.title === "Tangled") { return `translate(${700},${ypos - 150})` } else if (d.title === "Frozen") { return `translate(${Math.min(xpos + 1.5, 970-widthVal)},${130})` } else { return `translate(${Math.min(xpos + 1.5, 970-widthVal)},${ypos - 150})` } }); tgrp.append("rect") .attr("width", widthVal) .attr("height", "110px") .attr("fill", "white") .attr("stroke", x => { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("stroke-width", 3); tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(movieStr); tgrp.append("text") .attr("x", 10) .attr("y", 40) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(profitStr); tgrp.append("text") .attr("x", 10) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(nameStr); tgrp.append("text") .attr("x", 10) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genderStr); tgrp.append("text") .attr("x", 10) .attr("y", 100) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(raceStr); ; }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) d3.select("#tooltip").remove(); d3.select("#tooltip2").remove(); }); ; return svg.node(); }33:T4a57,// code { const width = 1000; const height = 650; const margin = {top: 30, right: 0, bottom: 30, left: 30}; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let heroes = []; let villains = []; let sidekicks = []; characters.map(c => { if (c.role == "Hero") { heroes.push(c); } else if (c.role == "Villain") { villains.push(c); } else { sidekicks.push(c); } }) let genders = ["Male", "Female", "Nonbinary or Other"]; let races = ['White', 'Asian', 'Black or African American', 'Hispanic or Latino', 'Middle Eastern', 'Native Hawaiian or Other Pacific Islander', 'American Indian or Alaska Native', 'Two or More Races', 'Other']; const groups = ["Hero", "Actor", "Villain", " Actor", "Supporting Role", " Actor"]; const x = d3.scaleBand() .domain(groups.map(function(d) { return d; })) .range([margin.left, 490]) .padding(0.1); const y = d3.scaleLinear() .domain([0, 95]) .range([height - margin.bottom, margin.top]) .range([height, margin.top]); const xAx = d3.axisBottom(x); const yAx = d3.axisLeft(y); if (feature == "Gender") { for (let i = 0; i < genders.length; i++) { svg.append("circle") .attr("cx", 700) .attr("cy", 20 * i + 20) .attr("r", 5) .attr("fill", color.get(genders[i])); svg.append("text") .attr("x", 720) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genders[i]); } } else { for (let i = 0; i < races.length; i++) { svg.append("circle") .attr("cx", 600) .attr("cy", 20 * i + 20) .attr("r", 5) .attr("fill", color.get(races[i])); svg.append("text") .attr("x", 620) .attr("y", 20 * i + 25) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(races[i]); } } function sortGender (a,b) { if (a.gender > b.gender) { return 1; } else if (a.gender < b.gender) { return -1; } else { return 0; } } function sortRace (a,b) { if (a.race > b.race) { return 1; } else if (a.race < b.race) { return -1; } else { return 0; } } if (feature == "Gender") { heroes.sort(function (a,b) { return sortGender(a,b); }); villains.sort(function (a,b) { return sortGender(a,b); }); sidekicks.sort(function (a,b) { return sortGender(a,b); }); } else { heroes.sort(function (a,b) { return sortRace(a,b); }); villains.sort(function (a,b) { return sortRace(a,b); }); sidekicks.sort(function (a,b) { return sortRace(a,b); }); } svg.append('g') .attr('transform', `translate(0, ${height - 45})`) .call(xAx); svg.append('g') .attr('transform', `translate(${margin.left}, 5)`) .call(yAx); var herobars = svg.append("g") herobars.append("g") .selectAll("rect") .data(heroes) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.actor_gender); } else if (feature === "Race") { return color.get(d.actor_race); } else { return "black"; } }) .attr("x", 110) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 50) herobars.append("g") .selectAll("rect") .data(heroes) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.race); } else { return "black"; } }) .attr("x", 50) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 50) herobars.append("g") .selectAll("rect") .data(heroes) .join("rect") .attr("fill", "transparent") .attr("x", 50) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 110) herobars .selectAll("rect") .on("mouseover", function(d, i) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", "2") var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); var movieStr = d.movie + " (" + d.year + ")"; var nameStr = `Character: ` + d.name; var genderStr = "Gender: " + d.gender; var raceStr = "Race: " + d.race; var actorStr = "Actor: " + d.actor; var actorRaceStr = "Race: " + d.actor_race; var actorGenderStr = "Gender: " + d.actor_gender; var widthVal = Math.max(0, nameStr.length * 10 + 20, movieStr.length * 10 + 20, genderStr.length * 9 + 20, raceStr.length * 9 + 20, actorStr.length * 10 + 20, actorGenderStr.length * 9 + 20, actorRaceStr.length * 9 + 20); var tgrp = herobars.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${500}, ${Math.min(ypos + 1.5, height - 240)})`); tgrp.append("rect") .attr("width", widthVal) .attr("height", "183px") .attr("fill", "white") .attr("stroke", "lightgrey") .attr("stroke-width", 3) tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 40) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("stroke-width", 3); tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 113) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.actor_gender); } else { return color.get(d.actor_race); } }) .attr("stroke-width", 3); tgrp.append("text") .attr("x", 15) .attr("y", 27) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(movieStr); tgrp.append("text") .attr("x", 15) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(nameStr); tgrp.append("text") .attr("x", 15) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genderStr); tgrp.append("text") .attr("x", 15) .attr("y", 100) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(raceStr); tgrp.append("text") .attr("x", 15) .attr("y", 133) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(actorStr); tgrp.append("text") .attr("x", 15) .attr("y", 153) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorGenderStr); tgrp.append("text") .attr("x", 15) .attr("y", 173) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorRaceStr); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(20) .attr("stroke-width", 0); d3.select("#tooltip").remove(); d3.select("#tooltip1").remove(); }); var villainbars = svg.append("g") villainbars.append("g") .selectAll("rect") .data(villains) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.actor_gender); } else if (feature === "Race") { return color.get(d.actor_race); } else { return "black"; } }) .attr("x", 260) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 50) villainbars.append("g") .selectAll("rect") .data(villains) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.race); } else { return "black"; } }) .attr("x", 200) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 50) villainbars.append("g") .selectAll("rect") .data(villains) .join("rect") .attr("fill", "transparent") .attr("x", 200) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 110) villainbars .selectAll("rect") .on("mouseover", function(d, i) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", "2") var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); var movieStr = d.movie + " (" + d.year + ")"; var nameStr = `Character: ` + d.name; var genderStr = "Gender: " + d.gender; var raceStr = "Race: " + d.race; var actorStr = "Actor: " + d.actor; var actorRaceStr = "Race: " + d.actor_race; var actorGenderStr = "Gender: " + d.actor_gender; var widthVal = Math.max(0, nameStr.length * 10 + 20, movieStr.length * 10 + 20, genderStr.length * 9 + 20, raceStr.length * 9 + 20, actorStr.length * 10 + 20, actorGenderStr.length * 9 + 20, actorRaceStr.length * 9 + 20); var tgrp = villainbars.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${500}, ${Math.min(ypos + 1.5, height - 240)})`); tgrp.append("rect") .attr("width", widthVal) .attr("height", "185px") .attr("fill", "white") .attr("stroke", "lightgrey") .attr("stroke-width", 3) tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 40) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("stroke-width", 3); tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 113) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.actor_gender); } else { return color.get(d.actor_race); } }) .attr("stroke-width", 3); tgrp.append("text") .attr("x", 15) .attr("y", 27) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(movieStr); tgrp.append("text") .attr("x", 15) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(nameStr); tgrp.append("text") .attr("x", 15) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genderStr); tgrp.append("text") .attr("x", 15) .attr("y", 100) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(raceStr); tgrp.append("text") .attr("x", 15) .attr("y", 133) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(actorStr); tgrp.append("text") .attr("x", 15) .attr("y", 153) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorGenderStr); tgrp.append("text") .attr("x", 15) .attr("y", 173) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorRaceStr); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(20) .attr("stroke-width", 0); d3.select("#tooltip").remove(); d3.select("#tooltip1").remove(); }); var sidebars = svg.append("g") sidebars.append("g") .selectAll("rect") .data(sidekicks) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.actor_race); } else { return "black"; } }) .attr("x", 410) .attr("y", (d, i) => 600 - i * 6) // .attr('transform', `translate(515, 0)`) .attr("height", 5) .attr("width", 50) sidebars.append("g") .selectAll("rect") .data(sidekicks) .join("rect") .attr("fill", d => { if (feature === "Gender") { return color.get(d.gender); } else if (feature === "Race") { return color.get(d.race); } else { return "black"; } }) .attr("x", 350) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 50) sidebars.append("g") .selectAll("rect") .data(sidekicks) .join("rect") .attr("fill", "transparent") .attr("x", 350) .attr("y", (d, i) => 600 - i * 6) .attr("height", 5) .attr("width", 110) sidebars .selectAll("rect") .on("mouseover", function(d, i) { d3.select(this) .attr("stroke", "black") .attr("stroke-width", "2") var xpos = parseFloat(d3.select(this).attr("x")); var ypos = parseFloat(d3.select(this).attr("y")); var movieStr = d.movie + " (" + d.year + ")"; var nameStr = `Character: ` + d.name; var genderStr = "Gender: " + d.gender; var raceStr = "Race: " + d.race; var actorStr = "Actor: " + d.actor; var actorRaceStr = "Race: " + d.actor_race; var actorGenderStr = "Gender: " + d.actor_gender; var widthVal = Math.max(0, nameStr.length * 10 + 20, movieStr.length * 10 + 20, genderStr.length * 9 + 20, raceStr.length * 9 + 20, actorStr.length * 10 + 20, actorGenderStr.length * 9 + 20, actorRaceStr.length * 9 + 20); var tgrp = sidebars.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${500}, ${Math.min(ypos + 1.5, height - 240)})`); tgrp.append("rect") .attr("width", widthVal) .attr("height", "185px") .attr("fill", "white") .attr("stroke", "lightgrey") .attr("stroke-width", 3) tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 40) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.gender); } else { return color.get(d.race); } }) .attr("stroke-width", 3); tgrp.append("rect") .attr("width", widthVal) .attr("height", "70px") .attr("fill", "transparent") .attr("x", 0) .attr("y", 113) .attr("stroke", x => { if (feature == "Gender") { return color.get(d.actor_gender); } else { return color.get(d.actor_race); } }) .attr("stroke-width", 3); tgrp.append("text") .attr("x", 15) .attr("y", 27) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(movieStr); tgrp.append("text") .attr("x", 15) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(nameStr); tgrp.append("text") .attr("x", 15) .attr("y", 80) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(genderStr); tgrp.append("text") .attr("x", 15) .attr("y", 100) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(raceStr); tgrp.append("text") .attr("x", 15) .attr("y", 133) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("fill", "black") .text(actorStr); tgrp.append("text") .attr("x", 15) .attr("y", 153) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorGenderStr); tgrp.append("text") .attr("x", 15) .attr("y", 173) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(actorRaceStr); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(20) .attr("stroke-width", 0); d3.select("#tooltip").remove(); d3.select("#tooltip1").remove(); }); return svg.node() }34:T1078,map = { const svg = d3.select(DOM.svg(width, width/1.6)); const projection = d3.geoMercator() .center([0, 50]) .scale(150) .rotate([0,0]); const path = d3.geoPath() .projection(projection); const g = svg.append("g"); var min_year = Math.min(... movies.map(d => parseFloat(d.year))); var max_year = Math.max(... movies.map(d => parseFloat(d.year))); console.log(min_year, max_year); var color = d3.scaleSequential(d3.interpolateReds).domain([min_year, max_year]); var info = new Map(); var info2 = new Map(); for (var i = 0; i < movies.length; i++) { var movie = movies[i]; if (movie.Lon === 0 && movie.Lat === 0) { info.set(movie.setting, [movie.year, 0]); } else { if (!info.get(movie.setting)) { info.set(movie.setting, [movie.year, 1]); info2.set(movie.setting, movie.title + " (" + movie.year + ")"); } else { info.get(movie.setting)[1]++; } } } movies.sort(function(a,b) { return info.get(b.setting)[1] - info.get(a.setting)[1]; }); // world map g.selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .enter() .append("path") .attr("d", path) .attr("stroke", "gray") .attr("stroke-width", 0.5) .style('fill', 'white') const park = g .selectAll("circle") .data(movies) .enter() .append("circle") .attr("stroke", "grey") .attr("stroke-width", 0.5) .attr("r", function(d) { if (d.lon == 0 && d.lat == 0) { return 0; } else { return Math.log(info.get(d.setting)[1] * 2) * 10; } }) .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("fill", function(d) { if (d.lon == 0 && d.lat == 0) { return 0; } else { return color(info.get(d.setting)[0]); } }) .on("mouseover", function(d, i) { d3.select(this) var xpos = parseFloat(projection([d.lon, d.lat])[0]); var ypos = parseFloat(projection([d.lon, d.lat])[1]); var settingStr = d.setting; var numStr = info.get(d.setting)[1] + " movies"; var movieStr = "First Release: " + info2.get(d.setting); var widthVal = Math.max(0, settingStr.length * 9.5 + 20, settingStr.length * 8.3 + 20, movieStr.length * 8.3 + 20); var tgrp = svg.append("g") .attr("class", "tooltip") .attr("id", "tooltip1") .attr("transform", `translate(${Math.min(xpos + 15, 950-widthVal)},${ypos + 15})`); tgrp.append("rect") .attr("width", widthVal) .attr("height", 70) .attr("fill", "white") .attr("stroke", "grey") .attr("stroke-width", 3); tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "black") .text(settingStr); tgrp.append("text") .attr("x", 10) .attr("y", 40) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(numStr); tgrp.append("text") .attr("x", 10) .attr("y", 60) .attr("text-anchor", "left") .attr("font-family", "Andale Mono") .attr("font-size", "14px") .attr("fill", "black") .text(movieStr); }) .on("mouseout", function(d) { d3.select(this) .transition().duration(100) d3.select(".tooltip").remove(); });; svg.append("g") .attr("transform", "translate(600,-5)") .append(() => legend({color, title: "Film debut year", width: 340})); // zoom and pan const zoom = d3.zoom() .on("zoom", () => { g.attr("transform", d3.event.transform); g.selectAll("circle") .attr("d", path.projection(projection)); g.selectAll("path") .attr("d", path.projection(projection)); }); //svg.call(zoom) return svg.node(); }35:T1613,md ` ### Introduction While Disney has shown diversity through casting ethnic characters in animated movies since Aladdin (1992), accurate representation of that diversity has only more recently occurred. This brings up the question of diversity versus representation - while diversity is the literal presentation of minority characters on screen, representation is when those characters are presented as the norm, when those same minorities are also actual people directing, editing, voicing, researching, and funding the films, and when diverse authentic stories can be told non-stereotypically. In our data visualizations, we would like the viewer to explore Disney's history with diversity on and off screen and their recent surge in making more culturally diverse films, and come to their own conclusions into how diverse and representative Disney really is. ### Related Work There has been prior investigation into Disney’s history regarding diversity and inclusivity. Many have taken notice of this new surge in diversity within the last decade; several articles have cited films such as Big Hero 6 and Moana as trailblazers for bringing diverse characters to the forefront of mainstream media. At the same time, there have been several papers citing obvious misrepresentations of race and gender in Disney films and Hollywood in general. For example, there are papers citing statistics on the overwhelming amount of white male actors and directors there are in Hollywood compared to every other category. In addition, there is a paper showing the breakdown of the amount of dialogue male characters receive over female characters -- and the results show there are much more male dialogue dominant films. * [Disney Data Visualization: What Film Dialogue Can Teach Us About Intent Data](https://www.aberdeen.com/featured/blog-data-visualization-disney-intent/) * [Diversity in Hollywood: From Directors to Movies to Actors](http://www.catherinedong.com/pdfs/224w-paper.pdf) * [Diversity in Disney](https://universe.byu.edu/narratives/diversity-in-disney/) * [The Year Disney Started to Take Diversity Seriously](https://www.vanityfair.com/hollywood/2016/11/disney-films-inclusive) ### Methodology During our research into the topic, we realized that a dataset for this information did not exist, so we created one ourselves. To limit the scope of our project and prevent making more assumptions than necessary, we decided to analyze human characters from Disney animated movies, along with their voice actors and the movies themselves. After compiling the data, we used Tableau and rough D3 visualizations to find trends and patterns. Findings from our exploratory analysis influenced our decision to create final visualizations across a multitude of aspects: race, gender, time, money and location, to name a few. ### Design We chose a more exploratory approach for these data visualizations and thus provided features such as prominent color coding, hoverable text that shows more information on Disney movies, and groupings of information, such as between characters and actors and movies and profit, to help users make quicker connections. We originally attempted a more narrative style approach, where scrolling down the page would lead the user to the next big finding, but thought that allowing the user to come to their own conclusion would be more impactful rather than forced. ### Implementation Besides using a map and color legend for our final visualization “Movies on a Map,” all of our visualizations were coded from scratch using vanilla D3. We did not need to use any specific techniques for data loading or performance issues because we had a relatively small dataset and built it to suit our needs. ### Discussion Our visualization was very interesting and relatable to a lot of people. Diversity in Disney and in media has always been a relevant topic, but many people haven’t seen the actual statistics or the severity of this lack of representation. Our users liked how our visualization touched on multiple topics and enjoyed freely exploring individual films and how they contributed to Disney’s lasting reputation. Some were confused about the correlation between all of the visualizations; to fix the confusion, we added more guiding text in between each topic to strengthen our narrative. ### Future Work Continuing this project, we would be interested in extending beyond just the characters and actors. We have discussed that it would be very revealing to explore directors, employees of Disney, and anyone involved in the development of the films. Diversity starts behind the scenes, and it would be extremely disappointing if the people from those cultures are not the ones who are able to write and create their own stories. Gathering this data, we can look into how misrepresentation and the reinforcement of stereotypes stems from and see if Disney is taking steps to fix this. ### Acknowledgements A huge thank you to Professor Chang for teaching us everything that allowed us to create this final project, our TAs and guest critics for giving us helpful pointers on improving our work, and our classmates for the amazing semester. ### References * [Diversity vs. Representation - Why Hollywood still needs to learn](https://www.villainesse.com/girl-power/diversity-vs-representation-why-hollywood-still-needs-learn) * [The Disney Wiki](https://disney.fandom.com/wiki/The_Disney_Wiki) * [Walt Disney Movies Database](https://www.kaggle.com/dikshabhati2002/walt-disney-movies) * [Disney Animated Characters Wiki](https://en.wikipedia.org/wiki/List_of_Disney_animated_universe_characters) `36:[{"id":"6da7fd11efc11d3fe36941d6ee18355be1235b1b9bc3f2166d0c4667b65bba92e8bfcb8a92800e2ff45739737a46eff26f3fe405008fa349cf2f388ec158806e","href":"https://static.observableusercontent.com/files/6da7fd11efc11d3fe36941d6ee18355be1235b1b9bc3f2166d0c4667b65bba92e8bfcb8a92800e2ff45739737a46eff26f3fe405008fa349cf2f388ec158806e","name":"movies@2.csv","type":"text/csv","lastModified":1615827737242.111,"size":24535},{"id":"e7fe6a1cc341c5d437206211f542a5a8408054877ffd35270902afb37373f3fff99c438fec83443959541e46870f4490d8f9250c615a55b598e1a3edac4e4310","href":"https://static.observableusercontent.com/files/e7fe6a1cc341c5d437206211f542a5a8408054877ffd35270902afb37373f3fff99c438fec83443959541e46870f4490d8f9250c615a55b598e1a3edac4e4310","name":"characters.csv","type":"text/csv","lastModified":1615827737242.111,"size":31784}] 2f:{"id":"a35295a48e9f8147","slug":null,"title":"Diversity and Representation in Disney Animated Movies","thumbnail":"e3e574d64f3df09cfcc03ebf09fdbfe175096d26755705c9d124c4b622139511","access_level":"unlisted","create_time":"$D2021-03-22T04:21:48.177Z","update_time":"$D2021-04-19T06:18:01.744Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"493fa3c7a161e727","slug":"simple-map","title":"Simple World Map","owner":{"id":"6020c8e4b9455e45","login":"violet","name":"Chaeyoon Kim"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":1400,"publish_version":1400,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0d1e8ac23f83ad5","login":"cheriechu","name":"Cherie Chu","avatar_url":"https://avatars-next.observableusercontent.com/dce146584632a1280925052a4830b04a9ea279eaaad0e6e71c4ac546dbdb689f","tier":null}],"members":[{"type":"individual","id":"35c6b9542ad7f9fb","login":"bonniewang4399","name":"Bonnie Wang","avatar_url":"https://avatars-next.observableusercontent.com/add0ba2eecd926810357368047d1d3ea73a4d6ac0b9133b083cbc874d84a9189","tier":null,"role":"editor"},{"type":"individual","id":"a0d1e8ac23f83ad5","login":"cheriechu","name":"Cherie Chu","avatar_url":"https://avatars-next.observableusercontent.com/dce146584632a1280925052a4830b04a9ea279eaaad0e6e71c4ac546dbdb689f","tier":null,"role":"editor"},{"type":"individual","id":"f1ee5f837462ad6c","login":"karenlin","name":"Karen Lin","avatar_url":"https://avatars-next.observableusercontent.com/c1d1695584a0d26ee3e25728ab169808f48b4319fe1cd9dcbfe6936b97f262c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Diversity and Representation in Disney Animated Movies","cells":[{"id":0,"value":"md`# Diversity and Representation in Disney Animated Movies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"md `## Introduction\n\"Representation is what happens when people from different backgrounds are represented onscreen as the norm and not the token Other.\"\n\n\"Representation is when they are represented in the writing rooms, on set and in the boardrooms making the decisions and funding the projects.\"\n\n\"Representation allows for diverse authentic stories instead of relying on stereotypes and clichés.\"\n\n...\n\nWhile Disney has shown diversity through casting ethnic characters in animated movies since Aladdin (1992), accurate representation of that diversity has only more recently occurred through a decline in stereotype usage, more comprehensive research, and more diverse voices behind the animations themselves.\n\n\nIn the following data visualizations, we present an exploration into the Disney's history with diversity on and off screen and their recent surge in making more culturally diverse films. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`## Explore by Category`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof feature = dropdown();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## Identities Over Time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md ` \nThis chart plots movie characters at the time of their movie's release over time. The points are then color coded by the character's respective genders or ethnicities. Hovering over each point will display a description of each character and their respective movies.\n\nThe graph shows the surge in including more diverse characters in the recent decade. However upon closer inspection, most of the diverse cast comes from the same select few movies. For example, the surge in including Native Hawaiian or other Pacific Islander characters in 2016 were all from Moana (which also happens to be a cultural movie). Besides then, there were no other recent inclusions of Pacific Islander characters.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`## Budget vs. Box Office Sales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md `\nThis chart plots all movies based on their total budget and box office sales. The points are then color coded by either the gender or race of the main starring character in the movie. A breakeven line is also shown to separate the movies that have made a profit and to help determine the successfulness of each of the movies. When each of the points are hovered over, it displays a description of each movie.\n\nThe graph has a pretty even distribution, with some movies starring minority actors even performing better in some cases. This shows that these movies have been and will continue to be just as successful to their counterparts.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`## The Good, the Bad, and the Sidekicks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md `\nThis chart plots all movie characters based on their role of either Hero, Villain, or Supporting Character. Each character in the right side column is paired against the actor who plays them in the left side column and both are color coded by their respective race or gender. By placing these two columns side by side, one can see not only the general make up of racial and gender diversity in disney characters, but also if this diversity is reflected in the cast behind the animations as well.\n\nSome notes of interest is that very rarely are white characters played by non-white actors, but it is fairly common for ethnic characters to be played by white actors. Only in recent years is Disney providing representation behind the scenes just as equally as the diversity seen on screen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`## Movies on a Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md `\nThis chart plots all animated, human starring Disney movies on a map based on their onscreen location (ex: Mulan takes place in China). Each circle represents these movies, the size of the circle corresponds to how many movies were filmed with that world setting, and the intensity of the color of the circle corresponds to when the first movie in this location was released (the most recent movies are darkest in color)\n\nSome notes of interest include that most Disney movies take place in Europe or the United States, and the earliest Disney movies happened in Europe, Eastern United States, and India. Another interesting note is that only one movie is made in most other Disney locations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"md ` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"md`## Writeup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"movies = FileAttachment(\"movies@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"characters = FileAttachment(\"characters.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"color = {\n let col = new Map();\n col.set('Female', '#ffd1dc');\n col.set('Male', '#d1f3ff');\n col.set('Nonbinary or Other', '#9571d9');\n col.set('White', 'lightgrey');\n col.set('Asian', 'red');\n col.set('Black or African American', '#9571d9');\n col.set('Hispanic or Latino', 'green');\n col.set('Middle Eastern','blue');\n col.set('Native Hawaiian or Other Pacific Islander','#87cefa');\n col.set('American Indian or Alaska Native','orange');\n col.set('Two or More Races','yellow');\n col.set('Other','black');\n col.set('-','black');\n return col;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function dropdown() {\n let dd = html `