generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
312 lines (305 loc) · 11.5 KB
/
index.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="data visualisation site for movie data" />
<meta
name="keywords"
content="chartjs d3 data data-visual data-visualistion"
/>
<meta name="author" content="Shane Donlon" />
<!-- favicon -->
<link
rel="shortcut icon"
href="assets/images/favicon.ico"
type="image/x-icon"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<!-- css -->
<link rel="stylesheet" href="assets/css/reset.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>The Movie Breakdown</title>
</head>
<body>
<header>
<!-- screen reader / tab only -->
<a href="#main" class="visually-hidden link">skip to content</a>
<div class="content-wrapper">
<div class="title-wrapper">
<h1 class="h1">Movie Dashboard</h1>
<h2 class="h2 data-source-h2">
Data Source:
<a
class="link data-source-link link"
title="Open Kaggle Website in new tab"
href="https://www.kaggle.com/datasets/tmdb/tmdb-movie-metadata"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit the Kaggle Website for the source data (opens in a new tab)"
>Kaggle</a
>
</h2>
</div>
<!-- end of title -wrapper -->
</div>
<!-- end of content wrapper -->
</header>
<div class="content-wrapper">
<div class="error-wrapper"></div>
<div class="loader-wrapper">
<span class="loader" aria-label="loading" aria-live="polite"
>L ading</span
>
</div>
<main id="main">
<section
class="accessibility-tables flex bg-secondary"
tabindex="0"
aria-label="Use the below table to toggle the data tables"
>
<h2>Toggle accessibility tables</h2>
<div class="radio-wrapper-shown">
<label for="tablesShown" class="tablesShownLabel">On</label>
<input
type="radio"
name="tablesShown"
id="tablesShown"
class="tablesShown"
/>
</div>
<!-- end of radio wrapper shown -->
<div class="radio-wrapper-hidden display-none">
<label for="tablesHidden" class="tablesHiddenLabel">Off</label>
<input
type="radio"
name="tablesHidden"
id="tablesHidden"
class="tablesHidden"
/>
</div>
<!-- end of radio wrapper hidden -->
<button class="savePreferences btn">Save</button>
</section>
<!-- mby= moviesbyyear -->
<div class="grid-mby">
<section
class="bg-secondary mby-chart-section"
aria-label="Displays movies by year breakdown, on slider change, movies by genre for selected year"
>
<img
src="assets/images/monster.png"
alt="Cartoon image of monster"
class="monster-img"
aria-hidden="true"
/>
<div class="chart-wrappermby chart-wrapper">
<div class="input-wrapper">
<label for="mbySlider" class="label"
>Use the slider to drill-down the data
</label>
<div class="flex">
<input
type="range"
name="mbySlider"
id="mbySlider"
class="mbySlider inputSlider"
step="1"
aria-label="Use keyboard or mouse to filter data by year"
/>
<button
class="reset resetmoviesByYearChart btn"
aria-label="reset data"
>
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
</button>
</div>
<!-- end flex -->
<p class="sliderValueP display-none sliderValueParagraph">
Year: <output id="mbySlidervalue"></output>
</p>
</div>
<!-- end input wrapper -->
<div class="mby-table-wrapper table-wrapper"></div>
<div class="canvas-wrapper-moviesByYearChart canvas-wrapper">
<canvas id="moviesByYearChart" role="presentation"></canvas>
</div>
</div>
<!-- end of chart -wrapper -->
</section>
<section
aria-label="Cards dispalying high level data"
class="align-self-center"
>
<div class="grid-gtc">
<div class="card">
<i class="fa-solid fa-clapperboard" aria-hidden="true"></i>
<h3 class="card-title h3">
Number of movies: <br />
<span class="card-span number-of-movies-span"></span>
</h3>
</div>
<!-- end card -->
<div class="card">
<i class="fa-solid fa-film" aria-hidden="true"></i>
<h3 class="card-title h3">
<abbr title="average">Avg</abbr> Length in minutes:
<br />
<span class="card-span avg-runtime-span"></span>
</h3>
</div>
<!-- end card -->
<div class="card">
<i class="fa-solid fa-hands-clapping" aria-hidden="true"></i>
<h3 class="card-title h3">
Number of movies above vote
<abbr title="average">avg</abbr> 8:
<br />
<span class="card-span avg-vote-span"></span>
</h3>
</div>
<!-- end card -->
<div class="card">
<i class="fa-solid fa-chart-simple" aria-hidden="true"></i>
<h3 class="card-title h3">
Number of years in dataset: <br /><span
class="counter card-span"
></span>
</h3>
</div>
<!-- end card -->
</div>
<!-- end of gtc -->
</section>
<div class="image-container" role="presentation">
<img
src="assets/images/projector.png"
alt="cartoon drawing of movie projector"
class="projector-img"
/>
<img
src="assets/images/hero.png"
alt="cartoon super hero with cape"
class="super-hero-img"
/>
</div>
</div>
<!-- end grid-mby -->
<div class="grid-language">
<div class="image-container-language">
<img
src="assets/images/popcorn.png"
alt="cartoon drawing of popcorn in bucket"
class="popcorn-img"
/>
<img
src="assets/images/ticket.png"
alt="cartoon drawing of ticket stub for cinema"
class="ticket-img"
/>
</div>
<section
class="bg-secondary language-section"
aria-label="Displays movies by languages breakdown into English and Non-english movies, on slider change, movies by language for selected year"
>
<div class="chart-wrapper">
<div class="input-wrapper">
<label for="languagePieSlider" class="label">
Use the slider to drill-down the data
</label>
<div class="flex">
<input
type="range"
name="languagePieSlider"
id="languagePieSlider"
class="languagePieSlider inputSlider"
step="1"
aria-label="Use keyboard or mouse to filter data by year"
/>
<button
class="reset resetlanguagePieChart btn"
aria-label="reset data"
>
<i class="fa-solid fa-arrows-rotate"></i>
</button>
</div>
<!-- end flex -->
<p class="sliderValueP2 display-none sliderValueParagraph">
Year: <output id="languagePieSlidervalue"></output>
</p>
</div>
<!-- end input wrapper -->
<div class="languagePie-table-wrapper table-wrapper"></div>
<div class="language-pie-canvas-wrapper canvas-wrapper">
<canvas id="languagePieArea" role="presentation"></canvas>
</div>
</div>
<!-- end of chart -wrapper -->
</section>
</div>
<!-- end of grid -->
<section
class="bg-secondary"
aria-label="Displays Vote Average against the revenue of the movie, on slider change to filter by year selected"
>
<div class="chart-wrapper">
<div class="input-wrapper">
<div>
<label for="revBudgetSlider" class="label">
Use the slider to drill-down the data
</label>
</div>
<div class="flex">
<input
type="range"
name="revBudgetSlider"
id="revBudgetSlider"
class="revBudgetSlider inputSlider"
step="1"
aria-label="Use keyboard or mouse to filter data by year"
/>
<button
class="reset resetrevBudgetChart btn"
aria-label="reset data"
>
<i class="fa-solid fa-arrows-rotate"></i>
</button>
</div>
<p class="sliderValueP3 display-none sliderValueParagraph">
Year: <output id="scatterSlidervalue"></output>
</p>
<!-- end flex -->
</div>
<!-- end input wrapper -->
<div class="revBudget-table-wrapper table-wrapper"></div>
<div class="revBudget-canvas-wrapper canvas-wrapper">
<canvas id="revBudgetArea" role="presentation"></canvas>
</div>
</div>
<!-- end of chart -wrapper -->
</section>
</main>
</div>
<!-- end of content -wrapper -->
<script
src="https://kit.fontawesome.com/5338e889f1.js"
crossorigin="anonymous"
></script>
<!-- D3 CDN -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Chart JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- ChartJS DataLabels CDN -->
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<!-- AnimeJs CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<!-- Custom JS -->
<script src="assets/javascript/main.js"></script>
</body>
</html>