-
Notifications
You must be signed in to change notification settings - Fork 0
/
nineties.html
144 lines (132 loc) · 5.54 KB
/
nineties.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
<!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>Nineties <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>Nineties 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 1990 - 1999.
The top movie from this decade was "The Blair Witch Project",
which shocked audiences with new marketing strategies that had
the public wondering if the movies was real or not. The "Body
Horror" trope is the most popular in this decade, as special
effects become more realistic, and slasher movies overwhelmed
the genre.
</p>
<hr>
<p>Nineties graph
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/nineties_graph.json">json file.</a>
</p>
<p>Nineties IMDB movie ratings
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/nineties/movie_list.json">json file.</a>
</p>
<p>Nineties movie tropes per movie
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/nineties/">json file.</a>
</p>
</div>
</div>
<script>
generate_graph("./tropes/nineties_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/BodyHorror">BodyHorror</a>
<br />
Most Used Trope: <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/BodyHorror">BodyHorror</a>
<br />
Movie with the most tropes: <a href="http://www.imdb.com/title/tt0155975/?ref_=nv_sr_3">Psycho</a>
<br />
Highest Grossing Film: <a href="http://www.imdb.com/title/tt0185937/?ref_=nv_sr_1">TheBlairWitchProject</a>
<br />
Total number of tropes used: 167
<p>List of movies using the most valued Trope:</p>
<ul class='valued-tropes'>
<script>
var tropes = ['DeathBecomesHer', 'Species', 'JacobSLadder',
'EventHorizon', 'BrideOfChucky', 'SleepyHollow',
'AlienResurrection', 'TheFaculty', 'FromDuskTillDawn']
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 = ['ApocalypticLog', 'EldritchAbomination', 'BloodyHandprint',
'CreepyChild', 'CreepyDoll', 'DaylightHorror', 'FridgeHorror',
'DontGoInTheWoods', 'EldritchLocation', 'GhostStory',
'NothingIsScarier', 'DemonicPossession']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.grossing-tropes').html( htmlString );
</script>
</ul>
</div>
</div>
</div>
</body>
</html>