Skip to content

Instantly share code, notes, and snippets.

@ProQuestionAsker
Created January 11, 2017 09:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ProQuestionAsker/b4b95d4ada53b724280e6b37f1bc66c7 to your computer and use it in GitHub Desktop.
Save ProQuestionAsker/b4b95d4ada53b724280e6b37f1bc66c7 to your computer and use it in GitHub Desktop.
<!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>
(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
})
}
}
})();
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