-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathseventies.html
140 lines (130 loc) · 5.6 KB
/
seventies.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
<!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>Seventies <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>Seventies 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 1970 - 1979.
Currently, due to IMDB not having records for the gross earnings of the
top 37 - 50, we were only able to get data on the first 36 of these movies.
While this is a limited data set compared to the total number we were hoping to
look at, this era helps to define what this graph model looks like and provides
information on important and influential tropes from the beginning of horror films.
</p>
<hr>
<p>Seventies graph
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/seventies_graph.json">json file.</a>
</p>
<p>Seventies IMDB movie ratings
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/seventies/movie_list.json">json file.</a>
</p>
<p>Seventies movie tropes per movie
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/seventies/">json file.</a>
</p>
</div>
</div>
<script>
generate_graph("./tropes/seventies_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/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/tt0078748/?ref_=fn_al_tt_1">Alien</a>
<br />
Highest Grossing Film: <a href="http://www.imdb.com/title/tt0070047/?ref_=nv_sr_1">TheExorcist</a>
<br />
Total number of tropes used: 114
<p>List of movies using the most valued Trope:</p>
<ul class='valued-tropes'>
<script>
var tropes = ['InvasionOfTheBodySnatchers', 'WhenAStrangerCalls', 'Prophecy',
'TheOmen', 'Alien', 'Eraserhead', 'Halloween', 'TheTexasChainSawMassacre']
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 = ['CreepyChild', 'DaylightHorror', 'DemonicPossession',
'ExorcistHead', 'JumpScare', 'MedicalHorror', 'NightmareFuel',
'ReligiousHorror', 'VeryLooselyBasedOnATrueStory',
'UrbanLegends', 'FridgeHorror', 'AnyoneCanDie', 'FliesEqualsEvil']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.grossing-tropes').html( htmlString );
</script>
</ul>
</div>
</div>
</div>
</body>
</html>