Created
January 11, 2017 09:35
-
-
Save ProQuestionAsker/b4b95d4ada53b724280e6b37f1bc66c7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<!--The browser can use non-English-language characters (...kind of) --> | |
<link href="style.css" rel="stylesheet"> | |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
<link href="https://fonts.googleapis.com/css?family=Quattrocento:700|Quattrocento+Sans" rel="stylesheet"> | |
<meta charset="utf-8"> | |
<style> | |
* | |
svg { | |
background: #f1f1f1; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<!-- This is D3 our graphing library --> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<!--Now we include our actual visualization --> | |
<script src="movie_bubbles2.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var width = 300, | |
height = 300; | |
var svg = d3.select("#chart") | |
.append("svg") | |
.attr("height", height) | |
.attr("width", width) | |
.append("g") | |
.attr("transform", "translate(0,0)") | |
var radiusScale = d3.scaleSqrt().domain([1, 4692]).range([1, 40]) | |
var forceXSplit = d3.forceX(d => width * (d.Sex === "male" ? 0.3 : 0.7)) | |
.strength(0.2); | |
var forceXCombine = d3.forceX((width)/2).strength(0.1) | |
var forceCollide = d3.forceCollide(function(d){ | |
return radiusScale(d.Total_Words) + 1 | |
}) | |
.iterations(10); | |
var simulation = d3.forceSimulation() | |
.force("x", forceXCombine) | |
.force("y", d3.forceY((height / 3) + 10).strength(0.15)) | |
.force("collide", forceCollide) | |
var tooltip = d3.select("body") | |
.append("div") | |
.style("position", "absolute") | |
.style("z-index", "20") | |
.style("visibility", "hidden") | |
.style("color", "white") | |
.style("padding", "8px") | |
.style("background-color", "darkgray") | |
.style("border-radius", "6px") | |
.style("font", "11") | |
.style("font-family", "Quattrocento Sans") | |
.style("text-anchor", "middle") | |
.text(""); | |
d3.queue() | |
.defer(d3.csv, "RogueOne.csv") | |
.await(ready) | |
function ready (error, datapoints) { | |
datapoints.forEach(d => d.Total_Words = +d.Total_Words); | |
var mousemove = function() { | |
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px"); | |
} | |
var mouseout = function(){return tooltip.style("visibility", "hidden");} | |
var circles = svg.selectAll(".Character") | |
.data(datapoints) | |
.enter().append("circle") | |
.attr("class", "Character") | |
.attr("r", function(d){ | |
return radiusScale(d.Total_Words) | |
}) | |
.style("fill", d => d.Sex === "male" ? "#3b3f93" : "#ff4a6b") | |
.on("mouseover", function(d) { | |
tooltip.html(d.Character + "<br><br> Words Spoken: " + d.Total_Words); | |
tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
/// Adding Toggle Switches | |
var onClick = function(){ | |
simulation | |
.force("x", atRight ? forceXSplit : forceXCombine) // 1. Set the force | |
.alpha(0.7) // 2. Reheat | |
.restart(); // 3. Restart | |
setAtRight(!atRight); | |
} | |
var atRight = true | |
var rect = svg.append("rect") | |
.attr("x", 7) | |
.attr("y", 7) | |
.attr("rx", 22) | |
.attr("ry", 22) | |
.style("fill", "lightgray") | |
.attr("width", 64) | |
.attr("height", 40) | |
.on("click", onClick) | |
var circle = svg.append("circle") | |
.attr("cx", 27) | |
.attr("cy", 27) | |
.attr("r", 16) | |
.style("fill", "white") | |
.on("click", onClick) | |
var setAtRight = function(newValue) { | |
atRight = newValue; | |
circle.transition().duration(250) | |
.attr("cx", (atRight? (27) : (51))) | |
.style("fill", "white"); | |
rect.transition().duration(250) | |
.style("fill", atRight? "lightgray" : "#ff4a6b"); | |
}; | |
var res = { | |
'getValue': function() { return atRight; }, | |
'setValue': setAtRight, | |
'remove': function() { circle.remove(); } | |
}; | |
var line = svg.append("line") | |
.style("stroke", "darkgray") | |
.attr("x1", width/2) | |
.attr("y1", 235) | |
.attr("x2", width/2) | |
.attr("y2", 285); | |
var maleCharacters = svg.append("rect") | |
.attr("x", 100) | |
.attr("y", (height * (2/3) + 45)) | |
.style("fill", "#3b3f93") | |
.attr("width", 91) | |
.attr("height", 10) | |
.on("mouseover", function(d) { | |
tooltip.html("91% Male Characters"); | |
tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
var femaleCharacters = svg.append("rect") | |
.attr("x", 191) | |
.attr("y", (height * (2/3) + 45)) | |
.style("fill", "#ff4a6b") | |
.attr("width", 9) | |
.attr("height", 10) | |
.on("mouseover", function(d) { | |
tooltip.html("9% Female Characters"); | |
tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
var maleWords = svg.append("rect") | |
.attr("x", 100) | |
.attr("y", (height * (2/3) + 65)) | |
.style("fill", "#3b3f93") | |
.attr("width", 83) | |
.attr("height", 10) | |
.on("mouseover", function(d) { | |
tooltip.html("83% Male Dialogue"); | |
tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
var femaleWords = svg.append("rect") | |
.attr("x", 183) | |
.attr("y", (height * (2/3) + 65)) | |
.style("fill", "#ff4a6b") | |
.attr("width", 17) | |
.attr("height", 10) | |
.on("mouseover", function(d) { | |
tooltip.html("17% Female Dialogue"); | |
tooltip.style("visibility", "visible"); | |
}) | |
.on("mousemove", mousemove) | |
.on("mouseout", mouseout); | |
var iconC = svg.append("text") | |
.attr("x",83) | |
.attr("y", (height * (2/3) + 55)) | |
.attr("font-family","FontAwesome") | |
.attr("font-size", 16) | |
.attr("fill", "darkgray") | |
.text(function(d) { return '\uf183'; }); | |
var iconW = svg.append("text") | |
.attr("x", 80) | |
.attr("y", (height * (2/3) + 75)) | |
.attr("font-family", "FontAwesome") | |
.attr("font-size", 14) | |
.attr("fill", "darkgray") | |
.text(function(d) { return '\uf075'; }) | |
var movie = svg.append("text") | |
.attr("class", "titles") | |
.attr("x", width/2) | |
.attr("y", (height * (2/3))) | |
.style("text-anchor", "middle") | |
.attr("font-family", 'Quattrocento') | |
.text("Rogue One") | |
var gross = svg.append("text") | |
.attr("class", "titles") | |
.attr("x", width/2) | |
.attr("y", (height * (2/3) + 25)) | |
.style("text-anchor", "middle") | |
.attr("font-family", 'Quattrocento Sans') | |
.text("$829,107,837") | |
var fifty = svg.append("text") | |
.attr("class", "titles") | |
.attr("x", width/2) | |
.attr("y", (height - 5)) | |
.style("text-anchor", "middle") | |
.attr("font-family", 'Quattrocento Sans') | |
.attr("font-size", 9) | |
.attr("fill", "darkgray") | |
.text("50") | |
simulation.nodes(datapoints) | |
.on('tick', ticked) | |
function ticked() { | |
circles | |
.attr("cx", function(d) { | |
return d.x | |
}) | |
.attr("cy", function(d) { | |
return d.y | |
}) | |
} | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Character | Sex | speaking_turns | Total_Words | radius | diameter | ||
---|---|---|---|---|---|---|---|
1 | Admiral Raddus | male | 13 | 128 | 6.38307648642292 | 12.7661529728458 | |
2 | Announcer | male | 3 | 46 | 3.82651992866291 | 7.65303985732581 | |
3 | Antenna Computer | female | 3 | 19 | 2.45924537968297 | 4.91849075936593 | |
4 | Bail Organa | male | 5 | 83 | 5.14001172695692 | 10.2800234539138 | |
5 | Baze Malbus | male | 32 | 168 | 7.31273279143145 | 14.6254655828629 | |
6 | Blue Squadron 1 | male | 2 | 5 | 1.26156626101008 | 2.52313252202016 | |
7 | Blue Squadron 2 | male | 1 | 3 | 0.97720502380584 | 1.95441004761168 | |
8 | Blue Squadron 3 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
9 | Blue Squadron 4 | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 | |
10 | Bodhi Rook | male | 60 | 820 | 16.1559310060024 | 32.3118620120047 | |
11 | C3PO | male | 1 | 13 | 2.03421447256411 | 4.06842894512822 | |
12 | Captain Antilles | male | 1 | 1 | 0.564189583547756 | 1.12837916709551 | |
13 | Cassian | male | 140 | 1355 | 20.7680017281162 | 41.5360034562323 | |
14 | Chirrut Imwe | male | 36 | 420 | 11.5624457705622 | 23.1248915411244 | |
15 | Corvette 5 | male | 1 | 12 | 1.95441004761168 | 3.90882009522336 | |
16 | Dr. Cornelius Evazan | male | 1 | 5 | 1.26156626101008 | 2.52313252202016 | |
17 | Edrio | male | 4 | 25 | 2.82094791773878 | 5.64189583547756 | |
18 | Engineers | male | 2 | 5 | 1.26156626101008 | 2.52313252202016 | |
19 | Flight Control | male | 3 | 42 | 3.65636639571573 | 7.31273279143145 | |
20 | Galen | male | 21 | 520 | 12.8655019651614 | 25.7310039303227 | |
21 | Gate Control | male | 5 | 40 | 3.56824823230554 | 7.13649646461108 | |
22 | General Dodonna | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
23 | General Draven | male | 11 | 206 | 8.09764388904951 | 16.195287778099 | |
24 | General Merrick | male | 5 | 53 | 4.10736216661508 | 8.21472433323015 | |
25 | General Ramda | male | 7 | 43 | 3.69963851016596 | 7.39927702033192 | |
26 | Girl's Mother | female | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
27 | Gold Leader | male | 3 | 33 | 3.24102240721429 | 6.48204481442857 | |
28 | Governor Tarkin | male | 16 | 284 | 9.50789186287878 | 19.0157837257576 | |
29 | Imperial Assistant | male | 1 | 17 | 2.32621324584064 | 4.65242649168128 | |
30 | Imperial Assistant 2 | male | 6 | 27 | 2.93161507141752 | 5.86323014283504 | |
31 | Imperial Assistant 3 | male | 2 | 18 | 2.3936536824086 | 4.78730736481719 | |
32 | Imperial Controller | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
33 | Imperial Mission Control | male | 2 | 16 | 2.25675833419103 | 4.51351666838205 | |
34 | Imperial Mission Control 2 | male | 2 | 21 | 2.58544147291321 | 5.17088294582641 | |
35 | Imperial Officer | male | 4 | 13 | 2.03421447256411 | 4.06842894512822 | |
36 | Imperial Officer 2 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
37 | Imperial Officer 3 | male | 1 | 5 | 1.26156626101008 | 2.52313252202016 | |
38 | Imperial Pilot | male | 2 | 6 | 1.38197659788534 | 2.76395319577068 | |
39 | Imperial Pilot 2 | male | 1 | 5 | 1.26156626101008 | 2.52313252202016 | |
40 | Imperial Soldiers | male | 1 | 1 | 0.564189583547756 | 1.12837916709551 | |
41 | Inspector | male | 2 | 5 | 1.26156626101008 | 2.52313252202016 | |
42 | Jyn | female | 114 | 1045 | 18.2382518642018 | 36.4765037284036 | |
43 | K2SO | male | 70 | 612 | 13.9572794750438 | 27.9145589500877 | |
44 | Krennic | male | 52 | 504 | 12.6660247369343 | 25.3320494738685 | |
45 | Leia | female | 1 | 1 | 0.564189583547756 | 1.12837916709551 | |
46 | Lieutenant Sefla | male | 7 | 46 | 3.82651992866291 | 7.65303985732581 | |
47 | Lyra | female | 8 | 34 | 3.28976232123977 | 6.57952464247954 | |
48 | Mon Mothma | female | 13 | 169 | 7.33446458612083 | 14.6689291722417 | |
49 | Pad 12 | male | 2 | 20 | 2.52313252202016 | 5.04626504404032 | |
50 | Prisoner | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
51 | Rebel Announcer | male | 1 | 42 | 3.65636639571573 | 7.31273279143145 | |
52 | Rebel Army | male | 7 | 27 | 2.93161507141752 | 5.86323014283504 | |
53 | Rebel Fighter | male | 1 | 9 | 1.69256875064327 | 3.38513750128654 | |
54 | Rebel Officer | male | 6 | 44 | 3.74241031850956 | 7.48482063701911 | |
55 | Rebel Officer 2 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
56 | Rebel Pilot | male | 2 | 5 | 1.26156626101008 | 2.52313252202016 | |
57 | Rebel Pilot (Female) | female | 2 | 13 | 2.03421447256411 | 4.06842894512822 | |
58 | Rebel Pilot (Female) 2 | female | 2 | 8 | 1.59576912160573 | 3.19153824321146 | |
59 | Rebel Pilot (Female) 3 | female | 1 | 8 | 1.59576912160573 | 3.19153824321146 | |
60 | Rebel Pilot 2 | male | 1 | 7 | 1.49270533036046 | 2.98541066072092 | |
61 | Rebel Pilot 3 | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 | |
62 | Rebel Pilot 4 | male | 1 | 3 | 0.97720502380584 | 1.95441004761168 | |
63 | Rebel Pilot 5 | male | 1 | 3 | 0.97720502380584 | 1.95441004761168 | |
64 | Rebel Soldier | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 | |
65 | Rebel Soldier 1 | male | 2 | 4 | 1.12837916709551 | 2.25675833419103 | |
66 | Rebel Soldier 10 | male | 1 | 23 | 2.705758189903 | 5.41151637980601 | |
67 | Rebel Soldier 2 | male | 6 | 65 | 4.54864184146723 | 9.09728368293446 | |
68 | Rebel Soldier 3 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
69 | Rebel Soldier 4 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
70 | Rebel Soldier 5 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
71 | Rebel Soldier 6 | male | 4 | 19 | 2.45924537968297 | 4.91849075936593 | |
72 | Rebel Soldier 7 | male | 3 | 7 | 1.49270533036046 | 2.98541066072092 | |
73 | Rebel Soldier 8 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
74 | Rebel Soldier 9 | male | 1 | 1 | 0.564189583547756 | 1.12837916709551 | |
75 | Red 5 | male | 1 | 16 | 2.25675833419103 | 4.51351666838205 | |
76 | Red Leader | male | 3 | 20 | 2.52313252202016 | 5.04626504404032 | |
77 | Saw Gerrera | male | 24 | 238 | 8.70389297451101 | 17.407785949022 | |
78 | Senator Jebel | male | 4 | 44 | 3.74241031850956 | 7.48482063701911 | |
79 | Senator Pamlo | female | 4 | 46 | 3.82651992866291 | 7.65303985732581 | |
80 | Senator Vaspar | male | 4 | 28 | 2.98541066072092 | 5.97082132144185 | |
81 | Sergeant Melshi | male | 6 | 50 | 3.98942280401433 | 7.97884560802865 | |
82 | Ship Computer | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
83 | Stormtrooper 1 | male | 1 | 9 | 1.69256875064327 | 3.38513750128654 | |
84 | Stormtrooper 10 | male | 8 | 47 | 3.86788891394752 | 7.73577782789505 | |
85 | Stormtrooper 11 | male | 2 | 7 | 1.49270533036046 | 2.98541066072092 | |
86 | Stormtrooper 12 | male | 2 | 14 | 2.11100412282238 | 4.22200824564475 | |
87 | Stormtrooper 13 | male | 2 | 9 | 1.69256875064327 | 3.38513750128654 | |
88 | Stormtrooper 14 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
89 | Stormtrooper 15 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
90 | Stormtrooper 16 | male | 1 | 2 | 0.797884560802865 | 1.59576912160573 | |
91 | Stormtrooper 17 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
92 | Stormtrooper 18 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
93 | Stormtrooper 2 | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
94 | Stormtrooper 3 | male | 1 | 7 | 1.49270533036046 | 2.98541066072092 | |
95 | Stormtrooper 4 | male | 2 | 7 | 1.49270533036046 | 2.98541066072092 | |
96 | Stormtrooper 5 | male | 2 | 23 | 2.705758189903 | 5.41151637980601 | |
97 | Stormtrooper 6 | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 | |
98 | Stormtrooper 7 | male | 1 | 7 | 1.49270533036046 | 2.98541066072092 | |
99 | Stormtrooper 8 | male | 1 | 3 | 0.97720502380584 | 1.95441004761168 | |
100 | Stormtrooper 9 | male | 1 | 3 | 0.97720502380584 | 1.95441004761168 | |
101 | Technician | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 | |
102 | Tivik | male | 11 | 106 | 5.80868728160518 | 11.6173745632104 | |
103 | Unknown Senator | male | 1 | 4 | 1.12837916709551 | 2.25675833419103 | |
104 | Unknown Senator 2 | male | 1 | 5 | 1.26156626101008 | 2.52313252202016 | |
105 | Vader | male | 9 | 96 | 5.52790639154137 | 11.0558127830827 | |
106 | Vader's Assistant | male | 1 | 6 | 1.38197659788534 | 2.76395319577068 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment