-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (151 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" href="./src/images/favicon.png">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="stylesheet" href="./dist/main.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mate+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"
type='text/css'> -->
<script src="https://kit.fontawesome.com/cd176def21.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="ShowRunner Digest" />
<meta name="image" property="og:image" content="./dist/images/ShowRunner.gif"/>
<meta property="og:description"
content="ShowRunner Digest is an interactive data visualization of various Showrunners and their average series ratings made with JS "/>
<meta property="og:url" content="https://evan-leon.github.io/ShowRunnerDigest/" />
<title>ShowRunner Digest</title>
</head>
<body>
<div class="frame">
<div id="screen" class="on">
<div class="sr-select-container">
<label class='select-title' for="sr-select">Choose a ShowRunner</label>
<select name="sr-select" id="sr-select">
<option disabled>Choose a ShowRunner</option>
<option class="sr-select-item" value="chuckLorre">Chuck Lorre</option>
<option class="sr-select-item" value="samEsmail">Sam Esmail</option>
<option class="sr-select-item" value="stevenConrad">Steven Conrad</option>
<option class="sr-select-item" value="vinceGilligan">Vince Gilligan</option>
<option class="sr-select-item" value="michaelSchur">Michael Schur</option>
<option class="sr-select-item" value="damonLindelof">Damon Lindelof</option>
<option class="sr-select-item" value="noahHawley">Noah Hawley</option>
<option class="sr-select-item" value="davidChase">David Chase</option>
<option class="sr-select-item" value="juddApatow">Judd Apatow</option>
<option class="sr-select-item" value="mattGroening">Matt Groening</option>
<option class="sr-select-item" value="davidCohen">David X Cohen</option>
<option class="sr-select-item" value="larryDavid">Larry David</option>
<option class="sr-select-item" value="tinaFey">Tina Fey</option>
<option class="sr-select-item" value="sethMacfarlane">Seth MacFarlane</option>
<option class="sr-select-item" value="jonFavreau">Jon Favreau</option>
<option class="sr-select-item" value="avaDuvernay">Ava DuVernay</option>
<option class="sr-select-item" value="davidKelly">David E Kelly</option>
<option class="sr-select-item" value="danielLevy">Daniel Levy</option>
<option class="sr-select-item" value="shondaRhimes">Shonda Rhimes</option>
<option class="sr-select-item" value="geneRoddenberry">Gene Roddenberry</option>
<option class="sr-select-item" value="danSchneider">Dan Schneider</option>
<option class="sr-select-item" value="aaronSorkin">Aaron Sorkin</option>
<option class="sr-select-item" value="dickWolf">Dick Wolf</option>
<option class="sr-select-item" value="brunoHeller">Bruno Heller</option>
<option class="sr-select-item" value="mikeJudge">Mike Judge</option>
<option class="sr-select-item" value="gregDaniels">Greg Daniels</option>
<option class="sr-select-item" value="jossWheedon">Joss Wheedon</option>
<option class="sr-select-item" value="billLawrence">Bill Lawrence</option>
<option class="sr-select-item" value="stevenMoffat">Steven Moffat</option>
<option class="sr-select-item" value="markGatiss">Mark Gatiss</option>
<option class="sr-select-item" value="martaKauffman">Marta Kauffman</option>
<option class="sr-select-item" value="davidCrane">David Crane</option>
<option class="sr-select-item" value="nicPizzolatto">Nic Pizzolatto</option>
<option class="sr-select-item" value="jerrySeinfeld">Jerry Seinfeld</option>
<option class="sr-select-item" value="phoebeWallerBridge">Phoebe Waller-Bridge</option>
</select>
</div>
<svg id="bar-chart" height="450" width="1100" style="margin: 0px" class=""></svg>
<div id="ticker-wrapper" class="">
<div class="ticker-move" id="">
<div class="ticker-item" id="chuckLorre">Chuck Lorre</div>
<div class="ticker-item" id="samEsmail">Sam Esmail</div>
<div class="ticker-item" id="stevenConrad">Steven Conrad</div>
<div class="ticker-item" id="vinceGilligan">Vince Gilligan</div>
<div class="ticker-item" id="michaelSchur">Michael Schur</div>
<div class="ticker-item" id="damonLindelof">Damon Lindelof</div>
<div class="ticker-item" id="noahHawley">Noah Hawley</div>
<div class="ticker-item" id="davidChase">David Chase</div>
<div class="ticker-item" id="juddApatow">Judd Apatow</div>
<div class="ticker-item" id="mattGroening">Matt Groening</div>
<div class="ticker-item" id="davidCohen">David X Cohen</div>
<div class="ticker-item" id="larryDavid">Larry David</div>
<div class="ticker-item" id="tinaFey">Tina Fey</div>
<div class="ticker-item" id="sethMacfarlane">Seth MacFarlane</div>
<div class="ticker-item" id="jonFavreau">Jon Favreau</div>
<div class="ticker-item" id="avaDuvernay">Ava DuVernay</div>
<div class="ticker-item" id="davidKelly">David E Kelly</div>
<div class="ticker-item" id="danielLevy">Daniel Levy</div>
<div class="ticker-item" id="shondaRhimes">Shonda Rhimes</div>
<div class="ticker-item" id="geneRoddenberry">Gene Roddenberry</div>
<div class="ticker-item" id="danSchneider">Dan Schneider</div>
<div class="ticker-item" id="aaronSorkin">Aaron Sorkin</div>
<div class="ticker-item" id="dickWolf">Dick Wolf</div>
<div class="ticker-item" id="brunoHeller">Bruno Heller</div>
<div class="ticker-item" id="mikeJudge">Mike Judge</div>
<div class="ticker-item" id="gregDaniels">Greg Daniels</div>
<div class="ticker-item" id="jossWheedon">Joss Wheedon</div>
<div class="ticker-item" id="billLawrence">Bill Lawrence</div>
<div class="ticker-item" id="stevenMoffat">Steven Moffat</div>
<div class="ticker-item" id="markGatiss">Mark Gatiss</div>
<div class="ticker-item" id="martaKauffman">Marta Kauffman</div>
<div class="ticker-item" id="davidCrane">David Crane</div>
<div class="ticker-item" id="nicPizzolatto">Nic Pizzolatto</div>
<div class="ticker-item" id="jerrySeinfeld">Jerry Seinfeld</div>
<div class="ticker-item" id="phoebeWallerBridge">Phoebe Waller-Bridge</div>
</div>
</div>
</div>
<div class="side-outer-container">
<div class="pers-links">
<h2 class="me">Evan Leon</h2>
<a target="_blank" href="https://www.linkedin.com/in/evan-leon-737918211/"><i class="fab fa-linkedin fa-3x"></i></a>
<a target="_blank" href="https://github.com/Evan-Leon"><i class="fab fa-github fa-3x"></i></a>
<a target="_blank" href="https://angel.co/u/evan-leon"><i class="fab fa-angellist fa-3x"></i></a>
<a target="_blank" href="./dist/images/Evan Leon Resume .pdf"> <i class="far fa-file fa-3x"></i></a>
<a target="_blank" href="https://evanleon.com"> <i id="port" class="fas fa-user fa-3x"></i></a>
</div>
</div>
<h1 class="logo">ShowRunner Digest</h1>
<div class="buttons">
<label >Options
<div class="options"></div>
</label>
<label >Power
<div class="power"></div>
</label>
</div>
</div>
<div id="modal" class="modal-on">
<h1 class='modal-title'> S1E1: Welcome to Showrunner Digest</h1>
<p class="modal-desc">Your scheduled program is now beginning </p>
<p class="modal-desc">To start, choose any Showrunner from the bottom ticker or the dropdown above </p>
<p class="modal-desc">A graph with a Showrunner's series will appear with its TVmaze rating </p>
<p class="modal-desc">Hover over an individual bar to see that series' rating </p>
<p class="modal-desc">TVmaze is a virtual TV guide, hosting information about every show, their cast and crews,
as well as its own rating system (aggregated from user data). </p>
<p class="modal-desc">Visit <a id="maze-link" target="_blank" href="https://www.tvmaze.com/features">TVmaze</a> to learn more. </p>
<p class="modal-desc">See you next season! </p>
<div class="modal-links">
<a target="_blank" href="https://www.linkedin.com/in/evan-leon-737918211/"><i class="fab fa-linkedin fa-2x"></i></a>
<a target="_blank" href="https://github.com/Evan-Leon"><i class="fab fa-github fa-2x"></i></a>
<a target="_blank" href="https://angel.co/u/evan-leon"><i class="fab fa-angellist fa-2x"></i></a>
<a target="_blank" href="./dist/images/Evan Leon Resume .pdf"> <i class="far fa-file fa-2x"></i></a>
<a target="_blank" href="https://evanleon.com"> <i class="fas fa-user fa-2x"></i></a>
</div>
</div>
<script src="./dist/main.js"></script>
</body>
</html>