-
Notifications
You must be signed in to change notification settings - Fork 0
/
twentytens.html
146 lines (135 loc) · 5.74 KB
/
twentytens.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="./javascript/networkx.js"></script>
<script src="./javascript/graph.js"></script>
<!-- CSS taken from W3 Schools templates -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./tropes.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<!-- -->
</head>
<body>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:24px 16px">
<h1>Twenty Tens<br />Horror Movie<br />Trope Graph</h1>
</header>
<div class="w3-container w3-red w3-center" style="padding:16px">
<a id="nav_item" href="./index.html">Home</a>
<a id="nav_item" href="./sixties.html">1960's</a>
<a id="nav_item" href="./seventies.html">1970's</a>
<a id="nav_item" href="./eighties.html">1980's</a>
<a id="nav_item" href="./nineties.html">1990's</a>
<a id="nav_item" href="./twothousands.html">2000's</a>
<a id="nav_item" href="./twentytens.html">2010's</a>
</div>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-one">
<h1>Twenty Tens Trope Graph</h1>
<div id="canvas">
<div id="legend">
<img id="legend_graphic" src="./assets/legend.png" alt="Legends for coloring of the trope graph">
</div>
</div>
</div>
</div>
<div class="w3-content">
<div class="w3-half">
<h5 class="w3-red" style="border-radius: 10px;">Selected Node Display</h5>
<div id='current_node'></div>
</div>
<div class="w3-half">
<h3>The Data</h3>
<p>
Above is a graph of the horror movies and horror movie tropes
that relate to the top 50 movies released between 2010 - 2017.
The "Nothing is Scarier" trope rises to the most used place,
as movie creators try to exercise the "show, not tell" rule
of fear. Much to audiences' disappointment, this trope's partner,
the "Jump Scare" trope also lept up to second place in the
genre.
</p>
<hr>
<p>Twenty Tens graph
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/twentytens_graph.json">json file.</a>
</p>
<p>Twenty Tens IMDB movie ratings
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/twentytens/movie_list.json">json file.</a>
</p>
<p>Twenty Tens movie tropes per movie
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/twentytens/">json file.</a>
</p>
</div>
</div>
<script>
generate_graph("./tropes/twentytens_graph.json");
</script>
</div>
<!-- Second Grid -->
<div class="w3-row-padding w3-padding-64 w3-container w3-light-grey">
<div class="w3-content">
<h3>The Results</h3>
<div class="w3-half">
<p>
Most Valued Trope: <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/NothingIsScarier">NothingIsScarier</a>
<br />
Most Used Trope: <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/NothingIsScarier">NothingIsScarier</a>
<br />
Movie with the most tropes: <a href="http://www.imdb.com/title/tt0054215/">ParanormalActivity3</a>
<br />
Highest Grossing Film: <a href="http://www.imdb.com/title/tt0054215/">WorldWarZ</a>
<br />
Total number of tropes used: 175
<p>List of movies using the most valued Trope:</p>
<ul class='valued-tropes'>
<script>
var tropes = ['TheConjuring2', 'AQuietPlace', 'Sinister', 'TheShallows',
'ThePurge', 'DonTBreathe', 'TheConjuring', 'Insidious',
'ThePurgeAnarchy', 'ParanormalActivity4', 'AlienCovenant',
'ParanormalActivity3', 'AnnabelleCreation', 'InsidiousChapter3',
'WorldWarZ', 'InsidiousChapter2', 'ParanormalActivity2',
'TheWomanInBlack']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.valued-tropes').html( htmlString );
</script>
</ul>
</p>
</div>
<div class="w3-half">
<p>List of tropes from the highest grossing film:</p>
<ul class="grossing-tropes">
<script>
var tropes = ['AbsurdlyIneffectiveBarricade', 'JumpScare',
'GoryDiscretionShot', 'LifeOrLimbDecision',
'MeaningfulBackgroundEvent', 'NothingIsScarier',
'NotUsingTheZWord', 'ZombieApocalypse',
'RemovingTheHeadOrDestroyingTheBrain', 'RunOrDie']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.grossing-tropes').html( htmlString );
</script>
</ul>
</div>
</div>
</div>
</body>
</html>