├── docs ├── SidebarLegend.png ├── FindingDory.csv ├── JungleBook.csv ├── index.html ├── Deadpool.csv ├── style.css ├── SecretLifeofPets.csv ├── CivilWar.csv ├── FantasticBeasts.csv ├── SuicideSquad.csv ├── Zootopia.csv ├── BatmanVSuperman.csv ├── RogueOne.csv └── movie_bubbles2.js └── README.md /docs/SidebarLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProQuestionAsker/2016MovieDialogue/HEAD/docs/SidebarLegend.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This repository contains all of the word-count data that I used to analyze gender equality in 2016's Highest Grossing Films. 2 | 3 | A .csv file exists for each film. Each file has the following columns: 4 | * Character: Character's Name 5 | * speaking_turns: The number of independent times a character spoke. This was calculated based on the number of individual times a character's name appeared in the transcript 6 | * Total_Words: Sum of the words spoken by a character during the duration of the entire film 7 | * Gender: Gender of each character (details for determining character's gender available [here](https://proquestionasker.github.io/projects/MovieDialogue/#assigning-gender-to-characters) 8 | * Radius: Necessary radius of a circle, scaled by area, based on the Total_Words spoken by a character 9 | * Diameter: Diameter of a circle, scaled by area, based on the Total_Words spoken by a character (this was used in Adobe Illustrator) 10 | 11 | Index.html, Styles.CSS, and movie_bubbles2.js were all used to generate the interactive visualization available [here](https://proquestionasker.github.io/projects/MovieDialogueInteractive/) 12 | 13 | In depth description of this project is available [here](https://proquestionasker.github.io/projects/MovieDialogue/#assigning-gender-to-characters) 14 | -------------------------------------------------------------------------------- /docs/FindingDory.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words" 2 | "1","Bailey","male",66,510 3 | "2","Bill","male",2,32 4 | "3","Bloat","male",1,2 5 | "4","Carol","female",2,19 6 | "5","Charlie","male",58,377 7 | "6","Crush","male",7,64 8 | "7","Deb","female",1,5 9 | "8","Destiny","female",84,497 10 | "9","Dory","female",399,4210 11 | "10","Female Aquarist","female",3,19 12 | "11","Female Aquarist 2","female",1,11 13 | "12","Female Blue Tang","female",4,29 14 | "13","Female Blue Tang 2","female",1,4 15 | "14","Female Crab","female",7,69 16 | "15","Female Driver","female",5,30 17 | "16","Female Educator","female",2,35 18 | "17","Female Fish","female",2,14 19 | "18","Female Fish 2","female",1,5 20 | "19","Female Otter Trainer","female",2,17 21 | "20","Female Worker","female",2,12 22 | "21","Female Yellow Fish","female",1,4 23 | "22","Fluke","male",34,262 24 | "23","Gerald","male",3,3 25 | "24","Giant Clam","male",6,95 26 | "25","Gil","male",4,36 27 | "26","Gurgle","male",1,6 28 | "27","Hank","male",119,1131 29 | "28","Jacques","male",1,1 30 | "29","Jenny","female",55,410 31 | "30","Kathy","female",5,31 32 | "31","Male Aquarist","male",1,4 33 | "32","Male Aquarist 2","male",2,10 34 | "33","Male Blue Tang","male",1,8 35 | "34","Male Blue Tang 2","male",2,28 36 | "35","Male Worker","male",2,21 37 | "36","Male Yellow Fish","male",1,3 38 | "37","Male Yellow Fish 2","male",1,1 39 | "38","Marlin","male",162,1612 40 | "39","Mr. Ray","male",23,211 41 | "40","Nemo","male",72,388 42 | "41","Peach","male",1,4 43 | "42","Rudder","male",25,123 44 | "43","Sea Cucumber","male",3,3 45 | "44","Sea Cucumber 2","male",1,4 46 | "45","Sick Fish","male",2,6 47 | "46","Sigourney Weaver","female",13,124 48 | "47","Squirt","male",2,15 49 | "48","Stan","male",18,82 50 | "49","Wife Fish","female",19,108 51 | "50","Woman 1","female",1,14 52 | -------------------------------------------------------------------------------- /docs/JungleBook.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Akela","male",14,133,11.5325625946708,23.0651251893416 3 | "2","Bagheera","male",77,909,30.1496268633627,60.2992537267253 4 | "3","Baloo","male",88,1737,41.6773319683494,83.3546639366988 5 | "4","Female Antelope","female",1,2,1.4142135623731,2.82842712474619 6 | "5","Female Wolf","female",2,11,3.3166247903554,6.6332495807108 7 | "6","Fred","male",5,17,4.12310562561766,8.24621125123532 8 | "7","Gray","female",16,92,9.59166304662544,19.1833260932509 9 | "8","Ikki","male",6,93,9.64365076099295,19.2873015219859 10 | "9","Kaa","female",8,210,14.4913767461894,28.9827534923789 11 | "10","King Louie","male",20,512,22.6274169979695,45.254833995939 12 | "11","Male Antelope","male",1,5,2.23606797749979,4.47213595499958 13 | "12","Male Hoofstock","male",1,6,2.44948974278318,4.89897948556636 14 | "13","Male Impala","male",1,5,2.23606797749979,4.47213595499958 15 | "14","Male Large Hoofstock","male",1,2,1.4142135623731,2.82842712474619 16 | "15","Male Mice","male",4,15,3.87298334620742,7.74596669241483 17 | "16","Male Pangolin","male",11,55,7.41619848709566,14.8323969741913 18 | "17","Male Rhino","male",2,8,2.82842712474619,5.65685424949238 19 | "18","Male Squirrel","male",9,49,7,14 20 | "19","Male Wolf","male",5,35,5.91607978309962,11.8321595661992 21 | "20","Male Wolf 1","male",2,6,2.44948974278318,4.89897948556636 22 | "21","Male Wolf 2","male",2,4,2,4 23 | "22","Male Wolf 3","male",1,2,1.4142135623731,2.82842712474619 24 | "23","Mowgli","male",134,1207,34.7419055320804,69.4838110641608 25 | "24","Peacock","male",4,19,4.35889894354067,8.71779788708135 26 | "25","Raksha","female",30,266,16.3095064303001,32.6190128606002 27 | "26","Rama","male",1,10,3.16227766016838,6.32455532033676 28 | "27","Shere Khan","male",23,552,23.4946802489415,46.9893604978829 29 | "28","Young Rhino","female",2,10,3.16227766016838,6.32455532033676 30 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 17 | 18 | 19 |
20 | 21 | 28 | 29 |
30 |
31 |
32 |

Created by Amber Thomas

33 |

Worldwide Movie Gross from The Numbers.

34 |

Word counts from movie transcripts. Process described here.

35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /docs/Deadpool.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Agent Smith","male",14,144,12,24 3 | "2","Ajax","male",48,945,30.7408522978788,61.4817045957576 4 | "3","Al","female",20,153,12.369316876853,24.738633753706 5 | "4","Angel","female",7,29,5.3851648071345,10.770329614269 6 | "5","Announcer","male",2,24,4.89897948556636,9.79795897113271 7 | "6","Another Guy","male",1,6,2.44948974278318,4.89897948556636 8 | "7","Apartment Owner","male",8,94,9.69535971483266,19.3907194296653 9 | "8","Bob","male",2,3,1.73205080756888,3.46410161513775 10 | "9","Boothe","male",3,9,3,6 11 | "10","Boss","male",1,13,3.60555127546399,7.21110255092798 12 | "11","Buck","male",6,22,4.69041575982343,9.38083151964686 13 | "12","Colossus","male",33,296,17.2046505340853,34.4093010681705 14 | "13","Cunningham","male",7,40,6.32455532033676,12.6491106406735 15 | "14","Deadpool","male",298,4692,68.4981751581748,136.99635031635 16 | "15","Doctor","male",2,40,6.32455532033676,12.6491106406735 17 | "16","Dopinder","male",24,188,13.7113092008021,27.4226184016042 18 | "17","Garbage Man","male",1,2,1.4142135623731,2.82842712474619 19 | "18","Gunmen Leader","male",1,2,1.4142135623731,2.82842712474619 20 | "19","Jeremy","male",9,56,7.48331477354788,14.9666295470958 21 | "20","Meghan","female",2,8,2.82842712474619,5.65685424949238 22 | "21","Negasonic","female",16,72,8.48528137423857,16.9705627484771 23 | "22","Reporter","female",1,42,6.48074069840786,12.9614813968157 24 | "23","Skee Ball Guy","male",1,18,4.24264068711928,8.48528137423857 25 | "24","Some Guy","male",1,5,2.23606797749979,4.47213595499958 26 | "25","Some Guys","male",1,6,2.44948974278318,4.89897948556636 27 | "26","Unknown Girl","female",1,8,2.82842712474619,5.65685424949238 28 | "27","Unknown Guy","male",3,11,3.3166247903554,6.6332495807108 29 | "28","Unknown Guy 2","male",1,4,2,4 30 | "29","Unknown Man","male",6,24,4.89897948556636,9.79795897113271 31 | "30","Unknown Woman","female",3,11,3.3166247903554,6.6332495807108 32 | "31","Unknown Woman 2","female",1,4,2,4 33 | "32","Unknown Woman 3","female",1,2,1.4142135623731,2.82842712474619 34 | "33","Vanessa","female",67,442,21.0237960416286,42.0475920832573 35 | "34","Weasel","male",62,731,27.0370116691915,54.0740233383831 36 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* minimal css reset */ 3 | html, body, div, h1, h2, h3, a, p, img, dl, dt, dd, ul, li { 4 | padding: 0; margin: 0; border: 0; outline: 0; 5 | } 6 | 7 | /* Fonts */ 8 | 9 | .titles svg text{ 10 | font-family: 'Quattrocento', serif; 11 | } 12 | 13 | .body svg text{ 14 | font-family: 'Quattrocento Sans', sans-serif; 15 | } 16 | 17 | .icons svg text { 18 | font-family: FontAwesome; 19 | } 20 | 21 | #wrapper { 22 | width: 900px; 23 | margin: 0 auto; 24 | } 25 | 26 | #sidebar { 27 | padding: 20px; 28 | float: left; 29 | position: fixed; 30 | width: 260px; 31 | height: 100%; 32 | background: #AAAAAA; 33 | } 34 | 35 | #sidebar h1 { 36 | font-family: 'Quattrocento', serif; 37 | color: #f1f1f1; 38 | margin-bottom: 10px; 39 | font-size: 22px; 40 | } 41 | 42 | #sidebar p { 43 | margin-bottom: 10px; 44 | font-family: 'Quattrocento Sans', sans-serif; 45 | color: #f1f1f1; 46 | font-size: 11pt; 47 | } 48 | 49 | #content{ 50 | float: right; 51 | width: 600px; 52 | min-height: 100%; 53 | background: #f1f1f1; 54 | } 55 | 56 | #legend { 57 | margin: 40px auto 0 auto; 58 | display: block 59 | } 60 | 61 | 62 | 63 | 64 | #credit { 65 | padding-bottom: 25px; 66 | padding-left: 20px; 67 | margin-top: 25px; 68 | } 69 | 70 | #credit p { 71 | margin-top: 0px; 72 | margin-bottom: 3px; 73 | } 74 | 75 | .credit-bold { 76 | font-family: 'Quattrocento', serif; 77 | font-size: 0.8em; 78 | } 79 | 80 | .credit-note { 81 | font-family: 'Quattrocento Sans', sans-serif; 82 | line-height: 140%; 83 | font-size: 0.6em; 84 | } 85 | 86 | 87 | @media screen and (max-width: 1790px) { 88 | #wrapper{width: 1500px;} 89 | #content{width: 1200px;} 90 | } 91 | 92 | @media screen and (max-width: 1490px) { 93 | #wrapper{width: 1200px;} 94 | #content{width: 900px;} 95 | } 96 | 97 | @media screen and (max-width: 1190px){ 98 | #wrapper{width: 900px;} 99 | #content{width: 600px;} 100 | } 101 | 102 | @media screen and (max-width: 890px) { 103 | #wrapper{width: 600px;} 104 | #content{width: 300px;} 105 | } 106 | 107 | @media screen and (max-width: 590px) { 108 | #wrapper{width: 300px;} 109 | #sidebar{float: none; position: inherit;} 110 | #content{float: none;} 111 | } 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /docs/SecretLifeofPets.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Buddy","male",26,169,13,26 3 | "2","Cat's Mom","female",1,2,1.4142135623731,2.82842712474619 4 | "3","Chloe","female",27,284,16.8522995463527,33.7045990927054 5 | "4","Chloe's Mom","female",1,7,2.64575131106459,5.29150262212918 6 | "5","Derick","male",4,16,4,8 7 | "6","Dogcatcher 1","male",8,47,6.85565460040104,13.7113092008021 8 | "7","Dogcatcher 2","male",8,41,6.40312423743285,12.8062484748657 9 | "8","Dragon","male",1,3,1.73205080756888,3.46410161513775 10 | "9","Duke","male",102,855,29.2403830344269,58.4807660688538 11 | "10","Female Corgi","female",1,4,2,4 12 | "11","Female Dog","female",1,2,1.4142135623731,2.82842712474619 13 | "12","Fernando","male",2,27,5.19615242270663,10.3923048454133 14 | "13","Fluffy Cat","male",3,36,6,12 15 | "14","Gidget","female",58,579,24.0624188310319,48.1248376620639 16 | "15","Gidget's Mom","female",1,6,2.44948974278318,4.89897948556636 17 | "16","Gino's Dad","male",1,3,1.73205080756888,3.46410161513775 18 | "17","Girl Dog Walker","female",2,6,2.44948974278318,4.89897948556636 19 | "18","Guillermo","male",4,21,4.58257569495584,9.16515138991168 20 | "19","Guy Playing Fetch","male",1,2,1.4142135623731,2.82842712474619 21 | "20","Katie","female",12,234,15.2970585407784,30.5941170815567 22 | "21","Leonard's Dad","male",2,15,3.87298334620742,7.74596669241483 23 | "22","Little Girl","female",4,30,5.47722557505166,10.9544511501033 24 | "23","Male Cat","male",1,2,1.4142135623731,2.82842712474619 25 | "24","Male Cat 2","male",2,5,2.23606797749979,4.47213595499958 26 | "25","Male Dog","male",1,4,2,4 27 | "26","Male Golden Retriever","male",1,5,2.23606797749979,4.47213595499958 28 | "27","Male Turtle","male",1,2,1.4142135623731,2.82842712474619 29 | "28","Man","male",1,2,1.4142135623731,2.82842712474619 30 | "29","Maria","female",3,15,3.87298334620742,7.74596669241483 31 | "30","Max","male",152,1659,40.7308237088326,81.4616474176652 32 | "31","Mel","male",25,201,14.1774468787578,28.3548937575157 33 | "32","Mel's Dad","male",1,3,1.73205080756888,3.46410161513775 34 | "33","Nitro","male",2,22,4.69041575982343,9.38083151964686 35 | "34","Norman","male",14,69,8.30662386291807,16.6132477258361 36 | "35","Ozone","male",11,124,11.13552872566,22.2710574513201 37 | "36","Peanut","male",3,11,3.3166247903554,6.6332495807108 38 | "37","Peppy's Dad","male",1,2,1.4142135623731,2.82842712474619 39 | "38","Pops","male",27,261,16.1554944214035,32.310988842807 40 | "39","Retractable Leash Dog","male",1,8,2.82842712474619,5.65685424949238 41 | "40","Runty's Dad","male",1,2,1.4142135623731,2.82842712474619 42 | "41","Seamonkey","male",1,10,3.16227766016838,6.32455532033676 43 | "42","Shelly's Mom","female",1,4,2,4 44 | "43","Snowball","male",55,1045,32.3264597504892,64.6529195009785 45 | "44","Sweetpea's Dad","male",1,2,1.4142135623731,2.82842712474619 46 | "45","Tattoo","male",6,49,7,14 47 | "46","Taxi Driver","male",1,1,1,2 48 | "47","Tiberius","male",27,275,16.583123951777,33.166247903554 49 | "48","Woman","female",2,5,2.23606797749979,4.47213595499958 50 | -------------------------------------------------------------------------------- /docs/CivilWar.csv: -------------------------------------------------------------------------------- 1 | "","Character","speaking_turns","Total_Words","Gender","radius","diameter" 2 | "1","Agent",1,16,"male",4,8 3 | "2","Aunt May",8,51,"female",7.14142842854285,14.2828568570857 4 | "3","Bad Guy #1",2,15,"male",3.87298334620742,7.74596669241483 5 | "4","Bad Guy #2",1,3,"male",1.73205080756888,3.46410161513775 6 | "5","Bodyguard",1,6,"female",2.44948974278318,4.89897948556636 7 | "6","Bucky",47,340,"male",18.4390889145858,36.8781778291715 8 | "7","Clint",26,274,"male",16.5529453572468,33.1058907144937 9 | "8","Cop",2,12,"male",3.46410161513775,6.92820323027551 10 | "9","Delivery",1,1,"male",1,2 11 | "10","Delivery Man",2,6,"male",2.44948974278318,4.89897948556636 12 | "11","Everett Ross",6,127,"male",11.2694276695846,22.5388553391693 13 | "12","Friday",17,153,"female",12.369316876853,24.738633753706 14 | "13","Front Desk Woman",1,9,"female",3,6 15 | "14","Guard",1,13,"male",3.60555127546399,7.21110255092798 16 | "15","Guy on PA system",1,10,"male",3.16227766016838,6.32455532033676 17 | "16","Howard",6,66,"male",8.12403840463596,16.2480768092719 18 | "17","LAGOS",1,2,"male",1.4142135623731,2.82842712474619 19 | "18","Mailman",1,4,"male",2,4 20 | "19","Man",3,6,"male",2.44948974278318,4.89897948556636 21 | "20","Maria",5,83,"female",9.1104335791443,18.2208671582886 22 | "21","MESSAGE INBOX",1,2,"male",1.4142135623731,2.82842712474619 23 | "22","Miriam",4,114,"female",10.6770782520313,21.3541565040626 24 | "23","Natasha",64,551,"female",23.473389188611,46.946778377222 25 | "24","Other Winter Soldier",1,2,"male",1.4142135623731,2.82842712474619 26 | "25","Peter",66,671,"male",25.9036676939772,51.8073353879545 27 | "26","Preacher",1,17,"male",4.12310562561766,8.24621125123532 28 | "27","Receptionist",2,11,"female",3.3166247903554,6.6332495807108 29 | "28","Reporter",7,159,"male",12.6095202129185,25.219040425837 30 | "29","Rhodey",22,274,"male",16.5529453572468,33.1058907144937 31 | "30","Room Service Lady",5,49,"female",7,14 32 | "31","Rumlow",8,125,"male",11.1803398874989,22.3606797749979 33 | "32","Sam",63,489,"male",22.113344387496,44.226688774992 34 | "33","Scott",23,244,"male",15.6204993518133,31.2409987036266 35 | "34","Secretary Ross",17,353,"male",18.7882942280559,37.5765884561119 36 | "35","Sharon",22,359,"female",18.9472953214964,37.8945906429928 37 | "36","Steve",154,1404,"male",37.4699879903904,74.9399759807808 38 | "37","T'Chaka",8,174,"male",13.1909059582729,26.3818119165458 39 | "38","T'Challa",28,294,"male",17.1464281994822,34.2928563989645 40 | "39","Teacher Man",3,62,"male",7.87400787401181,15.7480157480236 41 | "40","Text Message",1,5,"male",2.23606797749979,4.47213595499958 42 | "41","Tony",162,2267,"male",47.6130234284697,95.2260468569393 43 | "42","Vasily Karpov",10,56,"male",7.48331477354788,14.9666295470958 44 | "43","Vision",27,347,"male",18.6279360101972,37.2558720203943 45 | "44","Wanda",31,200,"female",14.142135623731,28.2842712474619 46 | "45","Woman",1,23,"female",4.79583152331272,9.59166304662544 47 | "46","Zemo",31,587,"male",24.2280828791714,48.4561657583429 48 | "47","Zemo's Wife",2,47,"female",6.85565460040104,13.7113092008021 49 | -------------------------------------------------------------------------------- /docs/FantasticBeasts.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Abernathy","male",7,56,7.48331477354788,14.9666295470958 3 | "2","Auror 1","male",1,2,1.4142135623731,2.82842712474619 4 | "3","Auror 2","male",1,1,1,2 5 | "4","Awards Announcer","male",1,42,6.48074069840786,12.9614813968157 6 | "5","Bank Employee","male",1,5,2.23606797749979,4.47213595499958 7 | "6","Barker","male",2,16,4,8 8 | "7","Bartender","male",3,12,3.46410161513775,6.92820323027551 9 | "8","Bernadette","female",2,12,3.46410161513775,6.92820323027551 10 | "9","Bingley","male",8,57,7.54983443527075,15.0996688705415 11 | "10","Bingley's Assistant","female",1,8,2.82842712474619,5.65685424949238 12 | "11","Boy","male",1,6,2.44948974278318,4.89897948556636 13 | "12","Chastity Barebone","female",2,17,4.12310562561766,8.24621125123532 14 | "13","Credence Barebone","male",16,121,11,22 15 | "14","Customs Agent","male",6,23,4.79583152331272,9.59166304662544 16 | "15","Executioner 1","female",1,9,3,6 17 | "16","Gnarlak","male",8,110,10.4880884817015,20.976176963403 18 | "17","Grindelwald","male",2,13,3.60555127546399,7.21110255092798 19 | "18","Heinrich Eberstadt","male",1,18,4.24264068711928,8.48528137423857 20 | "19","Henry Shaw Jr.","male",5,74,8.60232526704263,17.2046505340853 21 | "20","Henry Shaw Sr.","male",9,87,9.32737905308882,18.6547581061776 22 | "21","Jacob Kowalski","male",91,737,27.1477439209965,54.2954878419929 23 | "22","Langdon Shaw","male",11,139,11.7898261225516,23.5796522451032 24 | "23","Madam Ya Zhou","female",1,10,3.16227766016838,6.32455532033676 25 | "24","Man","male",1,2,1.4142135623731,2.82842712474619 26 | "25","Man 2","male",1,2,1.4142135623731,2.82842712474619 27 | "26","Man from Apartment","male",1,15,3.87298334620742,7.74596669241483 28 | "27","Mary Lou Barebone","female",16,213,14.5945195193264,29.1890390386528 29 | "28","Minister","male",3,22,4.69041575982343,9.38083151964686 30 | "29","Modesty Barebone","female",6,115,10.7238052947636,21.4476105895272 31 | "30","Momolou Wotorson","male",1,5,2.23606797749979,4.47213595499958 32 | "31","Mrs. Esposito","female",2,6,2.44948974278318,4.89897948556636 33 | "32","Mrs. Goldstein","female",2,10,3.16227766016838,6.32455532033676 34 | "33","Newt Scamander","male",175,2037,45.133136385587,90.2662727711741 35 | "34","Percival Graves","male",42,673,25.9422435421457,51.8844870842914 36 | "35","Police Officer","male",2,17,4.12310562561766,8.24621125123532 37 | "36","Police Officer 2","male",1,2,1.4142135623731,2.82842712474619 38 | "37","Police Officer 3","male",1,5,2.23606797749979,4.47213595499958 39 | "38","Queenie Goldstein","female",43,403,20.0748598998847,40.1497197997695 40 | "39","Red","male",2,6,2.44948974278318,4.89897948556636 41 | "40","Reporter","male",3,12,3.46410161513775,6.92820323027551 42 | "41","Reporter 2","male",3,22,4.69041575982343,9.38083151964686 43 | "42","Sam","male",3,7,2.64575131106459,5.29150262212918 44 | "43","Seraphina Picquery","female",21,303,17.4068951855292,34.8137903710584 45 | "44","Shopping Woman","female",1,9,3,6 46 | "45","Tina Goldstein","female",106,930,30.4959013639538,60.9918027279076 47 | "46","Witness","male",2,48,6.92820323027551,13.856406460551 48 | "47","Woman","female",1,3,1.73205080756888,3.46410161513775 49 | "48","Woman 2","female",1,1,1,2 50 | "49","Woman from Apartment","female",1,19,4.35889894354067,8.71779788708135 51 | -------------------------------------------------------------------------------- /docs/SuicideSquad.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Admiral Olsen","male",2,17,4.12310562561766,8.24621125123532 3 | "2","Ames","male",1,8,2.82842712474619,5.65685424949238 4 | "3","Angelo","male",6,47,6.85565460040104,13.7113092008021 5 | "4","Batman","male",6,54,7.34846922834953,14.6969384566991 6 | "5","Bodyguard","male",1,5,2.23606797749979,4.47213595499958 7 | "6","Bodyguard 2","female",1,2,1.4142135623731,2.82842712474619 8 | "7","Bride","female",1,8,2.82842712474619,5.65685424949238 9 | "8","Businessman","male",1,11,3.3166247903554,6.6332495807108 10 | "9","Captain Boomerang","male",30,326,18.0554700852678,36.1109401705356 11 | "10","Casino Boss","male",1,23,4.79583152331272,9.59166304662544 12 | "11","Dexter Tolliver","male",15,241,15.52417469626,31.04834939252 13 | "12","Diablo","male",31,374,19.3390796058137,38.6781592116274 14 | "13","Diablo's Wife","female",4,29,5.3851648071345,10.770329614269 15 | "14","Dispatcher","female",1,6,2.44948974278318,4.89897948556636 16 | "15","Enchantress","female",23,265,16.2788205960997,32.5576411921994 17 | "16","Female Assistant","female",3,23,4.79583152331272,9.59166304662544 18 | "17","Flag","male",118,1218,34.8998567332303,69.7997134664606 19 | "18","Flash","male",1,5,2.23606797749979,4.47213595499958 20 | "19","Floyd","male",127,1432,37.841775856849,75.683551713698 21 | "20","General","male",7,60,7.74596669241483,15.4919333848297 22 | "21","General 2","male",1,9,3,6 23 | "22","Griggs","male",36,500,22.3606797749979,44.7213595499958 24 | "23","Guard 2","male",2,18,4.24264068711928,8.48528137423857 25 | "24","Guard 3","male",1,7,2.64575131106459,5.29150262212918 26 | "25","Guard 4","male",1,5,2.23606797749979,4.47213595499958 27 | "26","Guard at Gate","male",1,12,3.46410161513775,6.92820323027551 28 | "27","Harley","female",87,602,24.5356882927706,49.0713765855412 29 | "28","Incubus","male",6,23,4.79583152331272,9.59166304662544 30 | "29","Joker","male",32,258,16.062378404209,32.124756808418 31 | "30","Jonny Frost","male",6,76,8.71779788708135,17.4355957741627 32 | "31","June","female",12,83,9.1104335791443,18.2208671582886 33 | "32","Katana","female",6,38,6.16441400296898,12.328828005938 34 | "33","Killer Croc","male",9,42,6.48074069840786,12.9614813968157 35 | "34","Mafia Guy","male",1,5,2.23606797749979,4.47213595499958 36 | "35","Male Dispatch","male",1,8,2.82842712474619,5.65685424949238 37 | "36","Man in Flashback","male",2,7,2.64575131106459,5.29150262212918 38 | "37","Medic's Wife","female",1,13,3.60555127546399,7.21110255092798 39 | "38","Medical Officer","male",5,15,3.87298334620742,7.74596669241483 40 | "39","Medical Officer 2","female",2,5,2.23606797749979,4.47213595499958 41 | "40","Medical Officer 3","male",1,2,1.4142135623731,2.82842712474619 42 | "41","Military Extra","male",2,18,4.24264068711928,8.48528137423857 43 | "42","Military on Radio","male",2,18,4.24264068711928,8.48528137423857 44 | "43","Military Personnel","male",3,13,3.60555127546399,7.21110255092798 45 | "44","Monster T","male",6,53,7.28010988928052,14.560219778561 46 | "45","Nurse","female",2,12,3.46410161513775,6.92820323027551 47 | "46","Physician","male",2,7,2.64575131106459,5.29150262212918 48 | "47","Pilot","male",1,16,4,8 49 | "48","Police Officer","male",1,19,4.35889894354067,8.71779788708135 50 | "49","Police Officer 2","male",1,11,3.3166247903554,6.6332495807108 51 | "50","SEAL","male",1,5,2.23606797749979,4.47213595499958 52 | "51","Seal 1","male",5,24,4.89897948556636,9.79795897113271 53 | "52","Seal 2","male",1,7,2.64575131106459,5.29150262212918 54 | "53","Seal 3","male",1,2,1.4142135623731,2.82842712474619 55 | "54","Seal 4","male",1,2,1.4142135623731,2.82842712474619 56 | "55","Seals","male",1,3,1.73205080756888,3.46410161513775 57 | "56","Slipknot","male",4,12,3.46410161513775,6.92820323027551 58 | "57","Soldier on Radio","male",4,15,3.87298334620742,7.74596669241483 59 | "58","Unknown Assistant","male",1,2,1.4142135623731,2.82842712474619 60 | "59","Unknown Man","male",1,13,3.60555127546399,7.21110255092798 61 | "60","Unknown Men","male",1,9,3,6 62 | "61","Unknown soldier","male",3,3,1.73205080756888,3.46410161513775 63 | "62","Unknown Soldier","male",3,44,6.6332495807108,13.2664991614216 64 | "63","Van Driver","male",2,30,5.47722557505166,10.9544511501033 65 | "64","Waller","female",79,1210,34.7850542618522,69.5701085237043 66 | "65","Zoe","female",12,131,11.4455231422596,22.8910462845192 67 | -------------------------------------------------------------------------------- /docs/Zootopia.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Action Gnus 5 Beaver","male",1,10,3.16227766016838,6.32455532033676 3 | "2","Announcer","male",1,3,1.73205080756888,3.46410161513775 4 | "3","Beaver reporter 2","male",3,18,4.24264068711928,8.48528137423857 5 | "4","Benjamin Clawhauser","male",25,312,17.6635217326557,35.3270434653114 6 | "5","Bonnie Hopps","female",35,255,15.9687194226713,31.9374388453426 7 | "6","Bucky Oryx-Antlerson","male",4,25,5,10 8 | "7","Chief Bogo","male",48,547,23.388031127053,46.776062254106 9 | "8","Cotton","female",1,7,2.64575131106459,5.29150262212918 10 | "9","Dawn Bellwether","female",38,532,23.0651251893416,46.1302503786832 11 | "10","Dharma Armadillo","female",1,20,4.47213595499958,8.94427190999916 12 | "11","Doug","male",6,90,9.48683298050514,18.9736659610103 13 | "12","Dr. Madge Honey Badger","female",5,51,7.14142842854285,14.2828568570857 14 | "13","Duke Weaselton","male",11,158,12.5698050899765,25.1396101799531 15 | "14","Elephant Lady","female",1,5,2.23606797749979,4.47213595499958 16 | "15","Fabienne Growley","female",3,83,9.1104335791443,18.2208671582886 17 | "16","Female Leopard","female",1,4,2,4 18 | "17","Female offscreen reporter 1","female",1,6,2.44948974278318,4.89897948556636 19 | "18","Female offscreen reporter 2","female",1,5,2.23606797749979,4.47213595499958 20 | "19","Female offscreen reporter 3","female",1,8,2.82842712474619,5.65685424949238 21 | "20","Finnick","male",3,37,6.08276253029822,12.1655250605964 22 | "21","Flash Slothmore","male",28,61,7.81024967590665,15.6204993518133 23 | "22","Frantic Pig","male",3,33,5.74456264653803,11.4891252930761 24 | "23","Fru Fru","female",7,53,7.28010988928052,14.560219778561 25 | "24","Gareth","male",2,6,2.44948974278318,4.89897948556636 26 | "25","Gary","male",1,4,2,4 27 | "26","Gazelle","female",10,129,11.3578166916005,22.7156333832011 28 | "27","Gideon Grey","male",13,223,14.9331845230681,29.8663690461362 29 | "28","Hippo Girl","female",1,8,2.82842712474619,5.65685424949238 30 | "29","Hopps sibling","unknown",1,2,1.4142135623731,2.82842712474619 31 | "30","Jaguar","male",1,21,4.58257569495584,9.16515138991168 32 | "31","Jerry Jumbeaux Jr.","male",6,87,9.32737905308882,18.6547581061776 33 | "32","Jesse","male",2,17,4.12310562561766,8.24621125123532 34 | "33","Judy Hopps","female",303,3114,55.8032257132148,111.60645142643 35 | "34","Junior Ranger Scout 2","male",1,4,2,4 36 | "35","Larry","male",1,8,2.82842712474619,5.65685424949238 37 | "36","Leodore Lionheart","male",17,230,15.1657508881031,30.3315017762062 38 | "37","Major Friedkin","female",7,79,8.88819441731559,17.7763888346312 39 | "38","Male offscreen reporter 1","male",1,6,2.44948974278318,4.89897948556636 40 | "39","Male offscreen reporter 3","male",1,7,2.64575131106459,5.29150262212918 41 | "40","Moose","male",1,5,2.23606797749979,4.47213595499958 42 | "41","Mother rabbit","female",1,3,1.73205080756888,3.46410161513775 43 | "42","Mouse","female",1,6,2.44948974278318,4.89897948556636 44 | "43","Mouse Foreman","male",1,4,2,4 45 | "44","Mr. Big","male",14,257,16.0312195418814,32.0624390837628 46 | "45","Mrs. Otterton","female",8,84,9.16515138991168,18.3303027798234 47 | "46","Muzzled Wolf","male",1,7,2.64575131106459,5.29150262212918 48 | "47","Nangi","female",5,11,3.3166247903554,6.6332495807108 49 | "48","Nick Wilde","male",155,2303,47.9895822028073,95.9791644056146 50 | "49","Officer Francine","female",1,3,1.73205080756888,3.46410161513775 51 | "50","Officer Higgins","male",1,1,1,2 52 | "51","Officer McHorn","male",2,16,4,8 53 | "52","Offscreen character","male",1,8,2.82842712474619,5.65685424949238 54 | "53","Offscreen officer","male",1,1,1,2 55 | "54","Oryx reporter","female",1,9,3,6 56 | "55","Peter Moosebridge","male",2,32,5.65685424949238,11.3137084989848 57 | "56","Pig reporter","male",1,5,2.23606797749979,4.47213595499958 58 | "57","Priscilla Tripletoe","female",1,2,1.4142135623731,2.82842712474619 59 | "58","Pronk Oryx-Antlerson","male",5,26,5.09901951359278,10.1980390271856 60 | "59","Rabbit reporter","female",1,7,2.64575131106459,5.29150262212918 61 | "60","Rabbit Reporter","unknown",1,6,2.44948974278318,4.89897948556636 62 | "61","Renato Manchas","male",4,39,6.2449979983984,12.4899959967968 63 | "62","Sharla","female",5,40,6.32455532033676,12.6491106406735 64 | "63","Stu Hopps","male",43,427,20.6639783197718,41.3279566395437 65 | "64","Travis","male",2,16,4,8 66 | "65","Woodchuck Boy","male",5,38,6.16441400296898,12.328828005938 67 | "66","Woolter","male",3,14,3.74165738677394,7.48331477354788 68 | "67","Yax","male",14,223,14.9331845230681,29.8663690461362 69 | -------------------------------------------------------------------------------- /docs/BatmanVSuperman.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Alfred","male",30,438,20.9284495364563,41.8568990729127 3 | "2","Amajagh's Assistant 2","male",1,4,2,4 4 | "3","Anatoli Knyazev","male",8,60,7.74596669241483,15.4919333848297 5 | "4","Anderson Cooper","male",3,127,11.2694276695846,22.5388553391693 6 | "5","Andrew Sullivan","male",1,21,4.58257569495584,9.16515138991168 7 | "6","Announcer","male",2,14,3.74165738677394,7.48331477354788 8 | "7","Bruce Wayne (Batman)","male",81,1089,33,66 9 | "8","Captive Woman","female",3,11,3.3166247903554,6.6332495807108 10 | "9","Cesar","male",1,18,4.24264068711928,8.48528137423857 11 | "10","Chairman of Joint Chiefs","male",1,7,2.64575131106459,5.29150262212918 12 | "11","Charlie Rose","male",3,60,7.74596669241483,15.4919333848297 13 | "12","Clark Kent (Superman)","male",46,453,21.2837966537928,42.5675933075855 14 | "13","Cop","male",1,21,4.58257569495584,9.16515138991168 15 | "14","Courtroom Assistant","male",1,8,2.82842712474619,5.65685424949238 16 | "15","Daily Planet Worker","male",1,7,2.64575131106459,5.29150262212918 17 | "16","Dana Bash","female",2,62,7.87400787401181,15.7480157480236 18 | "17","Diana Prince (Wonder Woman)","female",16,179,13.3790881602597,26.7581763205193 19 | "18","Dr. Silas Stone","male",1,31,5.56776436283002,11.13552872566 20 | "19","Emmet","male",1,45,6.70820393249937,13.4164078649987 21 | "20","Erika Erickson","female",2,73,8.54400374531753,17.0880074906351 22 | "21","Finch's Assistant","female",1,4,2,4 23 | "22","Flash","male",1,43,6.557438524302,13.114877048604 24 | "23","Flight Attendant","female",2,6,2.44948974278318,4.89897948556636 25 | "24","General","male",2,21,4.58257569495584,9.16515138991168 26 | "25","General Amajagh","male",5,66,8.12403840463596,16.2480768092719 27 | "26","Glen Woodburn","male",1,21,4.58257569495584,9.16515138991168 28 | "27","Governor","male",1,6,2.44948974278318,4.89897948556636 29 | "28","Greg","male",3,33,5.74456264653803,11.4891252930761 30 | "29","Guard","male",1,27,5.19615242270663,10.3923048454133 31 | "30","Helpers","male",1,4,2,4 32 | "31","Jack","male",4,39,6.2449979983984,12.4899959967968 33 | "32","James","male",2,17,4.12310562561766,8.24621125123532 34 | "33","Jenny","female",10,79,8.88819441731559,17.7763888346312 35 | "34","Jonathan Kent","male",2,151,12.2882057274445,24.576411454889 36 | "35","Kahina","female",2,52,7.21110255092798,14.422205101856 37 | "36","Knyazev's Man 1","male",1,3,1.73205080756888,3.46410161513775 38 | "37","Knyazev's Man 2","male",1,2,1.4142135623731,2.82842712474619 39 | "38","Kryptonian Ship","female",11,121,11,22 40 | "39","Leblanc","female",1,11,3.3166247903554,6.6332495807108 41 | "40","Lex Luthor","male",54,1480,38.4707681233427,76.9415362466854 42 | "41","Lois Lane","female",48,397,19.9248588451713,39.8497176903426 43 | "42","Major Farris","female",1,1,1,2 44 | "43","Man 3","male",2,8,2.82842712474619,5.65685424949238 45 | "44","Man 4","male",1,5,2.23606797749979,4.47213595499958 46 | "45","Man in Car","male",1,4,2,4 47 | "46","Man in Car 2","male",1,1,1,2 48 | "47","Man on TV","male",1,11,3.3166247903554,6.6332495807108 49 | "48","Martha Kent","female",3,79,8.88819441731559,17.7763888346312 50 | "49","Mercy Graves","female",4,14,3.74165738677394,7.48331477354788 51 | "50","Military 2","male",2,6,2.44948974278318,4.89897948556636 52 | "51","Military 3","male",1,3,1.73205080756888,3.46410161513775 53 | "52","Military Man","male",1,6,2.44948974278318,4.89897948556636 54 | "53","Military Man 2","male",1,5,2.23606797749979,4.47213595499958 55 | "54","Military Personnel","female",4,20,4.47213595499958,8.94427190999916 56 | "55","Mr. Wayne","male",2,2,1.4142135623731,2.82842712474619 57 | "56","Nancy Grace","female",1,37,6.08276253029822,12.1655250605964 58 | "57","Neil deGrasse Tyson","male",1,86,9.2736184954957,18.5472369909914 59 | "58","Newscaster","male",1,80,8.94427190999916,17.8885438199983 60 | "59","Officer","male",2,14,3.74165738677394,7.48331477354788 61 | "60","Officer 2","male",2,22,4.69041575982343,9.38083151964686 62 | "61","Officer 3","male",1,6,2.44948974278318,4.89897948556636 63 | "62","Officer 4","male",1,6,2.44948974278318,4.89897948556636 64 | "63","Officer Rucka","male",3,22,4.69041575982343,9.38083151964686 65 | "64","Operator","male",1,15,3.87298334620742,7.74596669241483 66 | "65","Perry White","male",21,259,16.0934769394311,32.1869538788622 67 | "66","Photographer","male",2,8,2.82842712474619,5.65685424949238 68 | "67","Pilot","male",1,4,2,4 69 | "68","Player","male",1,3,1.73205080756888,3.46410161513775 70 | "69","President","male",5,22,4.69041575982343,9.38083151964686 71 | "70","Reporter 2","male",3,57,7.54983443527075,15.0996688705415 72 | "71","Reporter 3","male",1,15,3.87298334620742,7.74596669241483 73 | "72","Reporter 4","female",2,17,4.12310562561766,8.24621125123532 74 | "73","Reporter 5","female",2,46,6.78232998312527,13.5646599662505 75 | "74","Secretary Swanwick","male",18,175,13.228756555323,26.4575131106459 76 | "75","Senator","male",5,31,5.56776436283002,11.13552872566 77 | "76","Senator Finch","female",15,302,17.3781471969828,34.7562943939655 78 | "77","Signals Officer","male",1,3,1.73205080756888,3.46410161513775 79 | "78","Soledad O'Brien","female",2,72,8.48528137423857,16.9705627484771 80 | "79","Vikram Gandhi","male",2,108,10.3923048454133,20.7846096908265 81 | "80","Wallace","male",10,108,10.3923048454133,20.7846096908265 82 | "81","Woman","male",1,5,2.23606797749979,4.47213595499958 83 | "82","Woman 2","male",1,5,2.23606797749979,4.47213595499958 84 | -------------------------------------------------------------------------------- /docs/RogueOne.csv: -------------------------------------------------------------------------------- 1 | "","Character","Gender","speaking_turns","Total_Words","radius","diameter" 2 | "1","Admiral Raddus","male",13,128,11.3137084989848,22.6274169979695 3 | "2","Announcer","male",3,46,6.78232998312527,13.5646599662505 4 | "3","Antenna Computer","female",3,19,4.35889894354067,8.71779788708135 5 | "4","Bail Organa","male",5,83,9.1104335791443,18.2208671582886 6 | "5","Baze Malbus","male",32,168,12.9614813968157,25.9229627936314 7 | "6","Blue Squadron 1","male",2,5,2.23606797749979,4.47213595499958 8 | "7","Blue Squadron 2","male",1,3,1.73205080756888,3.46410161513775 9 | "8","Blue Squadron 3","male",1,4,2,4 10 | "9","Blue Squadron 4","male",1,6,2.44948974278318,4.89897948556636 11 | "10","Bodhi Rook","male",60,820,28.6356421265527,57.2712842531054 12 | "11","C3PO","male",1,13,3.60555127546399,7.21110255092798 13 | "12","Captain Antilles","male",1,1,1,2 14 | "13","Cassian","male",140,1355,36.8103246386119,73.6206492772238 15 | "14","Chirrut Imwe","male",36,420,20.4939015319192,40.9878030638384 16 | "15","Corvette 5","male",1,12,3.46410161513775,6.92820323027551 17 | "16","Dr. Cornelius Evazan","male",1,5,2.23606797749979,4.47213595499958 18 | "17","Edrio","male",4,25,5,10 19 | "18","Engineers","male",2,5,2.23606797749979,4.47213595499958 20 | "19","Flight Control","male",3,42,6.48074069840786,12.9614813968157 21 | "20","Galen","male",21,520,22.8035085019828,45.6070170039655 22 | "21","Gate Control","male",5,40,6.32455532033676,12.6491106406735 23 | "22","General Dodonna","male",1,4,2,4 24 | "23","General Draven","male",11,206,14.3527000944073,28.7054001888146 25 | "24","General Merrick","male",5,53,7.28010988928052,14.560219778561 26 | "25","General Ramda","male",7,43,6.557438524302,13.114877048604 27 | "26","Girl's Mother","female",1,2,1.4142135623731,2.82842712474619 28 | "27","Gold Leader","male",3,33,5.74456264653803,11.4891252930761 29 | "28","Governor Tarkin","male",16,284,16.8522995463527,33.7045990927054 30 | "29","Imperial Assistant","male",1,17,4.12310562561766,8.24621125123532 31 | "30","Imperial Assistant 2","male",6,27,5.19615242270663,10.3923048454133 32 | "31","Imperial Assistant 3","male",2,18,4.24264068711928,8.48528137423857 33 | "32","Imperial Controller","male",1,4,2,4 34 | "33","Imperial Mission Control","male",2,16,4,8 35 | "34","Imperial Mission Control 2","male",2,21,4.58257569495584,9.16515138991168 36 | "35","Imperial Officer","male",4,13,3.60555127546399,7.21110255092798 37 | "36","Imperial Officer 2","male",1,4,2,4 38 | "37","Imperial Officer 3","male",1,5,2.23606797749979,4.47213595499958 39 | "38","Imperial Pilot","male",2,6,2.44948974278318,4.89897948556636 40 | "39","Imperial Pilot 2","male",1,5,2.23606797749979,4.47213595499958 41 | "40","Imperial Soldiers","male",1,1,1,2 42 | "41","Inspector","male",2,5,2.23606797749979,4.47213595499958 43 | "42","Jyn","female",114,1045,32.3264597504892,64.6529195009785 44 | "43","K2SO","male",70,612,24.738633753706,49.4772675074119 45 | "44","Krennic","male",52,504,22.4499443206436,44.8998886412873 46 | "45","Leia","female",1,1,1,2 47 | "46","Lieutenant Sefla","male",7,46,6.78232998312527,13.5646599662505 48 | "47","Lyra","female",8,34,5.8309518948453,11.6619037896906 49 | "48","Mon Mothma","female",13,169,13,26 50 | "49","Pad 12","male",2,20,4.47213595499958,8.94427190999916 51 | "50","Prisoner","male",1,4,2,4 52 | "51","Rebel Announcer","male",1,42,6.48074069840786,12.9614813968157 53 | "52","Rebel Army","male",7,27,5.19615242270663,10.3923048454133 54 | "53","Rebel Fighter","male",1,9,3,6 55 | "54","Rebel Officer","male",6,44,6.6332495807108,13.2664991614216 56 | "55","Rebel Officer 2","male",1,4,2,4 57 | "56","Rebel Pilot","male",2,5,2.23606797749979,4.47213595499958 58 | "57","Rebel Pilot (Female)","female",2,13,3.60555127546399,7.21110255092798 59 | "58","Rebel Pilot (Female) 2","female",2,8,2.82842712474619,5.65685424949238 60 | "59","Rebel Pilot (Female) 3","female",1,8,2.82842712474619,5.65685424949238 61 | "60","Rebel Pilot 2","male",1,7,2.64575131106459,5.29150262212918 62 | "61","Rebel Pilot 3","male",1,6,2.44948974278318,4.89897948556636 63 | "62","Rebel Pilot 4","male",1,3,1.73205080756888,3.46410161513775 64 | "63","Rebel Pilot 5","male",1,3,1.73205080756888,3.46410161513775 65 | "64","Rebel Soldier","male",1,6,2.44948974278318,4.89897948556636 66 | "65","Rebel Soldier 1","male",2,4,2,4 67 | "66","Rebel Soldier 10","male",1,23,4.79583152331272,9.59166304662544 68 | "67","Rebel Soldier 2","male",6,65,8.06225774829855,16.1245154965971 69 | "68","Rebel Soldier 3","male",1,2,1.4142135623731,2.82842712474619 70 | "69","Rebel Soldier 4","male",1,2,1.4142135623731,2.82842712474619 71 | "70","Rebel Soldier 5","male",1,2,1.4142135623731,2.82842712474619 72 | "71","Rebel Soldier 6","male",4,19,4.35889894354067,8.71779788708135 73 | "72","Rebel Soldier 7","male",3,7,2.64575131106459,5.29150262212918 74 | "73","Rebel Soldier 8","male",1,2,1.4142135623731,2.82842712474619 75 | "74","Rebel Soldier 9","male",1,1,1,2 76 | "75","Red 5","male",1,16,4,8 77 | "76","Red Leader","male",3,20,4.47213595499958,8.94427190999916 78 | "77","Saw Gerrera","male",24,238,15.4272486205415,30.854497241083 79 | "78","Senator Jebel","male",4,44,6.6332495807108,13.2664991614216 80 | "79","Senator Pamlo","female",4,46,6.78232998312527,13.5646599662505 81 | "80","Senator Vaspar","male",4,28,5.29150262212918,10.5830052442584 82 | "81","Sergeant Melshi","male",6,50,7.07106781186548,14.142135623731 83 | "82","Ship Computer","male",1,2,1.4142135623731,2.82842712474619 84 | "83","Stormtrooper 1","male",1,9,3,6 85 | "84","Stormtrooper 10","male",8,47,6.85565460040104,13.7113092008021 86 | "85","Stormtrooper 11","male",2,7,2.64575131106459,5.29150262212918 87 | "86","Stormtrooper 12","male",2,14,3.74165738677394,7.48331477354788 88 | "87","Stormtrooper 13","male",2,9,3,6 89 | "88","Stormtrooper 14","male",1,2,1.4142135623731,2.82842712474619 90 | "89","Stormtrooper 15","male",1,4,2,4 91 | "90","Stormtrooper 16","male",1,2,1.4142135623731,2.82842712474619 92 | "91","Stormtrooper 17","male",1,4,2,4 93 | "92","Stormtrooper 18","male",1,4,2,4 94 | "93","Stormtrooper 2","male",1,4,2,4 95 | "94","Stormtrooper 3","male",1,7,2.64575131106459,5.29150262212918 96 | "95","Stormtrooper 4","male",2,7,2.64575131106459,5.29150262212918 97 | "96","Stormtrooper 5","male",2,23,4.79583152331272,9.59166304662544 98 | "97","Stormtrooper 6","male",1,6,2.44948974278318,4.89897948556636 99 | "98","Stormtrooper 7","male",1,7,2.64575131106459,5.29150262212918 100 | "99","Stormtrooper 8","male",1,3,1.73205080756888,3.46410161513775 101 | "100","Stormtrooper 9","male",1,3,1.73205080756888,3.46410161513775 102 | "101","Technician","male",1,6,2.44948974278318,4.89897948556636 103 | "102","Tivik","male",11,106,10.295630140987,20.591260281974 104 | "103","Unknown Senator","male",1,4,2,4 105 | "104","Unknown Senator 2","male",1,5,2.23606797749979,4.47213595499958 106 | "105","Vader","male",9,96,9.79795897113271,19.5959179422654 107 | "106","Vader's Assistant","male",1,6,2.44948974278318,4.89897948556636 108 | -------------------------------------------------------------------------------- /docs/movie_bubbles2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var width = 300, 3 | height = 300; 4 | 5 | var svg = d3.select("#chart") 6 | .append("svg") 7 | .attr("height", height) 8 | .attr("width", width) 9 | .append("g") 10 | .attr("transform", "translate(0,0)") 11 | 12 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 13 | 14 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 15 | .strength(0.2); 16 | 17 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 18 | 19 | var forceCollide = d3.forceCollide(function(d){ 20 | return radiusScale(d.Total_Words) + 1 21 | }) 22 | .iterations(10); 23 | 24 | var simulation = d3.forceSimulation() 25 | .force("x", forceXCombine) 26 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 27 | //.force("center", d3.forceCenter(width / 2, height / 2)) 28 | .force("collide", forceCollide); 29 | 30 | 31 | var tooltip = d3.select("body") 32 | .append("div") 33 | .style("position", "absolute") 34 | .style("z-index", "20") 35 | .style("visibility", "hidden") 36 | .style("color", "white") 37 | .style("padding", "8px") 38 | .style("background-color", "darkgray") 39 | .style("border-radius", "6px") 40 | .style("font", "11") 41 | .style("font-family", "Quattrocento Sans") 42 | .style("text-anchor", "middle") 43 | .text(""); 44 | 45 | 46 | 47 | d3.queue() 48 | .defer(d3.csv, "CivilWar.csv") 49 | .await(ready) 50 | 51 | 52 | function ready (error, datapoints) { 53 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 54 | 55 | var mousemove = function() { 56 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 57 | } 58 | 59 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 60 | 61 | var circles = svg.selectAll(".Character") 62 | .data(datapoints) 63 | .enter().append("circle") 64 | .attr("class", "Character") 65 | .attr("r", function(d){ 66 | return radiusScale(d.Total_Words) 67 | }) 68 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 69 | .on("mouseover", function(d) { 70 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 71 | tooltip.style("visibility", "visible"); 72 | }) 73 | .on("mousemove", mousemove) 74 | .on("mouseout", mouseout); 75 | 76 | 77 | 78 | 79 | /// Adding Toggle Switches 80 | 81 | var onClick = function(){ 82 | simulation 83 | .force("x", atRight ? forceXSplit : forceXCombine) 84 | .alpha(0.7) 85 | .restart(); 86 | setAtRight(!atRight); 87 | } 88 | 89 | var atRight = true 90 | 91 | var rect = svg.append("rect") 92 | .attr("x", 7) 93 | .attr("y", 7) 94 | .attr("rx", 22) 95 | .attr("ry", 22) 96 | .style("fill", "lightgray") 97 | .attr("width", 64) 98 | .attr("height", 40) 99 | .on("click", onClick) 100 | 101 | var circle = svg.append("circle") 102 | .attr("cx", 27) 103 | .attr("cy", 27) 104 | .attr("r", 16) 105 | .style("fill", "white") 106 | .on("click", onClick) 107 | 108 | 109 | var setAtRight = function(newValue) { 110 | atRight = newValue; 111 | circle.transition().duration(250) 112 | .attr("cx", (atRight? (27) : (51))) 113 | .style("fill", "white"); 114 | rect.transition().duration(250) 115 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 116 | }; 117 | 118 | 119 | var res = { 120 | 'getValue': function() { return atRight; }, 121 | 'setValue': setAtRight, 122 | 'remove': function() { circle.remove(); } 123 | }; 124 | 125 | 126 | 127 | var line = svg.append("line") 128 | .style("stroke", "darkgray") 129 | .attr("x1", width/2) 130 | .attr("y1", 235) 131 | .attr("x2", width/2) 132 | .attr("y2", 285); 133 | 134 | var maleCharacters = svg.append("rect") 135 | .attr("x", 100) 136 | .attr("y", (height * (2/3) + 45)) 137 | .style("fill", "#3b3f93") 138 | .attr("width", 72) 139 | .attr("height", 10) 140 | .on("mouseover", function(d) { 141 | tooltip.html("72% Male Characters"); 142 | tooltip.style("visibility", "visible"); 143 | }) 144 | .on("mousemove", mousemove) 145 | .on("mouseout", mouseout); 146 | 147 | var femaleCharacters = svg.append("rect") 148 | .attr("x", 172) 149 | .attr("y", (height * (2/3) + 45)) 150 | .style("fill", "#ff4a6b") 151 | .attr("width", 28) 152 | .attr("height", 10) 153 | .on("mouseover", function(d) { 154 | tooltip.html("28% Female Characters"); 155 | tooltip.style("visibility", "visible"); 156 | }) 157 | .on("mousemove", mousemove) 158 | .on("mouseout", mouseout); 159 | 160 | var maleWords = svg.append("rect") 161 | .attr("x", 100) 162 | .attr("y", (height * (2/3) + 65)) 163 | .style("fill", "#3b3f93") 164 | .attr("width", 84) 165 | .attr("height", 10) 166 | .on("mouseover", function(d) { 167 | tooltip.html("84% Male Dialogue"); 168 | tooltip.style("visibility", "visible"); 169 | }) 170 | .on("mousemove", mousemove) 171 | .on("mouseout", mouseout); 172 | 173 | var femaleWords = svg.append("rect") 174 | .attr("x", 184) 175 | .attr("y", (height * (2/3) + 65)) 176 | .style("fill", "#ff4a6b") 177 | .attr("width", 16) 178 | .attr("height", 10) 179 | .on("mouseover", function(d) { 180 | tooltip.html("16% Female Dialogue"); 181 | tooltip.style("visibility", "visible"); 182 | }) 183 | .on("mousemove", mousemove) 184 | .on("mouseout", mouseout); 185 | 186 | 187 | var iconC = svg.append("text") 188 | .attr("x",83) 189 | .attr("y", (height * (2/3) + 55)) 190 | .attr("font-family","FontAwesome") 191 | .attr("font-size", 16) 192 | .attr("fill", "darkgray") 193 | .text(function(d) { return '\uf183'; }); 194 | 195 | var iconW = svg.append("text") 196 | .attr("x", 80) 197 | .attr("y", (height * (2/3) + 75)) 198 | .attr("font-family", "FontAwesome") 199 | .attr("font-size", 14) 200 | .attr("fill", "darkgray") 201 | .text(function(d) { return '\uf075'; }) 202 | 203 | var movie = svg.append("text") 204 | .attr("class", "titles") 205 | .attr("x", width/2) 206 | .attr("y", (height * (2/3))) 207 | .style("text-anchor", "middle") 208 | .attr("font-family", 'Quattrocento') 209 | .text("Captain America: Civil War") 210 | 211 | var gross = svg.append("text") 212 | .attr("class", "titles") 213 | .attr("x", width/2) 214 | .attr("y", (height * (2/3) + 25)) 215 | .style("text-anchor", "middle") 216 | .attr("font-family", 'Quattrocento Sans') 217 | .text("$1,151,684,349") 218 | 219 | var fifty = svg.append("text") 220 | .attr("class", "titles") 221 | .attr("x", width/2) 222 | .attr("y", (height - 5)) 223 | .style("text-anchor", "middle") 224 | .attr("font-family", 'Quattrocento Sans') 225 | .attr("font-size", 9) 226 | .attr("fill", "darkgray") 227 | .text("50") 228 | 229 | 230 | simulation.nodes(datapoints) 231 | .on('tick', ticked) 232 | 233 | 234 | function ticked() { 235 | circles 236 | .attr("cx", function(d) { 237 | return d.x 238 | }) 239 | .attr("cy", function(d) { 240 | return d.y 241 | }) 242 | } 243 | } 244 | })(); 245 | 246 | 247 | 248 | (function() { 249 | var width = 300, 250 | height = 300; 251 | 252 | var svg = d3.select("#chart") 253 | .append("svg") 254 | .attr("height", height) 255 | .attr("width", width) 256 | .append("g") 257 | .attr("transform", "translate(0,0)") 258 | 259 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 260 | 261 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 262 | .strength(0.2); 263 | 264 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 265 | 266 | var forceCollide = d3.forceCollide(function(d){ 267 | return radiusScale(d.Total_Words) + 1 268 | }) 269 | .iterations(10); 270 | 271 | var simulation = d3.forceSimulation() 272 | .force("x", forceXCombine) 273 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 274 | .force("collide", forceCollide) 275 | 276 | var tooltip = d3.select("body") 277 | .append("div") 278 | .style("position", "absolute") 279 | .style("z-index", "20") 280 | .style("visibility", "hidden") 281 | .style("color", "white") 282 | .style("padding", "8px") 283 | .style("background-color", "darkgray") 284 | .style("border-radius", "6px") 285 | .style("font", "11") 286 | .style("font-family", "Quattrocento Sans") 287 | .style("text-anchor", "middle") 288 | .text(""); 289 | 290 | 291 | 292 | d3.queue() 293 | .defer(d3.csv, "FindingDory.csv") 294 | .await(ready) 295 | 296 | 297 | function ready (error, datapoints) { 298 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 299 | 300 | var mousemove = function() { 301 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 302 | } 303 | 304 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 305 | 306 | var circles = svg.selectAll(".Character") 307 | .data(datapoints) 308 | .enter().append("circle") 309 | .attr("class", "Character") 310 | .attr("r", function(d){ 311 | return radiusScale(d.Total_Words) 312 | }) 313 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 314 | .on("mouseover", function(d) { 315 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 316 | tooltip.style("visibility", "visible"); 317 | }) 318 | .on("mousemove", mousemove) 319 | .on("mouseout", mouseout); 320 | 321 | 322 | 323 | /// Adding Toggle Switches 324 | 325 | var onClick = function(){ 326 | simulation 327 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 328 | .alpha(0.7) // 2. Reheat 329 | .restart(); // 3. Restart 330 | setAtRight(!atRight); 331 | } 332 | 333 | var atRight = true 334 | 335 | var rect = svg.append("rect") 336 | .attr("x", 7) 337 | .attr("y", 7) 338 | .attr("rx", 22) 339 | .attr("ry", 22) 340 | .style("fill", "lightgray") 341 | .attr("width", 64) 342 | .attr("height", 40) 343 | .on("click", onClick) 344 | 345 | var circle = svg.append("circle") 346 | .attr("cx", 27) 347 | .attr("cy", 27) 348 | .attr("r", 16) 349 | .style("fill", "white") 350 | .on("click", onClick) 351 | 352 | 353 | var setAtRight = function(newValue) { 354 | atRight = newValue; 355 | circle.transition().duration(250) 356 | .attr("cx", (atRight? (27) : (51))) 357 | .style("fill", "white"); 358 | rect.transition().duration(250) 359 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 360 | }; 361 | 362 | 363 | var res = { 364 | 'getValue': function() { return atRight; }, 365 | 'setValue': setAtRight, 366 | 'remove': function() { circle.remove(); } 367 | }; 368 | 369 | 370 | 371 | var line = svg.append("line") 372 | .style("stroke", "darkgray") 373 | .attr("x1", width/2) 374 | .attr("y1", 235) 375 | .attr("x2", width/2) 376 | .attr("y2", 285); 377 | 378 | var maleCharacters = svg.append("rect") 379 | .attr("x", 100) 380 | .attr("y", (height * (2/3) + 45)) 381 | .style("fill", "#3b3f93") 382 | .attr("width", 58) 383 | .attr("height", 10) 384 | .on("mouseover", function(d) { 385 | tooltip.html("58% Male Characters"); 386 | tooltip.style("visibility", "visible"); 387 | }) 388 | .on("mousemove", mousemove) 389 | .on("mouseout", mouseout); 390 | 391 | var femaleCharacters = svg.append("rect") 392 | .attr("x", 158) 393 | .attr("y", (height * (2/3) + 45)) 394 | .style("fill", "#ff4a6b") 395 | .attr("width", 42) 396 | .attr("height", 10) 397 | .on("mouseover", function(d) { 398 | tooltip.html("42% Female Characters"); 399 | tooltip.style("visibility", "visible"); 400 | }) 401 | .on("mousemove", mousemove) 402 | .on("mouseout", mouseout); 403 | 404 | var maleWords = svg.append("rect") 405 | .attr("x", 100) 406 | .attr("y", (height * (2/3) + 65)) 407 | .style("fill", "#3b3f93") 408 | .attr("width", 47) 409 | .attr("height", 10) 410 | .on("mouseover", function(d) { 411 | tooltip.html("47% Male Dialogue"); 412 | tooltip.style("visibility", "visible"); 413 | }) 414 | .on("mousemove", mousemove) 415 | .on("mouseout", mouseout); 416 | 417 | var femaleWords = svg.append("rect") 418 | .attr("x", 147) 419 | .attr("y", (height * (2/3) + 65)) 420 | .style("fill", "#ff4a6b") 421 | .attr("width", 53) 422 | .attr("height", 10) 423 | .on("mouseover", function(d) { 424 | tooltip.html("53% Female Dialogue"); 425 | tooltip.style("visibility", "visible"); 426 | }) 427 | .on("mousemove", mousemove) 428 | .on("mouseout", mouseout); 429 | 430 | 431 | var iconC = svg.append("text") 432 | .attr("x",83) 433 | .attr("y", (height * (2/3) + 55)) 434 | .attr("font-family","FontAwesome") 435 | .attr("font-size", 16) 436 | .attr("fill", "darkgray") 437 | .text(function(d) { return '\uf183'; }); 438 | 439 | var iconW = svg.append("text") 440 | .attr("x", 80) 441 | .attr("y", (height * (2/3) + 75)) 442 | .attr("font-family", "FontAwesome") 443 | .attr("font-size", 14) 444 | .attr("fill", "darkgray") 445 | .text(function(d) { return '\uf075'; }) 446 | 447 | var movie = svg.append("text") 448 | .attr("class", "titles") 449 | .attr("x", width/2) 450 | .attr("y", (height * (2/3))) 451 | .style("text-anchor", "middle") 452 | .attr("font-family", 'Quattrocento') 453 | .text("Finding Dory") 454 | 455 | var gross = svg.append("text") 456 | .attr("class", "titles") 457 | .attr("x", width/2) 458 | .attr("y", (height * (2/3) + 25)) 459 | .style("text-anchor", "middle") 460 | .attr("font-family", 'Quattrocento Sans') 461 | .text("$1,022,617,376") 462 | 463 | var fifty = svg.append("text") 464 | .attr("class", "titles") 465 | .attr("x", width/2) 466 | .attr("y", (height - 5)) 467 | .style("text-anchor", "middle") 468 | .attr("font-family", 'Quattrocento Sans') 469 | .attr("font-size", 9) 470 | .attr("fill", "darkgray") 471 | .text("50") 472 | 473 | 474 | simulation.nodes(datapoints) 475 | .on('tick', ticked) 476 | 477 | 478 | function ticked() { 479 | circles 480 | .attr("cx", function(d) { 481 | return d.x 482 | }) 483 | .attr("cy", function(d) { 484 | return d.y 485 | }) 486 | } 487 | } 488 | })(); 489 | 490 | 491 | 492 | 493 | 494 | 495 | (function() { 496 | var width = 300, 497 | height = 300; 498 | 499 | var svg = d3.select("#chart") 500 | .append("svg") 501 | .attr("height", height) 502 | .attr("width", width) 503 | .append("g") 504 | .attr("transform", "translate(0,0)") 505 | 506 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 507 | 508 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 509 | .strength(0.2); 510 | 511 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 512 | 513 | var forceCollide = d3.forceCollide(function(d){ 514 | return radiusScale(d.Total_Words) + 1 515 | }) 516 | .iterations(10); 517 | 518 | var simulation = d3.forceSimulation() 519 | .force("x", forceXCombine) 520 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 521 | .force("collide", forceCollide) 522 | 523 | var tooltip = d3.select("body") 524 | .append("div") 525 | .style("position", "absolute") 526 | .style("z-index", "20") 527 | .style("visibility", "hidden") 528 | .style("color", "white") 529 | .style("padding", "8px") 530 | .style("background-color", "darkgray") 531 | .style("border-radius", "6px") 532 | .style("font", "11") 533 | .style("font-family", "Quattrocento Sans") 534 | .style("text-anchor", "middle") 535 | .text(""); 536 | 537 | 538 | 539 | d3.queue() 540 | .defer(d3.csv, "Zootopia.csv") 541 | .await(ready) 542 | 543 | 544 | function ready (error, datapoints) { 545 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 546 | 547 | var mousemove = function() { 548 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 549 | } 550 | 551 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 552 | 553 | var circles = svg.selectAll(".Character") 554 | .data(datapoints) 555 | .enter().append("circle") 556 | .attr("class", "Character") 557 | .attr("r", function(d){ 558 | return radiusScale(d.Total_Words) 559 | }) 560 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 561 | .on("mouseover", function(d) { 562 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 563 | tooltip.style("visibility", "visible"); 564 | }) 565 | .on("mousemove", mousemove) 566 | .on("mouseout", mouseout); 567 | 568 | 569 | 570 | /// Adding Toggle Switches 571 | 572 | var onClick = function(){ 573 | simulation 574 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 575 | .alpha(0.7) // 2. Reheat 576 | .restart(); // 3. Restart 577 | setAtRight(!atRight); 578 | } 579 | 580 | var atRight = true 581 | 582 | var rect = svg.append("rect") 583 | .attr("x", 7) 584 | .attr("y", 7) 585 | .attr("rx", 22) 586 | .attr("ry", 22) 587 | .style("fill", "lightgray") 588 | .attr("width", 64) 589 | .attr("height", 40) 590 | .on("click", onClick) 591 | 592 | var circle = svg.append("circle") 593 | .attr("cx", 27) 594 | .attr("cy", 27) 595 | .attr("r", 16) 596 | .style("fill", "white") 597 | .on("click", onClick) 598 | 599 | 600 | var setAtRight = function(newValue) { 601 | atRight = newValue; 602 | circle.transition().duration(250) 603 | .attr("cx", (atRight? (27) : (51))) 604 | .style("fill", "white"); 605 | rect.transition().duration(250) 606 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 607 | }; 608 | 609 | 610 | var res = { 611 | 'getValue': function() { return atRight; }, 612 | 'setValue': setAtRight, 613 | 'remove': function() { circle.remove(); } 614 | }; 615 | 616 | 617 | 618 | var line = svg.append("line") 619 | .style("stroke", "darkgray") 620 | .attr("x1", width/2) 621 | .attr("y1", 235) 622 | .attr("x2", width/2) 623 | .attr("y2", 285); 624 | 625 | var maleCharacters = svg.append("rect") 626 | .attr("x", 100) 627 | .attr("y", (height * (2/3) + 45)) 628 | .style("fill", "#3b3f93") 629 | .attr("width", 62) 630 | .attr("height", 10) 631 | .on("mouseover", function(d) { 632 | tooltip.html("62% Male Characters"); 633 | tooltip.style("visibility", "visible"); 634 | }) 635 | .on("mousemove", mousemove) 636 | .on("mouseout", mouseout); 637 | 638 | var femaleCharacters = svg.append("rect") 639 | .attr("x", 162) 640 | .attr("y", (height * (2/3) + 45)) 641 | .style("fill", "#ff4a6b") 642 | .attr("width", 38) 643 | .attr("height", 10) 644 | .on("mouseover", function(d) { 645 | tooltip.html("38% Female Characters"); 646 | tooltip.style("visibility", "visible"); 647 | }) 648 | .on("mousemove", mousemove) 649 | .on("mouseout", mouseout); 650 | 651 | var maleWords = svg.append("rect") 652 | .attr("x", 100) 653 | .attr("y", (height * (2/3) + 65)) 654 | .style("fill", "#3b3f93") 655 | .attr("width", 54) 656 | .attr("height", 10) 657 | .on("mouseover", function(d) { 658 | tooltip.html("54% Male Dialogue"); 659 | tooltip.style("visibility", "visible"); 660 | }) 661 | .on("mousemove", mousemove) 662 | .on("mouseout", mouseout); 663 | 664 | var femaleWords = svg.append("rect") 665 | .attr("x", 154) 666 | .attr("y", (height * (2/3) + 65)) 667 | .style("fill", "#ff4a6b") 668 | .attr("width", 46) 669 | .attr("height", 10) 670 | .on("mouseover", function(d) { 671 | tooltip.html("46% Female Dialogue"); 672 | tooltip.style("visibility", "visible"); 673 | }) 674 | .on("mousemove", mousemove) 675 | .on("mouseout", mouseout); 676 | 677 | 678 | var iconC = svg.append("text") 679 | .attr("x",83) 680 | .attr("y", (height * (2/3) + 55)) 681 | .attr("font-family","FontAwesome") 682 | .attr("font-size", 16) 683 | .attr("fill", "darkgray") 684 | .text(function(d) { return '\uf183'; }); 685 | 686 | var iconW = svg.append("text") 687 | .attr("x", 80) 688 | .attr("y", (height * (2/3) + 75)) 689 | .attr("font-family", "FontAwesome") 690 | .attr("font-size", 14) 691 | .attr("fill", "darkgray") 692 | .text(function(d) { return '\uf075'; }) 693 | 694 | var movie = svg.append("text") 695 | .attr("class", "titles") 696 | .attr("x", width/2) 697 | .attr("y", (height * (2/3))) 698 | .style("text-anchor", "middle") 699 | .attr("font-family", 'Quattrocento') 700 | .text("Zootopia") 701 | 702 | var gross = svg.append("text") 703 | .attr("class", "titles") 704 | .attr("x", width/2) 705 | .attr("y", (height * (2/3) + 25)) 706 | .style("text-anchor", "middle") 707 | .attr("font-family", 'Quattrocento Sans') 708 | .text("$1,019,922,983") 709 | 710 | var fifty = svg.append("text") 711 | .attr("class", "titles") 712 | .attr("x", width/2) 713 | .attr("y", (height - 5)) 714 | .style("text-anchor", "middle") 715 | .attr("font-family", 'Quattrocento Sans') 716 | .attr("font-size", 9) 717 | .attr("fill", "darkgray") 718 | .text("50") 719 | 720 | 721 | simulation.nodes(datapoints) 722 | .on('tick', ticked) 723 | 724 | 725 | function ticked() { 726 | circles 727 | .attr("cx", function(d) { 728 | return d.x 729 | }) 730 | .attr("cy", function(d) { 731 | return d.y 732 | }) 733 | } 734 | } 735 | })(); 736 | 737 | 738 | 739 | 740 | (function() { 741 | var width = 300, 742 | height = 300; 743 | 744 | var svg = d3.select("#chart") 745 | .append("svg") 746 | .attr("height", height) 747 | .attr("width", width) 748 | .append("g") 749 | .attr("transform", "translate(0,0)") 750 | 751 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 752 | 753 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 754 | .strength(0.2); 755 | 756 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 757 | 758 | var forceCollide = d3.forceCollide(function(d){ 759 | return radiusScale(d.Total_Words) + 1 760 | }) 761 | .iterations(10); 762 | 763 | var simulation = d3.forceSimulation() 764 | .force("x", forceXCombine) 765 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 766 | .force("collide", forceCollide) 767 | 768 | var tooltip = d3.select("body") 769 | .append("div") 770 | .style("position", "absolute") 771 | .style("z-index", "20") 772 | .style("visibility", "hidden") 773 | .style("color", "white") 774 | .style("padding", "8px") 775 | .style("background-color", "darkgray") 776 | .style("border-radius", "6px") 777 | .style("font", "11") 778 | .style("font-family", "Quattrocento Sans") 779 | .style("text-anchor", "middle") 780 | .text(""); 781 | 782 | 783 | 784 | d3.queue() 785 | .defer(d3.csv, "JungleBook.csv") 786 | .await(ready) 787 | 788 | 789 | function ready (error, datapoints) { 790 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 791 | 792 | var mousemove = function() { 793 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 794 | } 795 | 796 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 797 | 798 | var circles = svg.selectAll(".Character") 799 | .data(datapoints) 800 | .enter().append("circle") 801 | .attr("class", "Character") 802 | .attr("r", function(d){ 803 | return radiusScale(d.Total_Words) 804 | }) 805 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 806 | .on("mouseover", function(d) { 807 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 808 | tooltip.style("visibility", "visible"); 809 | }) 810 | .on("mousemove", mousemove) 811 | .on("mouseout", mouseout); 812 | 813 | 814 | 815 | /// Adding Toggle Switches 816 | 817 | var onClick = function(){ 818 | simulation 819 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 820 | .alpha(0.7) // 2. Reheat 821 | .restart(); // 3. Restart 822 | setAtRight(!atRight); 823 | } 824 | 825 | var atRight = true 826 | 827 | var rect = svg.append("rect") 828 | .attr("x", 7) 829 | .attr("y", 7) 830 | .attr("rx", 22) 831 | .attr("ry", 22) 832 | .style("fill", "lightgray") 833 | .attr("width", 64) 834 | .attr("height", 40) 835 | .on("click", onClick) 836 | 837 | var circle = svg.append("circle") 838 | .attr("cx", 27) 839 | .attr("cy", 27) 840 | .attr("r", 16) 841 | .style("fill", "white") 842 | .on("click", onClick) 843 | 844 | 845 | var setAtRight = function(newValue) { 846 | atRight = newValue; 847 | circle.transition().duration(250) 848 | .attr("cx", (atRight? (27) : (51))) 849 | .style("fill", "white"); 850 | rect.transition().duration(250) 851 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 852 | }; 853 | 854 | 855 | var res = { 856 | 'getValue': function() { return atRight; }, 857 | 'setValue': setAtRight, 858 | 'remove': function() { circle.remove(); } 859 | }; 860 | 861 | 862 | 863 | var line = svg.append("line") 864 | .style("stroke", "darkgray") 865 | .attr("x1", width/2) 866 | .attr("y1", 235) 867 | .attr("x2", width/2) 868 | .attr("y2", 285); 869 | 870 | var maleCharacters = svg.append("rect") 871 | .attr("x", 100) 872 | .attr("y", (height * (2/3) + 45)) 873 | .style("fill", "#3b3f93") 874 | .attr("width", 79) 875 | .attr("height", 10) 876 | .on("mouseover", function(d) { 877 | tooltip.html("79% Male Characters"); 878 | tooltip.style("visibility", "visible"); 879 | }) 880 | .on("mousemove", mousemove) 881 | .on("mouseout", mouseout); 882 | 883 | var femaleCharacters = svg.append("rect") 884 | .attr("x", 179) 885 | .attr("y", (height * (2/3) + 45)) 886 | .style("fill", "#ff4a6b") 887 | .attr("width", 21) 888 | .attr("height", 10) 889 | .on("mouseover", function(d) { 890 | tooltip.html("21% Female Characters"); 891 | tooltip.style("visibility", "visible"); 892 | }) 893 | .on("mousemove", mousemove) 894 | .on("mouseout", mouseout); 895 | 896 | var maleWords = svg.append("rect") 897 | .attr("x", 100) 898 | .attr("y", (height * (2/3) + 65)) 899 | .style("fill", "#3b3f93") 900 | .attr("width", 90) 901 | .attr("height", 10) 902 | .on("mouseover", function(d) { 903 | tooltip.html("90% Male Dialogue"); 904 | tooltip.style("visibility", "visible"); 905 | }) 906 | .on("mousemove", mousemove) 907 | .on("mouseout", mouseout); 908 | 909 | var femaleWords = svg.append("rect") 910 | .attr("x", 190) 911 | .attr("y", (height * (2/3) + 65)) 912 | .style("fill", "#ff4a6b") 913 | .attr("width", 10) 914 | .attr("height", 10) 915 | .on("mouseover", function(d) { 916 | tooltip.html("10% Female Dialogue"); 917 | tooltip.style("visibility", "visible"); 918 | }) 919 | .on("mousemove", mousemove) 920 | .on("mouseout", mouseout); 921 | 922 | 923 | var iconC = svg.append("text") 924 | .attr("x",83) 925 | .attr("y", (height * (2/3) + 55)) 926 | .attr("font-family","FontAwesome") 927 | .attr("font-size", 16) 928 | .attr("fill", "darkgray") 929 | .text(function(d) { return '\uf183'; }); 930 | 931 | var iconW = svg.append("text") 932 | .attr("x", 80) 933 | .attr("y", (height * (2/3) + 75)) 934 | .attr("font-family", "FontAwesome") 935 | .attr("font-size", 14) 936 | .attr("fill", "darkgray") 937 | .text(function(d) { return '\uf075'; }) 938 | 939 | var movie = svg.append("text") 940 | .attr("class", "titles") 941 | .attr("x", width/2) 942 | .attr("y", (height * (2/3))) 943 | .style("text-anchor", "middle") 944 | .attr("font-family", 'Quattrocento') 945 | .text("The Jungle Book") 946 | 947 | var gross = svg.append("text") 948 | .attr("class", "titles") 949 | .attr("x", width/2) 950 | .attr("y", (height * (2/3) + 25)) 951 | .style("text-anchor", "middle") 952 | .attr("font-family", 'Quattrocento Sans') 953 | .text("$963,901,123") 954 | 955 | var fifty = svg.append("text") 956 | .attr("class", "titles") 957 | .attr("x", width/2) 958 | .attr("y", (height - 5)) 959 | .style("text-anchor", "middle") 960 | .attr("font-family", 'Quattrocento Sans') 961 | .attr("font-size", 9) 962 | .attr("fill", "darkgray") 963 | .text("50") 964 | 965 | 966 | simulation.nodes(datapoints) 967 | .on('tick', ticked) 968 | 969 | 970 | function ticked() { 971 | circles 972 | .attr("cx", function(d) { 973 | return d.x 974 | }) 975 | .attr("cy", function(d) { 976 | return d.y 977 | }) 978 | } 979 | } 980 | })(); 981 | 982 | 983 | 984 | (function() { 985 | var width = 300, 986 | height = 300; 987 | 988 | var svg = d3.select("#chart") 989 | .append("svg") 990 | .attr("height", height) 991 | .attr("width", width) 992 | .append("g") 993 | .attr("transform", "translate(0,0)") 994 | 995 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 996 | 997 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 998 | .strength(0.2); 999 | 1000 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 1001 | 1002 | var forceCollide = d3.forceCollide(function(d){ 1003 | return radiusScale(d.Total_Words) + 1 1004 | }) 1005 | .iterations(10); 1006 | 1007 | var simulation = d3.forceSimulation() 1008 | .force("x", forceXCombine) 1009 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 1010 | .force("collide", forceCollide) 1011 | 1012 | var tooltip = d3.select("body") 1013 | .append("div") 1014 | .style("position", "absolute") 1015 | .style("z-index", "20") 1016 | .style("visibility", "hidden") 1017 | .style("color", "white") 1018 | .style("padding", "8px") 1019 | .style("background-color", "darkgray") 1020 | .style("border-radius", "6px") 1021 | .style("font", "11") 1022 | .style("font-family", "Quattrocento Sans") 1023 | .style("text-anchor", "middle") 1024 | .text(""); 1025 | 1026 | 1027 | 1028 | d3.queue() 1029 | .defer(d3.csv, "SecretLifeofPets.csv") 1030 | .await(ready) 1031 | 1032 | 1033 | function ready (error, datapoints) { 1034 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 1035 | 1036 | var mousemove = function() { 1037 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 1038 | } 1039 | 1040 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 1041 | 1042 | var circles = svg.selectAll(".Character") 1043 | .data(datapoints) 1044 | .enter().append("circle") 1045 | .attr("class", "Character") 1046 | .attr("r", function(d){ 1047 | return radiusScale(d.Total_Words) 1048 | }) 1049 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 1050 | .on("mouseover", function(d) { 1051 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 1052 | tooltip.style("visibility", "visible"); 1053 | }) 1054 | .on("mousemove", mousemove) 1055 | .on("mouseout", mouseout); 1056 | 1057 | 1058 | 1059 | /// Adding Toggle Switches 1060 | 1061 | var onClick = function(){ 1062 | simulation 1063 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 1064 | .alpha(0.7) // 2. Reheat 1065 | .restart(); // 3. Restart 1066 | setAtRight(!atRight); 1067 | } 1068 | 1069 | var atRight = true 1070 | 1071 | var rect = svg.append("rect") 1072 | .attr("x", 7) 1073 | .attr("y", 7) 1074 | .attr("rx", 22) 1075 | .attr("ry", 22) 1076 | .style("fill", "lightgray") 1077 | .attr("width", 64) 1078 | .attr("height", 40) 1079 | .on("click", onClick) 1080 | 1081 | var circle = svg.append("circle") 1082 | .attr("cx", 27) 1083 | .attr("cy", 27) 1084 | .attr("r", 16) 1085 | .style("fill", "white") 1086 | .on("click", onClick) 1087 | 1088 | 1089 | var setAtRight = function(newValue) { 1090 | atRight = newValue; 1091 | circle.transition().duration(250) 1092 | .attr("cx", (atRight? (27) : (51))) 1093 | .style("fill", "white"); 1094 | rect.transition().duration(250) 1095 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 1096 | }; 1097 | 1098 | 1099 | var res = { 1100 | 'getValue': function() { return atRight; }, 1101 | 'setValue': setAtRight, 1102 | 'remove': function() { circle.remove(); } 1103 | }; 1104 | 1105 | 1106 | 1107 | var line = svg.append("line") 1108 | .style("stroke", "darkgray") 1109 | .attr("x1", width/2) 1110 | .attr("y1", 235) 1111 | .attr("x2", width/2) 1112 | .attr("y2", 285); 1113 | 1114 | var maleCharacters = svg.append("rect") 1115 | .attr("x", 100) 1116 | .attr("y", (height * (2/3) + 45)) 1117 | .style("fill", "#3b3f93") 1118 | .attr("width", 73) 1119 | .attr("height", 10) 1120 | .on("mouseover", function(d) { 1121 | tooltip.html("73% Male Characters"); 1122 | tooltip.style("visibility", "visible"); 1123 | }) 1124 | .on("mousemove", mousemove) 1125 | .on("mouseout", mouseout); 1126 | 1127 | var femaleCharacters = svg.append("rect") 1128 | .attr("x", 173) 1129 | .attr("y", (height * (2/3) + 45)) 1130 | .style("fill", "#ff4a6b") 1131 | .attr("width", 27) 1132 | .attr("height", 10) 1133 | .on("mouseover", function(d) { 1134 | tooltip.html("27% Female Characters"); 1135 | tooltip.style("visibility", "visible"); 1136 | }) 1137 | .on("mousemove", mousemove) 1138 | .on("mouseout", mouseout); 1139 | 1140 | var maleWords = svg.append("rect") 1141 | .attr("x", 100) 1142 | .attr("y", (height * (2/3) + 65)) 1143 | .style("fill", "#3b3f93") 1144 | .attr("width", 81) 1145 | .attr("height", 10) 1146 | .on("mouseover", function(d) { 1147 | tooltip.html("81% Male Dialogue"); 1148 | tooltip.style("visibility", "visible"); 1149 | }) 1150 | .on("mousemove", mousemove) 1151 | .on("mouseout", mouseout); 1152 | 1153 | var femaleWords = svg.append("rect") 1154 | .attr("x", 181) 1155 | .attr("y", (height * (2/3) + 65)) 1156 | .style("fill", "#ff4a6b") 1157 | .attr("width", 19) 1158 | .attr("height", 10) 1159 | .on("mouseover", function(d) { 1160 | tooltip.html("19% Female Dialogue"); 1161 | tooltip.style("visibility", "visible"); 1162 | }) 1163 | .on("mousemove", mousemove) 1164 | .on("mouseout", mouseout); 1165 | 1166 | 1167 | var iconC = svg.append("text") 1168 | .attr("x",83) 1169 | .attr("y", (height * (2/3) + 55)) 1170 | .attr("font-family","FontAwesome") 1171 | .attr("font-size", 16) 1172 | .attr("fill", "darkgray") 1173 | .text(function(d) { return '\uf183'; }); 1174 | 1175 | var iconW = svg.append("text") 1176 | .attr("x", 80) 1177 | .attr("y", (height * (2/3) + 75)) 1178 | .attr("font-family", "FontAwesome") 1179 | .attr("font-size", 14) 1180 | .attr("fill", "darkgray") 1181 | .text(function(d) { return '\uf075'; }) 1182 | 1183 | var movie = svg.append("text") 1184 | .attr("class", "titles") 1185 | .attr("x", width/2) 1186 | .attr("y", (height * (2/3))) 1187 | .style("text-anchor", "middle") 1188 | .attr("font-family", 'Quattrocento') 1189 | .text("The Secret Life of Pets") 1190 | 1191 | var gross = svg.append("text") 1192 | .attr("class", "titles") 1193 | .attr("x", width/2) 1194 | .attr("y", (height * (2/3) + 25)) 1195 | .style("text-anchor", "middle") 1196 | .attr("font-family", 'Quattrocento Sans') 1197 | .text("$870,184,167") 1198 | 1199 | var fifty = svg.append("text") 1200 | .attr("class", "titles") 1201 | .attr("x", width/2) 1202 | .attr("y", (height - 5)) 1203 | .style("text-anchor", "middle") 1204 | .attr("font-family", 'Quattrocento Sans') 1205 | .attr("font-size", 9) 1206 | .attr("fill", "darkgray") 1207 | .text("50") 1208 | 1209 | 1210 | simulation.nodes(datapoints) 1211 | .on('tick', ticked) 1212 | 1213 | 1214 | function ticked() { 1215 | circles 1216 | .attr("cx", function(d) { 1217 | return d.x 1218 | }) 1219 | .attr("cy", function(d) { 1220 | return d.y 1221 | }) 1222 | } 1223 | } 1224 | })(); 1225 | 1226 | 1227 | 1228 | 1229 | 1230 | (function() { 1231 | var width = 300, 1232 | height = 300; 1233 | 1234 | var svg = d3.select("#chart") 1235 | .append("svg") 1236 | .attr("height", height) 1237 | .attr("width", width) 1238 | .append("g") 1239 | .attr("transform", "translate(0,0)") 1240 | 1241 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 1242 | 1243 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 1244 | .strength(0.2); 1245 | 1246 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 1247 | 1248 | var forceCollide = d3.forceCollide(function(d){ 1249 | return radiusScale(d.Total_Words) + 1 1250 | }) 1251 | .iterations(10); 1252 | 1253 | var simulation = d3.forceSimulation() 1254 | .force("x", forceXCombine) 1255 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 1256 | .force("collide", forceCollide) 1257 | 1258 | var tooltip = d3.select("body") 1259 | .append("div") 1260 | .style("position", "absolute") 1261 | .style("z-index", "20") 1262 | .style("visibility", "hidden") 1263 | .style("color", "white") 1264 | .style("padding", "8px") 1265 | .style("background-color", "darkgray") 1266 | .style("border-radius", "6px") 1267 | .style("font", "11") 1268 | .style("font-family", "Quattrocento Sans") 1269 | .style("text-anchor", "middle") 1270 | .text(""); 1271 | 1272 | 1273 | 1274 | d3.queue() 1275 | .defer(d3.csv, "BatmanVSuperman.csv") 1276 | .await(ready) 1277 | 1278 | 1279 | function ready (error, datapoints) { 1280 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 1281 | 1282 | var mousemove = function() { 1283 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 1284 | } 1285 | 1286 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 1287 | 1288 | var circles = svg.selectAll(".Character") 1289 | .data(datapoints) 1290 | .enter().append("circle") 1291 | .attr("class", "Character") 1292 | .attr("r", function(d){ 1293 | return radiusScale(d.Total_Words) 1294 | }) 1295 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 1296 | .on("mouseover", function(d) { 1297 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 1298 | tooltip.style("visibility", "visible"); 1299 | }) 1300 | .on("mousemove", mousemove) 1301 | .on("mouseout", mouseout); 1302 | 1303 | 1304 | 1305 | /// Adding Toggle Switches 1306 | 1307 | var onClick = function(){ 1308 | simulation 1309 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 1310 | .alpha(0.7) // 2. Reheat 1311 | .restart(); // 3. Restart 1312 | setAtRight(!atRight); 1313 | } 1314 | 1315 | var atRight = true 1316 | 1317 | var rect = svg.append("rect") 1318 | .attr("x", 7) 1319 | .attr("y", 7) 1320 | .attr("rx", 22) 1321 | .attr("ry", 22) 1322 | .style("fill", "lightgray") 1323 | .attr("width", 64) 1324 | .attr("height", 40) 1325 | .on("click", onClick) 1326 | 1327 | var circle = svg.append("circle") 1328 | .attr("cx", 27) 1329 | .attr("cy", 27) 1330 | .attr("r", 16) 1331 | .style("fill", "white") 1332 | .on("click", onClick) 1333 | 1334 | 1335 | var setAtRight = function(newValue) { 1336 | atRight = newValue; 1337 | circle.transition().duration(250) 1338 | .attr("cx", (atRight? (27) : (51))) 1339 | .style("fill", "white"); 1340 | rect.transition().duration(250) 1341 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 1342 | }; 1343 | 1344 | 1345 | var res = { 1346 | 'getValue': function() { return atRight; }, 1347 | 'setValue': setAtRight, 1348 | 'remove': function() { circle.remove(); } 1349 | }; 1350 | 1351 | 1352 | 1353 | var line = svg.append("line") 1354 | .style("stroke", "darkgray") 1355 | .attr("x1", width/2) 1356 | .attr("y1", 235) 1357 | .attr("x2", width/2) 1358 | .attr("y2", 285); 1359 | 1360 | var maleCharacters = svg.append("rect") 1361 | .attr("x", 100) 1362 | .attr("y", (height * (2/3) + 45)) 1363 | .style("fill", "#3b3f93") 1364 | .attr("width", 76) 1365 | .attr("height", 10) 1366 | .on("mouseover", function(d) { 1367 | tooltip.html("76% Male Characters"); 1368 | tooltip.style("visibility", "visible"); 1369 | }) 1370 | .on("mousemove", mousemove) 1371 | .on("mouseout", mouseout); 1372 | 1373 | var femaleCharacters = svg.append("rect") 1374 | .attr("x", 176) 1375 | .attr("y", (height * (2/3) + 45)) 1376 | .style("fill", "#ff4a6b") 1377 | .attr("width", 24) 1378 | .attr("height", 10) 1379 | .on("mouseover", function(d) { 1380 | tooltip.html("24% Female Characters"); 1381 | tooltip.style("visibility", "visible"); 1382 | }) 1383 | .on("mousemove", mousemove) 1384 | .on("mouseout", mouseout); 1385 | 1386 | var maleWords = svg.append("rect") 1387 | .attr("x", 100) 1388 | .attr("y", (height * (2/3) + 65)) 1389 | .style("fill", "#3b3f93") 1390 | .attr("width", 77) 1391 | .attr("height", 10) 1392 | .on("mouseover", function(d) { 1393 | tooltip.html("77% Male Dialogue"); 1394 | tooltip.style("visibility", "visible"); 1395 | }) 1396 | .on("mousemove", mousemove) 1397 | .on("mouseout", mouseout); 1398 | 1399 | var femaleWords = svg.append("rect") 1400 | .attr("x", 177) 1401 | .attr("y", (height * (2/3) + 65)) 1402 | .style("fill", "#ff4a6b") 1403 | .attr("width", 23) 1404 | .attr("height", 10) 1405 | .on("mouseover", function(d) { 1406 | tooltip.html("23% Female Dialogue"); 1407 | tooltip.style("visibility", "visible"); 1408 | }) 1409 | .on("mousemove", mousemove) 1410 | .on("mouseout", mouseout); 1411 | 1412 | 1413 | var iconC = svg.append("text") 1414 | .attr("x",83) 1415 | .attr("y", (height * (2/3) + 55)) 1416 | .attr("font-family","FontAwesome") 1417 | .attr("font-size", 16) 1418 | .attr("fill", "darkgray") 1419 | .text(function(d) { return '\uf183'; }); 1420 | 1421 | var iconW = svg.append("text") 1422 | .attr("x", 80) 1423 | .attr("y", (height * (2/3) + 75)) 1424 | .attr("font-family", "FontAwesome") 1425 | .attr("font-size", 14) 1426 | .attr("fill", "darkgray") 1427 | .text(function(d) { return '\uf075'; }) 1428 | 1429 | var movie = svg.append("text") 1430 | .attr("class", "titles") 1431 | .attr("x", width/2) 1432 | .attr("y", (height * (2/3))) 1433 | .style("text-anchor", "middle") 1434 | .attr("font-family", 'Quattrocento') 1435 | .text("Batman Vs. Superman") 1436 | 1437 | var gross = svg.append("text") 1438 | .attr("class", "titles") 1439 | .attr("x", width/2) 1440 | .attr("y", (height * (2/3) + 25)) 1441 | .style("text-anchor", "middle") 1442 | .attr("font-family", 'Quattrocento Sans') 1443 | .text("$868,160,194") 1444 | 1445 | var fifty = svg.append("text") 1446 | .attr("class", "titles") 1447 | .attr("x", width/2) 1448 | .attr("y", (height - 5)) 1449 | .style("text-anchor", "middle") 1450 | .attr("font-family", 'Quattrocento Sans') 1451 | .attr("font-size", 9) 1452 | .attr("fill", "darkgray") 1453 | .text("50") 1454 | 1455 | 1456 | simulation.nodes(datapoints) 1457 | .on('tick', ticked) 1458 | 1459 | 1460 | function ticked() { 1461 | circles 1462 | .attr("cx", function(d) { 1463 | return d.x 1464 | }) 1465 | .attr("cy", function(d) { 1466 | return d.y 1467 | }) 1468 | } 1469 | } 1470 | })(); 1471 | 1472 | 1473 | 1474 | 1475 | 1476 | 1477 | (function() { 1478 | var width = 300, 1479 | height = 300; 1480 | 1481 | var svg = d3.select("#chart") 1482 | .append("svg") 1483 | .attr("height", height) 1484 | .attr("width", width) 1485 | .append("g") 1486 | .attr("transform", "translate(0,0)") 1487 | 1488 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 1489 | 1490 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 1491 | .strength(0.2); 1492 | 1493 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 1494 | 1495 | var forceCollide = d3.forceCollide(function(d){ 1496 | return radiusScale(d.Total_Words) + 1 1497 | }) 1498 | .iterations(10); 1499 | 1500 | var simulation = d3.forceSimulation() 1501 | .force("x", forceXCombine) 1502 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 1503 | .force("collide", forceCollide) 1504 | 1505 | var tooltip = d3.select("body") 1506 | .append("div") 1507 | .style("position", "absolute") 1508 | .style("z-index", "20") 1509 | .style("visibility", "hidden") 1510 | .style("color", "white") 1511 | .style("padding", "8px") 1512 | .style("background-color", "darkgray") 1513 | .style("border-radius", "6px") 1514 | .style("font", "11") 1515 | .style("font-family", "Quattrocento Sans") 1516 | .style("text-anchor", "middle") 1517 | .text(""); 1518 | 1519 | 1520 | 1521 | d3.queue() 1522 | .defer(d3.csv, "RogueOne.csv") 1523 | .await(ready) 1524 | 1525 | 1526 | function ready (error, datapoints) { 1527 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 1528 | 1529 | var mousemove = function() { 1530 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 1531 | } 1532 | 1533 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 1534 | 1535 | var circles = svg.selectAll(".Character") 1536 | .data(datapoints) 1537 | .enter().append("circle") 1538 | .attr("class", "Character") 1539 | .attr("r", function(d){ 1540 | return radiusScale(d.Total_Words) 1541 | }) 1542 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 1543 | .on("mouseover", function(d) { 1544 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 1545 | tooltip.style("visibility", "visible"); 1546 | }) 1547 | .on("mousemove", mousemove) 1548 | .on("mouseout", mouseout); 1549 | 1550 | 1551 | 1552 | /// Adding Toggle Switches 1553 | 1554 | var onClick = function(){ 1555 | simulation 1556 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 1557 | .alpha(0.7) // 2. Reheat 1558 | .restart(); // 3. Restart 1559 | setAtRight(!atRight); 1560 | } 1561 | 1562 | var atRight = true 1563 | 1564 | var rect = svg.append("rect") 1565 | .attr("x", 7) 1566 | .attr("y", 7) 1567 | .attr("rx", 22) 1568 | .attr("ry", 22) 1569 | .style("fill", "lightgray") 1570 | .attr("width", 64) 1571 | .attr("height", 40) 1572 | .on("click", onClick) 1573 | 1574 | var circle = svg.append("circle") 1575 | .attr("cx", 27) 1576 | .attr("cy", 27) 1577 | .attr("r", 16) 1578 | .style("fill", "white") 1579 | .on("click", onClick) 1580 | 1581 | 1582 | var setAtRight = function(newValue) { 1583 | atRight = newValue; 1584 | circle.transition().duration(250) 1585 | .attr("cx", (atRight? (27) : (51))) 1586 | .style("fill", "white"); 1587 | rect.transition().duration(250) 1588 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 1589 | }; 1590 | 1591 | 1592 | var res = { 1593 | 'getValue': function() { return atRight; }, 1594 | 'setValue': setAtRight, 1595 | 'remove': function() { circle.remove(); } 1596 | }; 1597 | 1598 | 1599 | 1600 | var line = svg.append("line") 1601 | .style("stroke", "darkgray") 1602 | .attr("x1", width/2) 1603 | .attr("y1", 235) 1604 | .attr("x2", width/2) 1605 | .attr("y2", 285); 1606 | 1607 | var maleCharacters = svg.append("rect") 1608 | .attr("x", 100) 1609 | .attr("y", (height * (2/3) + 45)) 1610 | .style("fill", "#3b3f93") 1611 | .attr("width", 91) 1612 | .attr("height", 10) 1613 | .on("mouseover", function(d) { 1614 | tooltip.html("91% Male Characters"); 1615 | tooltip.style("visibility", "visible"); 1616 | }) 1617 | .on("mousemove", mousemove) 1618 | .on("mouseout", mouseout); 1619 | 1620 | var femaleCharacters = svg.append("rect") 1621 | .attr("x", 191) 1622 | .attr("y", (height * (2/3) + 45)) 1623 | .style("fill", "#ff4a6b") 1624 | .attr("width", 9) 1625 | .attr("height", 10) 1626 | .on("mouseover", function(d) { 1627 | tooltip.html("9% Female Characters"); 1628 | tooltip.style("visibility", "visible"); 1629 | }) 1630 | .on("mousemove", mousemove) 1631 | .on("mouseout", mouseout); 1632 | 1633 | var maleWords = svg.append("rect") 1634 | .attr("x", 100) 1635 | .attr("y", (height * (2/3) + 65)) 1636 | .style("fill", "#3b3f93") 1637 | .attr("width", 83) 1638 | .attr("height", 10) 1639 | .on("mouseover", function(d) { 1640 | tooltip.html("83% Male Dialogue"); 1641 | tooltip.style("visibility", "visible"); 1642 | }) 1643 | .on("mousemove", mousemove) 1644 | .on("mouseout", mouseout); 1645 | 1646 | var femaleWords = svg.append("rect") 1647 | .attr("x", 183) 1648 | .attr("y", (height * (2/3) + 65)) 1649 | .style("fill", "#ff4a6b") 1650 | .attr("width", 17) 1651 | .attr("height", 10) 1652 | .on("mouseover", function(d) { 1653 | tooltip.html("17% Female Dialogue"); 1654 | tooltip.style("visibility", "visible"); 1655 | }) 1656 | .on("mousemove", mousemove) 1657 | .on("mouseout", mouseout); 1658 | 1659 | 1660 | var iconC = svg.append("text") 1661 | .attr("x",83) 1662 | .attr("y", (height * (2/3) + 55)) 1663 | .attr("font-family","FontAwesome") 1664 | .attr("font-size", 16) 1665 | .attr("fill", "darkgray") 1666 | .text(function(d) { return '\uf183'; }); 1667 | 1668 | var iconW = svg.append("text") 1669 | .attr("x", 80) 1670 | .attr("y", (height * (2/3) + 75)) 1671 | .attr("font-family", "FontAwesome") 1672 | .attr("font-size", 14) 1673 | .attr("fill", "darkgray") 1674 | .text(function(d) { return '\uf075'; }) 1675 | 1676 | var movie = svg.append("text") 1677 | .attr("class", "titles") 1678 | .attr("x", width/2) 1679 | .attr("y", (height * (2/3))) 1680 | .style("text-anchor", "middle") 1681 | .attr("font-family", 'Quattrocento') 1682 | .text("Rogue One") 1683 | 1684 | var gross = svg.append("text") 1685 | .attr("class", "titles") 1686 | .attr("x", width/2) 1687 | .attr("y", (height * (2/3) + 25)) 1688 | .style("text-anchor", "middle") 1689 | .attr("font-family", 'Quattrocento Sans') 1690 | .text("$829,107,837") 1691 | 1692 | var fifty = svg.append("text") 1693 | .attr("class", "titles") 1694 | .attr("x", width/2) 1695 | .attr("y", (height - 5)) 1696 | .style("text-anchor", "middle") 1697 | .attr("font-family", 'Quattrocento Sans') 1698 | .attr("font-size", 9) 1699 | .attr("fill", "darkgray") 1700 | .text("50") 1701 | 1702 | 1703 | simulation.nodes(datapoints) 1704 | .on('tick', ticked) 1705 | 1706 | 1707 | function ticked() { 1708 | circles 1709 | .attr("cx", function(d) { 1710 | return d.x 1711 | }) 1712 | .attr("cy", function(d) { 1713 | return d.y 1714 | }) 1715 | } 1716 | } 1717 | })(); 1718 | 1719 | 1720 | 1721 | 1722 | (function() { 1723 | var width = 300, 1724 | height = 300; 1725 | 1726 | var svg = d3.select("#chart") 1727 | .append("svg") 1728 | .attr("height", height) 1729 | .attr("width", width) 1730 | .append("g") 1731 | .attr("transform", "translate(0,0)") 1732 | 1733 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 1734 | 1735 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 1736 | .strength(0.2); 1737 | 1738 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 1739 | 1740 | var forceCollide = d3.forceCollide(function(d){ 1741 | return radiusScale(d.Total_Words) + 1 1742 | }) 1743 | .iterations(10); 1744 | 1745 | var simulation = d3.forceSimulation() 1746 | .force("x", forceXCombine) 1747 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 1748 | .force("collide", forceCollide) 1749 | 1750 | var tooltip = d3.select("body") 1751 | .append("div") 1752 | .style("position", "absolute") 1753 | .style("z-index", "20") 1754 | .style("visibility", "hidden") 1755 | .style("color", "white") 1756 | .style("padding", "8px") 1757 | .style("background-color", "darkgray") 1758 | .style("border-radius", "6px") 1759 | .style("font", "11") 1760 | .style("font-family", "Quattrocento Sans") 1761 | .style("text-anchor", "middle") 1762 | .text(""); 1763 | 1764 | 1765 | 1766 | d3.queue() 1767 | .defer(d3.csv, "Deadpool.csv") 1768 | .await(ready) 1769 | 1770 | 1771 | function ready (error, datapoints) { 1772 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 1773 | 1774 | var mousemove = function() { 1775 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 1776 | } 1777 | 1778 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 1779 | 1780 | var circles = svg.selectAll(".Character") 1781 | .data(datapoints) 1782 | .enter().append("circle") 1783 | .attr("class", "Character") 1784 | .attr("r", function(d){ 1785 | return radiusScale(d.Total_Words) 1786 | }) 1787 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 1788 | .on("mouseover", function(d) { 1789 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 1790 | tooltip.style("visibility", "visible"); 1791 | }) 1792 | .on("mousemove", mousemove) 1793 | .on("mouseout", mouseout); 1794 | 1795 | 1796 | 1797 | /// Adding Toggle Switches 1798 | 1799 | var onClick = function(){ 1800 | simulation 1801 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 1802 | .alpha(0.7) // 2. Reheat 1803 | .restart(); // 3. Restart 1804 | setAtRight(!atRight); 1805 | } 1806 | 1807 | var atRight = true 1808 | 1809 | var rect = svg.append("rect") 1810 | .attr("x", 7) 1811 | .attr("y", 7) 1812 | .attr("rx", 22) 1813 | .attr("ry", 22) 1814 | .style("fill", "lightgray") 1815 | .attr("width", 64) 1816 | .attr("height", 40) 1817 | .on("click", onClick) 1818 | 1819 | var circle = svg.append("circle") 1820 | .attr("cx", 27) 1821 | .attr("cy", 27) 1822 | .attr("r", 16) 1823 | .style("fill", "white") 1824 | .on("click", onClick) 1825 | 1826 | 1827 | var setAtRight = function(newValue) { 1828 | atRight = newValue; 1829 | circle.transition().duration(250) 1830 | .attr("cx", (atRight? (27) : (51))) 1831 | .style("fill", "white"); 1832 | rect.transition().duration(250) 1833 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 1834 | }; 1835 | 1836 | 1837 | var res = { 1838 | 'getValue': function() { return atRight; }, 1839 | 'setValue': setAtRight, 1840 | 'remove': function() { circle.remove(); } 1841 | }; 1842 | 1843 | 1844 | 1845 | var line = svg.append("line") 1846 | .style("stroke", "darkgray") 1847 | .attr("x1", width/2) 1848 | .attr("y1", 235) 1849 | .attr("x2", width/2) 1850 | .attr("y2", 285); 1851 | 1852 | var maleCharacters = svg.append("rect") 1853 | .attr("x", 100) 1854 | .attr("y", (height * (2/3) + 45)) 1855 | .style("fill", "#3b3f93") 1856 | .attr("width", 71) 1857 | .attr("height", 10) 1858 | .on("mouseover", function(d) { 1859 | tooltip.html("71% Male Characters"); 1860 | tooltip.style("visibility", "visible"); 1861 | }) 1862 | .on("mousemove", mousemove) 1863 | .on("mouseout", mouseout); 1864 | 1865 | var femaleCharacters = svg.append("rect") 1866 | .attr("x", 171) 1867 | .attr("y", (height * (2/3) + 45)) 1868 | .style("fill", "#ff4a6b") 1869 | .attr("width", 29) 1870 | .attr("height", 10) 1871 | .on("mouseover", function(d) { 1872 | tooltip.html("29% Female Characters"); 1873 | tooltip.style("visibility", "visible"); 1874 | }) 1875 | .on("mousemove", mousemove) 1876 | .on("mouseout", mouseout); 1877 | 1878 | var maleWords = svg.append("rect") 1879 | .attr("x", 100) 1880 | .attr("y", (height * (2/3) + 65)) 1881 | .style("fill", "#3b3f93") 1882 | .attr("width", 83) 1883 | .attr("height", 10) 1884 | .on("mouseover", function(d) { 1885 | tooltip.html("83% Male Dialogue"); 1886 | tooltip.style("visibility", "visible"); 1887 | }) 1888 | .on("mousemove", mousemove) 1889 | .on("mouseout", mouseout); 1890 | 1891 | var femaleWords = svg.append("rect") 1892 | .attr("x", 183) 1893 | .attr("y", (height * (2/3) + 65)) 1894 | .style("fill", "#ff4a6b") 1895 | .attr("width", 17) 1896 | .attr("height", 10) 1897 | .on("mouseover", function(d) { 1898 | tooltip.html("17% Female Dialogue"); 1899 | tooltip.style("visibility", "visible"); 1900 | }) 1901 | .on("mousemove", mousemove) 1902 | .on("mouseout", mouseout); 1903 | 1904 | 1905 | var iconC = svg.append("text") 1906 | .attr("x",83) 1907 | .attr("y", (height * (2/3) + 55)) 1908 | .attr("font-family","FontAwesome") 1909 | .attr("font-size", 16) 1910 | .attr("fill", "darkgray") 1911 | .text(function(d) { return '\uf183'; }); 1912 | 1913 | var iconW = svg.append("text") 1914 | .attr("x", 80) 1915 | .attr("y", (height * (2/3) + 75)) 1916 | .attr("font-family", "FontAwesome") 1917 | .attr("font-size", 14) 1918 | .attr("fill", "darkgray") 1919 | .text(function(d) { return '\uf075'; }) 1920 | 1921 | var movie = svg.append("text") 1922 | .attr("class", "titles") 1923 | .attr("x", width/2) 1924 | .attr("y", (height * (2/3))) 1925 | .style("text-anchor", "middle") 1926 | .attr("font-family", 'Quattrocento') 1927 | .text("Deadpool") 1928 | 1929 | var gross = svg.append("text") 1930 | .attr("class", "titles") 1931 | .attr("x", width/2) 1932 | .attr("y", (height * (2/3) + 25)) 1933 | .style("text-anchor", "middle") 1934 | .attr("font-family", 'Quattrocento Sans') 1935 | .text("$783,770,709") 1936 | 1937 | var fifty = svg.append("text") 1938 | .attr("class", "titles") 1939 | .attr("x", width/2) 1940 | .attr("y", (height - 5)) 1941 | .style("text-anchor", "middle") 1942 | .attr("font-family", 'Quattrocento Sans') 1943 | .attr("font-size", 9) 1944 | .attr("fill", "darkgray") 1945 | .text("50") 1946 | 1947 | 1948 | simulation.nodes(datapoints) 1949 | .on('tick', ticked) 1950 | 1951 | 1952 | function ticked() { 1953 | circles 1954 | .attr("cx", function(d) { 1955 | return d.x 1956 | }) 1957 | .attr("cy", function(d) { 1958 | return d.y 1959 | }) 1960 | } 1961 | } 1962 | })(); 1963 | 1964 | 1965 | 1966 | 1967 | 1968 | (function() { 1969 | var width = 300, 1970 | height = 300; 1971 | 1972 | var svg = d3.select("#chart") 1973 | .append("svg") 1974 | .attr("height", height) 1975 | .attr("width", width) 1976 | .append("g") 1977 | .attr("transform", "translate(0,0)") 1978 | 1979 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 1980 | 1981 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 1982 | .strength(0.2); 1983 | 1984 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 1985 | 1986 | var forceCollide = d3.forceCollide(function(d){ 1987 | return radiusScale(d.Total_Words) + 1 1988 | }) 1989 | .iterations(10); 1990 | 1991 | var simulation = d3.forceSimulation() 1992 | .force("x", forceXCombine) 1993 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 1994 | .force("collide", forceCollide) 1995 | 1996 | var tooltip = d3.select("body") 1997 | .append("div") 1998 | .style("position", "absolute") 1999 | .style("z-index", "20") 2000 | .style("visibility", "hidden") 2001 | .style("color", "white") 2002 | .style("padding", "8px") 2003 | .style("background-color", "darkgray") 2004 | .style("border-radius", "6px") 2005 | .style("font", "11") 2006 | .style("font-family", "Quattrocento Sans") 2007 | .style("text-anchor", "middle") 2008 | .text(""); 2009 | 2010 | 2011 | 2012 | d3.queue() 2013 | .defer(d3.csv, "FantasticBeasts.csv") 2014 | .await(ready) 2015 | 2016 | 2017 | function ready (error, datapoints) { 2018 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 2019 | 2020 | var mousemove = function() { 2021 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 2022 | } 2023 | 2024 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 2025 | 2026 | var circles = svg.selectAll(".Character") 2027 | .data(datapoints) 2028 | .enter().append("circle") 2029 | .attr("class", "Character") 2030 | .attr("r", function(d){ 2031 | return radiusScale(d.Total_Words) 2032 | }) 2033 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 2034 | .on("mouseover", function(d) { 2035 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 2036 | tooltip.style("visibility", "visible"); 2037 | }) 2038 | .on("mousemove", mousemove) 2039 | .on("mouseout", mouseout); 2040 | 2041 | 2042 | 2043 | /// Adding Toggle Switches 2044 | 2045 | var onClick = function(){ 2046 | simulation 2047 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 2048 | .alpha(0.7) // 2. Reheat 2049 | .restart(); // 3. Restart 2050 | setAtRight(!atRight); 2051 | } 2052 | 2053 | var atRight = true 2054 | 2055 | var rect = svg.append("rect") 2056 | .attr("x", 7) 2057 | .attr("y", 7) 2058 | .attr("rx", 22) 2059 | .attr("ry", 22) 2060 | .style("fill", "lightgray") 2061 | .attr("width", 64) 2062 | .attr("height", 40) 2063 | .on("click", onClick) 2064 | 2065 | var circle = svg.append("circle") 2066 | .attr("cx", 27) 2067 | .attr("cy", 27) 2068 | .attr("r", 16) 2069 | .style("fill", "white") 2070 | .on("click", onClick) 2071 | 2072 | 2073 | var setAtRight = function(newValue) { 2074 | atRight = newValue; 2075 | circle.transition().duration(250) 2076 | .attr("cx", (atRight? (27) : (51))) 2077 | .style("fill", "white"); 2078 | rect.transition().duration(250) 2079 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 2080 | }; 2081 | 2082 | 2083 | var res = { 2084 | 'getValue': function() { return atRight; }, 2085 | 'setValue': setAtRight, 2086 | 'remove': function() { circle.remove(); } 2087 | }; 2088 | 2089 | 2090 | 2091 | var line = svg.append("line") 2092 | .style("stroke", "darkgray") 2093 | .attr("x1", width/2) 2094 | .attr("y1", 235) 2095 | .attr("x2", width/2) 2096 | .attr("y2", 285); 2097 | 2098 | var maleCharacters = svg.append("rect") 2099 | .attr("x", 100) 2100 | .attr("y", (height * (2/3) + 45)) 2101 | .style("fill", "#3b3f93") 2102 | .attr("width", 68) 2103 | .attr("height", 10) 2104 | .on("mouseover", function(d) { 2105 | tooltip.html("68% Male Characters"); 2106 | tooltip.style("visibility", "visible"); 2107 | }) 2108 | .on("mousemove", mousemove) 2109 | .on("mouseout", mouseout); 2110 | 2111 | var femaleCharacters = svg.append("rect") 2112 | .attr("x", 168) 2113 | .attr("y", (height * (2/3) + 45)) 2114 | .style("fill", "#ff4a6b") 2115 | .attr("width", 32) 2116 | .attr("height", 10) 2117 | .on("mouseover", function(d) { 2118 | tooltip.html("32% Female Characters"); 2119 | tooltip.style("visibility", "visible"); 2120 | }) 2121 | .on("mousemove", mousemove) 2122 | .on("mouseout", mouseout); 2123 | 2124 | var maleWords = svg.append("rect") 2125 | .attr("x", 100) 2126 | .attr("y", (height * (2/3) + 65)) 2127 | .style("fill", "#3b3f93") 2128 | .attr("width", 68) 2129 | .attr("height", 10) 2130 | .on("mouseover", function(d) { 2131 | tooltip.html("68% Male Dialogue"); 2132 | tooltip.style("visibility", "visible"); 2133 | }) 2134 | .on("mousemove", mousemove) 2135 | .on("mouseout", mouseout); 2136 | 2137 | var femaleWords = svg.append("rect") 2138 | .attr("x", 168) 2139 | .attr("y", (height * (2/3) + 65)) 2140 | .style("fill", "#ff4a6b") 2141 | .attr("width", 32) 2142 | .attr("height", 10) 2143 | .on("mouseover", function(d) { 2144 | tooltip.html("32% Female Dialogue"); 2145 | tooltip.style("visibility", "visible"); 2146 | }) 2147 | .on("mousemove", mousemove) 2148 | .on("mouseout", mouseout); 2149 | 2150 | 2151 | var iconC = svg.append("text") 2152 | .attr("x",83) 2153 | .attr("y", (height * (2/3) + 55)) 2154 | .attr("font-family","FontAwesome") 2155 | .attr("font-size", 16) 2156 | .attr("fill", "darkgray") 2157 | .text(function(d) { return '\uf183'; }); 2158 | 2159 | var iconW = svg.append("text") 2160 | .attr("x", 80) 2161 | .attr("y", (height * (2/3) + 75)) 2162 | .attr("font-family", "FontAwesome") 2163 | .attr("font-size", 14) 2164 | .attr("fill", "darkgray") 2165 | .text(function(d) { return '\uf075'; }) 2166 | 2167 | var movie = svg.append("text") 2168 | .attr("class", "titles") 2169 | .attr("x", width/2) 2170 | .attr("y", (height * (2/3))) 2171 | .style("text-anchor", "middle") 2172 | .attr("font-family", 'Quattrocento') 2173 | .text("Fantastic Beasts") 2174 | 2175 | var gross = svg.append("text") 2176 | .attr("class", "titles") 2177 | .attr("x", width/2) 2178 | .attr("y", (height * (2/3) + 25)) 2179 | .style("text-anchor", "middle") 2180 | .attr("font-family", 'Quattrocento Sans') 2181 | .text("$778,465,796") 2182 | 2183 | var fifty = svg.append("text") 2184 | .attr("class", "titles") 2185 | .attr("x", width/2) 2186 | .attr("y", (height - 5)) 2187 | .style("text-anchor", "middle") 2188 | .attr("font-family", 'Quattrocento Sans') 2189 | .attr("font-size", 9) 2190 | .attr("fill", "darkgray") 2191 | .text("50") 2192 | 2193 | 2194 | simulation.nodes(datapoints) 2195 | .on('tick', ticked) 2196 | 2197 | 2198 | function ticked() { 2199 | circles 2200 | .attr("cx", function(d) { 2201 | return d.x 2202 | }) 2203 | .attr("cy", function(d) { 2204 | return d.y 2205 | }) 2206 | } 2207 | } 2208 | })(); 2209 | 2210 | 2211 | 2212 | 2213 | 2214 | 2215 | (function() { 2216 | var width = 300, 2217 | height = 300; 2218 | 2219 | var svg = d3.select("#chart") 2220 | .append("svg") 2221 | .attr("height", height) 2222 | .attr("width", width) 2223 | .append("g") 2224 | .attr("transform", "translate(0,0)") 2225 | 2226 | var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) 2227 | 2228 | var forceXSplit = d3.forceX(d => width * (d.Gender === "male" ? 0.3 : 0.7)) 2229 | .strength(0.2); 2230 | 2231 | var forceXCombine = d3.forceX((width)/2).strength(0.1) 2232 | 2233 | var forceCollide = d3.forceCollide(function(d){ 2234 | return radiusScale(d.Total_Words) + 1 2235 | }) 2236 | .iterations(10); 2237 | 2238 | var simulation = d3.forceSimulation() 2239 | .force("x", forceXCombine) 2240 | .force("y", d3.forceY((height / 3) + 10).strength(0.15)) 2241 | .force("collide", forceCollide) 2242 | 2243 | var tooltip = d3.select("body") 2244 | .append("div") 2245 | .style("position", "absolute") 2246 | .style("z-index", "20") 2247 | .style("visibility", "hidden") 2248 | .style("color", "white") 2249 | .style("padding", "8px") 2250 | .style("background-color", "darkgray") 2251 | .style("border-radius", "6px") 2252 | .style("font", "11") 2253 | .style("font-family", "Quattrocento Sans") 2254 | .style("text-anchor", "middle") 2255 | .text(""); 2256 | 2257 | 2258 | 2259 | d3.queue() 2260 | .defer(d3.csv, "SuicideSquad.csv") 2261 | .await(ready) 2262 | 2263 | 2264 | function ready (error, datapoints) { 2265 | datapoints.forEach(d => d.Total_Words = +d.Total_Words); 2266 | 2267 | var mousemove = function() { 2268 | return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); 2269 | } 2270 | 2271 | var mouseout = function(){return tooltip.style("visibility", "hidden");} 2272 | 2273 | var circles = svg.selectAll(".Character") 2274 | .data(datapoints) 2275 | .enter().append("circle") 2276 | .attr("class", "Character") 2277 | .attr("r", function(d){ 2278 | return radiusScale(d.Total_Words) 2279 | }) 2280 | .style("fill", d => d.Gender === "male" ? "#3b3f93" : "#ff4a6b") 2281 | .on("mouseover", function(d) { 2282 | tooltip.html(d.Character + "

Words Spoken: " + d.Total_Words); 2283 | tooltip.style("visibility", "visible"); 2284 | }) 2285 | .on("mousemove", mousemove) 2286 | .on("mouseout", mouseout); 2287 | 2288 | 2289 | 2290 | /// Adding Toggle Switches 2291 | 2292 | var onClick = function(){ 2293 | simulation 2294 | .force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force 2295 | .alpha(0.7) // 2. Reheat 2296 | .restart(); // 3. Restart 2297 | setAtRight(!atRight); 2298 | } 2299 | 2300 | var atRight = true 2301 | 2302 | var rect = svg.append("rect") 2303 | .attr("x", 7) 2304 | .attr("y", 7) 2305 | .attr("rx", 22) 2306 | .attr("ry", 22) 2307 | .style("fill", "lightgray") 2308 | .attr("width", 64) 2309 | .attr("height", 40) 2310 | .on("click", onClick) 2311 | 2312 | var circle = svg.append("circle") 2313 | .attr("cx", 27) 2314 | .attr("cy", 27) 2315 | .attr("r", 16) 2316 | .style("fill", "white") 2317 | .on("click", onClick) 2318 | 2319 | 2320 | var setAtRight = function(newValue) { 2321 | atRight = newValue; 2322 | circle.transition().duration(250) 2323 | .attr("cx", (atRight? (27) : (51))) 2324 | .style("fill", "white"); 2325 | rect.transition().duration(250) 2326 | .style("fill", atRight? "lightgray" : "#ff4a6b"); 2327 | }; 2328 | 2329 | 2330 | var res = { 2331 | 'getValue': function() { return atRight; }, 2332 | 'setValue': setAtRight, 2333 | 'remove': function() { circle.remove(); } 2334 | }; 2335 | 2336 | 2337 | 2338 | var line = svg.append("line") 2339 | .style("stroke", "darkgray") 2340 | .attr("x1", width/2) 2341 | .attr("y1", 235) 2342 | .attr("x2", width/2) 2343 | .attr("y2", 285); 2344 | 2345 | var maleCharacters = svg.append("rect") 2346 | .attr("x", 100) 2347 | .attr("y", (height * (2/3) + 45)) 2348 | .style("fill", "#3b3f93") 2349 | .attr("width", 78) 2350 | .attr("height", 10) 2351 | .on("mouseover", function(d) { 2352 | tooltip.html("78% Male Characters"); 2353 | tooltip.style("visibility", "visible"); 2354 | }) 2355 | .on("mousemove", mousemove) 2356 | .on("mouseout", mouseout); 2357 | 2358 | var femaleCharacters = svg.append("rect") 2359 | .attr("x", 178) 2360 | .attr("y", (height * (2/3) + 45)) 2361 | .style("fill", "#ff4a6b") 2362 | .attr("width", 22) 2363 | .attr("height", 10) 2364 | .on("mouseover", function(d) { 2365 | tooltip.html("22% Female Characters"); 2366 | tooltip.style("visibility", "visible"); 2367 | }) 2368 | .on("mousemove", mousemove) 2369 | .on("mouseout", mouseout); 2370 | 2371 | var maleWords = svg.append("rect") 2372 | .attr("x", 100) 2373 | .attr("y", (height * (2/3) + 65)) 2374 | .style("fill", "#3b3f93") 2375 | .attr("width", 68) 2376 | .attr("height", 10) 2377 | .on("mouseover", function(d) { 2378 | tooltip.html("68% Male Dialogue"); 2379 | tooltip.style("visibility", "visible"); 2380 | }) 2381 | .on("mousemove", mousemove) 2382 | .on("mouseout", mouseout); 2383 | 2384 | var femaleWords = svg.append("rect") 2385 | .attr("x", 168) 2386 | .attr("y", (height * (2/3) + 65)) 2387 | .style("fill", "#ff4a6b") 2388 | .attr("width", 32) 2389 | .attr("height", 10) 2390 | .on("mouseover", function(d) { 2391 | tooltip.html("32% Female Dialogue"); 2392 | tooltip.style("visibility", "visible"); 2393 | }) 2394 | .on("mousemove", mousemove) 2395 | .on("mouseout", mouseout); 2396 | 2397 | 2398 | var iconC = svg.append("text") 2399 | .attr("x",83) 2400 | .attr("y", (height * (2/3) + 55)) 2401 | .attr("font-family","FontAwesome") 2402 | .attr("font-size", 16) 2403 | .attr("fill", "darkgray") 2404 | .text(function(d) { return '\uf183'; }); 2405 | 2406 | var iconW = svg.append("text") 2407 | .attr("x", 80) 2408 | .attr("y", (height * (2/3) + 75)) 2409 | .attr("font-family", "FontAwesome") 2410 | .attr("font-size", 14) 2411 | .attr("fill", "darkgray") 2412 | .text(function(d) { return '\uf075'; }) 2413 | 2414 | var movie = svg.append("text") 2415 | .attr("class", "titles") 2416 | .attr("x", width/2) 2417 | .attr("y", (height * (2/3))) 2418 | .style("text-anchor", "middle") 2419 | .attr("font-family", 'Quattrocento') 2420 | .text("Suicide Squad") 2421 | 2422 | var gross = svg.append("text") 2423 | .attr("class", "titles") 2424 | .attr("x", width/2) 2425 | .attr("y", (height * (2/3) + 25)) 2426 | .style("text-anchor", "middle") 2427 | .attr("font-family", 'Quattrocento Sans') 2428 | .text("$746,100,054") 2429 | 2430 | var fifty = svg.append("text") 2431 | .attr("class", "titles") 2432 | .attr("x", width/2) 2433 | .attr("y", (height - 5)) 2434 | .style("text-anchor", "middle") 2435 | .attr("font-family", 'Quattrocento Sans') 2436 | .attr("font-size", 9) 2437 | .attr("fill", "darkgray") 2438 | .text("50") 2439 | 2440 | 2441 | simulation.nodes(datapoints) 2442 | .on('tick', ticked) 2443 | 2444 | 2445 | function ticked() { 2446 | circles 2447 | .attr("cx", function(d) { 2448 | return d.x 2449 | }) 2450 | .attr("cy", function(d) { 2451 | return d.y 2452 | }) 2453 | } 2454 | } 2455 | })(); 2456 | 2457 | 2458 | 2459 | 2460 | 2461 | 2462 | 2463 | --------------------------------------------------------------------------------