-
Notifications
You must be signed in to change notification settings - Fork 0
/
eighties.html
146 lines (134 loc) · 5.79 KB
/
eighties.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>Eighties <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>Eighties 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 1980 - 1989.
This decade shows the prominence of the "Final Girl" trope, which
is featured in movies such as "Friday the 13th", the 11th
best-selling movie in the decade. We also see certain franchises
rise to popularity, such as the "Nightmare on Elm Street" franchise,
which released its first five movies in the decade.
</p>
<hr>
<p>Eighties graph
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/eighties_graph.json">json file.</a>
</p>
<p>Eighties IMDB movie ratings
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/eighties/movie_list.json">json file.</a>
</p>
<p>Eighties movie tropes per movie
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/eighties/">json file.</a>
</p>
</div>
</div>
<script>
generate_graph("./tropes/eighties_graph.json");
</script>
</div>
<!-- Third 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/FinalGirl">FinalGirl</a>
<br />
Most Used Trope: <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/FinalGirl">FinalGirl</a>
<br />
Movie with the most tropes: <a href="http://www.imdb.com/title/tt0080761/?ref_=fn_al_tt_2">FridayThe13Th</a>
<br />
Highest Grossing Film: <a href="http://www.imdb.com/title/tt0087363/?ref_=nv_sr_1">Gremlins</a>
<br />
Total number of tropes used: 154
<p>List of movies using the most valued Trope:</p>
<ul class='valued-tropes'>
<script>
var tropes = ['GraduationDay', 'ANightmareOnElmStreet4TheDreamMaster',
'FridayThe13ThPartIii', 'ANightmareOnElmStreet',
'ANightmareOnElmStreet3DreamWarriors', 'FridayThe13ThPart2',
'FridayThe13ThPartViiTheNewBlood', 'ANightmareOnElmStreet2FreddySRevenge',
'FridayThe13ThTheFinalChapter', 'FridayThe13Th',
'Halloween4TheReturnOfMichaelMyers', 'ANightmareOnElmStreet5TheDreamChild']
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 = ['HorrorDoesntSettleForSimpleTuesday',
'TheLittleShopThatWasntThereYesterday', 'NightmareFace',
'NothingIsScarier', 'FridgeHorror']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.grossing-tropes').html( htmlString );
</script>
</ul>
</div>
</div>
</div>
</body>
</html>