-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (125 loc) · 7.35 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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-146824308-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-146824308-1');
</script>
<meta charset="utf-8">
<title>Marvel Proximity Map</title>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="../favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../favicon/favicon-16x16.png">
<link rel="manifest" href="../favicon/site.webmanifest">
<!-- Facebook Opengraph -->
<meta property="og:url" content="http://cultureplot.com/tinder/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="300,000 Tinder Swipes In One Chart" />
<meta property="og:description" content="Users End Up Talking To Less Than 1% Of The Profiles They Swipe On"/>
<meta property="og:image" content="https://cultureplot.com/img/tinder_sankey.png" />
<meta property="og:image:alt" content="Mapping Each Candidate's Predicted Drop Out Position" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="900" />
<meta property="og:image:height" content="420" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://cultureplot.com/img/tinder_sankey.png" />
<meta name="twitter:image:alt" content="Users End Up Talking To Less Than 1% Of The Profiles They Swipe On" />
<meta name="twitter:description" content="Users End Up Talking To Less Than 1% Of The Profiles They Swipe On"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<!-- banner -->
<div class="navbar">
<a href="https://cultureplot.com">Cultureplot</a>
</div>
<article style='margin-top: 25px;'>
<h1 style="margin-left: 0px; margin-bottom: 15px;">Marvel Proximity Map</h1>
<h2 style="margin-left: 0px; margin-bottom: 15px;">Characters Arranged On "Closeness" To One Another</h2>
<span>By <a href="https://cultureplot.com/about/" target="_blank" class="bylineLink">Oliver Gladfelter</a></span><span style="color: gray;"> | Sept 30, 2020</span>
<p>Blah blah blah blah blah blah.</p>
</article>
<!-- scatter plot here -->
<div id="scatterplot"></div>
<div class="row">
<div class="column">
<h3>Number Of Characters</h3>
<p style="width:75%; margin-left:auto; margin-right:auto; margin-top:0px;">Control how many characters to show</p>
<div class="slidecontainer">
<input type="range" min="10" max="755" value="300" class="slider" id="myRange">
</div>
</div>
<div class="column">
<h3>Highlight By Team</h3>
<p style="width:75%; margin-left:auto; margin-right:auto; margin-top:0px;">Select any team to highlight its members</p>
<select name="teamSelector" id="teamSelector">
<option value="All" style="font-weight: bold;">All Characters</option>
<option value="A.I.M.">A.I.M.</option>
<option value="Alpha Flight">Alpha Flight</option>
<option value="Army of Evil">Army of Evil</option>
<option value="Avengers">Avengers</option>
<option value="Brotherhood of Evil Mutants">Brotherhood of Evil Mutants</option>
<option value="Champions">Champions</option>
<option value="Defenders">Defenders</option>
<option value="Defenders for a Day">Defenders for a Day</option>
<option value="Excalibur">Excalibur</option>
<option value="Fantastic Four">Fantastic Four</option>
<option value="Frightful Four">Frightful Four</option>
<option value="Future Foundation">Future Foundation</option>
<option value="Gamma Flight">Gamma Flight</option>
<option value="Guardians of the Galaxy">Guardians of the Galaxy</option>
<option value="Hellfire Club">Hellfire Club</option>
<option value="Hellions">Hellions</option>
<option value="Heroes for Hire">Heroes for Hire</option>
<option value="Hounds">Hounds</option>
<option value="Hydra">Hydra</option>
<option value="Illuminati">Illuminati</option>
<option value="Initiative">Initiative</option>
<option value="Invaders">Invaders</option>
<option value="Lady Liberators">Lady Liberators</option>
<option value="Legion Accursed">Legion Accursed</option>
<option value="Legion of the Unliving">Legion of the Unliving</option>
<option value="Lethal Legion">Lethal Legion</option>
<option value="Marauders">Marauders</option>
<option value="Masters of Evil">Masters of Evil</option>
<option value="Midnight Sons">Midnight Sons</option>
<option value="Mighty Avengers">Mighty Avengers</option>
<option value="New Avengers">New Avengers</option>
<option value="New Warriors">New Warriors</option>
<option value="Quiet Council of Krakoa">Quiet Council of Krakoa</option>
<option value="S.H.I.E.L.D.">S.H.I.E.L.D.</option>
<option value="Secret Avengers">Secret Avengers</option>
<option value="Secret Defenders">Secret Defenders</option>
<option value="Sinister Six">Sinister Six</option>
<option value="Thunderbolts">Thunderbolts</option>
<option value="Underground">Underground</option>
<option value="X-Corporation">X-Corporation</option>
<option value="X-Factor">X-Factor</option>
<option value="X-Force">X-Force</option>
<option value="X-Men">X-Men</option>
</select>
</div>
<div class="column">
<h3>Find A Character</h3>
<p style="width:75%; margin-left:auto; margin-right:auto; margin-top:0px;">Search for any character in the graph</p>
<div class="autocomplete"><input id="myInput" type="text" name="myCountry" placeholder="Captain America..."></div>
<button id="searchButton" type="submit" onclick="search_button()"><i class="fa fa-search"></i></button>
</div>
</div>
<!-- Scripts -->
<script src="js/scatter.js"></script>
<script src="js/script.js"></script>
<script src="js/autocomplete.js"></script>
<!-- END OF ARTICLE -->
</body>
</html>