-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsixties.html
143 lines (131 loc) · 5.69 KB
/
sixties.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
<!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>Sixties <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>Sixties 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 1960 - 1969.
Currently, due to IMDB not having records for the gross earnings of the
top 14 - 50 movies and TvTropes only having records for 5 of those 13, we
were only able to get data on 5 of the movies released in this era. 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.
</p>
<hr>
<p>Sixties graph
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/sixties_graph.json">json file.</a>
</p>
<p>Sixties IMDB movie ratings
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/sixties/movie_list.json">json file.</a>
</p>
<p>Sixties movie tropes per movie
<a href="https://github.com/acpaquette/networks-sp/blob/master/tropes/sixties/">json file.</a>
</p>
</div>
</div>
<script>
generate_graph("./tropes/sixties_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/DevelopingDoomedCharacters">DevelopingDoomedCharacters</a>
<br />
Most Used Trope: <a href="http://tvtropes.org/pmwiki/pmwiki.php/Main/DevelopingDoomedCharacters">DevelopingDoomedCharacters</a>
<br />
Movie with the most tropes: <a href="http://www.imdb.com/title/tt0054215/">Psycho</a>
<br />
Highest Grossing Film: <a href="http://www.imdb.com/title/tt0054215/">Psycho</a>
<br />
Total number of tropes used: 48
<p>List of movies using the most valued Trope:</p>
<ul class='valued-tropes'>
<script>
var tropes = ['DraculaPrinceOfDarkness', 'Psycho', 'TheBirds']
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 = ['AnyoneCanDie', 'CreepyBasement', 'DaylightHorror',
'NothingIsScarier', 'KensingtonGore', 'DevelopingDoomedCharacters', 'FaceRevealingTurn', 'SerialKiller',
'FinalGirl', 'GoryDiscretionShot', 'HellHotel', 'InnOfNoReturn', 'JumpScare', 'MirrorScare',
'MummiesAtTheDinnerTable', 'PeekABooCorpse', 'RuleOfScary', 'SlasherMovie', 'SlashersPreferBlondes',
'SortingAlgorithmOfMortality', 'StayOnThePath', 'SurprisinglySuddenDeath', 'TaxidermyIsCreepy',
'TaxidermyTerror', 'VeryLooselyBasedOnATrueStory']
var htmlString = "";
tropes.forEach(function(trope){
htmlString += "<li>" + trope + "</li>";
});
$('.grossing-tropes').html( htmlString );
</script>
</ul>
</div>
</div>
</div>
</body>
</html>