-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
279 lines (274 loc) · 18.7 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
<!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, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<title>MARVEL graphs — Networks of comics characters & creators</title>
<meta name="title" content="MARVEL graphs — Networks of comics characters & creators" />
<meta name="application-name" content="MARVEL graphs">
<meta name="description" content="Visualize network maps of Marvel characters and creators featured together within same comics as registered within Marvel's API. By @boogheta" />
<meta name="language" content="en" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://www.marvel-graphs.net/" />
<link rel="icon" sizes="16x16 24x24 32x32 48x48" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" sizes="196x196" href="./favicon-196.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
<link rel="stylesheet" href="./style.css" />
<meta property="og:title" content="MARVEL graphs" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="MARVEL-graphs.net" />
<meta property="og:url" content="https://www.marvel-graphs.net/" />
<meta property="og:description" content="Visualize network maps of Marvel characters and creators featured together within same comics as registered within Marvel's API. By @boogheta" />
<meta property="og:image" content="https://www.marvel-graphs.net/images/screenshot.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@boogheta" />
<meta name="twitter:creator" content="@boogheta" />
<meta name="twitter:title" content="MARVEL graphs" />
<meta name="twitter:description" content="Visualize network maps of Marvel characters and creators featured together within same comics as registered within Marvel's API. By @boogheta" />
<meta name="twitter:image" content="https://www.marvel-graphs.net/images/screenshot.png" />
</head>
<body>
<div id="rotate-modal">
<img class="logo" src="./images/logo.png"/>
<h2><span class="marvel">MARVEL </span>graphs</h2>
<img id="rotate-modal-img" src="./images/smartphone.png" />
<p>Please rotate!<br/>
<small>Note this app works on mobiles but is way nicer on bigger screens</small>
</p>
</div>
<div id="tooltip"></div>
<div id="sidebar">
<div id="header">
<img class="reset-graph logo" src="./images/logo.png"/>
<h1 class="reset-graph"><span class="marvel">MARVEL </span><span>graphs</span></h1>
<h2>
<span class="hide-small">Here is a map of</span>
<span class="show-middle">Map of</span>
<span id="title"></span><br/>
<span id="node-label" class="red"></span>
</h2>
</div>
<div id="explanations" class="sidebar-text">
<p>This graph shows a map of <b id="order"></b> Marvel <span class="entity"></span> positionned close to those they are the most linked with.</p>
<p>The network includes all <span class="entity"></span> <span class="creators-details">(writers and pencillers)</span><span class="characters-details">(including teams)</span> mentioned as involved in all comics registered into Marvel's API. Stories accounting more than <span id="cooccurrence-threshold"></span> <span class="entity"></span> were ignored. A few isolated sets of <span class="entity"></span> from the others were removed.</p>
<p>The size of the nodes reflects how often the <span class="entity"></span> are accounted as participating to comics in Marvel API's data.</p>
<p><span class="characters-details">Colors indicate which <i>family</i> each character belongs to: <span id="clusters-legend"></span>, etc.</span></p>
<p><span class="creators-details">Colors indicate whether a creator is mainly a <b id="writer-color"></b>, an <b id="artist-color"></b> or really a bit of <b id="both-color"></b>.</span></p>
<p>Marvel API's data is not always perfect and many comics miss some information, although it remains quite rich and results look good enough!</p>
<p id="view-node" class="button tooltip selected" tooltip="focus a random 'entity' in the graph"><span><span class="desktop-details">Click</span><span class="mobiles-details">Tap</span> a <span class="creators-details">creator</span><span class="characters-details">character</span></span></p>
</div>
<div id="node-details" class="sidebar-text">
<img id="node-img"/>
<div id="node-extra"></div>
</div>
<div id="choices" class="selected">
<h5>Switch to the graph of</h5>
<div class="network-choice">
<input type="checkbox" id="node-type-switch" />
<label id="switch-type" class="network-switch-label tooltip" for="node-type-switch">
<div class="toggle"></div>
<div class="names">
<div id="type-characters" class="left">characters</div>
<div id="type-creators" class="right">creators</div>
</div>
</label>
</div>
</div>
<div id="credits">
<div id="help" class="tooltip" tooltip="read more info & explanations">
<span>?</span>
</div>
<p>data <span class="large-bar">provided </span>by <a href="https://developer.marvel.com/" target="_blank">MARVEL</a> © 2022</p>
<p>
<span class="large-bar">built </span>by <a href="https://twitter.com/boogheta" target="_blank">@boogheta</a>
<b class="large-bar">⋅</b>
<span class="large-bar">code </span>on <a href="https://github.com/boogheta/Marvel#readme" target="_blank">GitHub</a>
</p>
</div>
</div>
<noscript id="noscript"><p>This app runs with JavaScript.<br/>Please enable it to continue.</p></noscript>
<div id="webgl-disclaimer" class="sigma-container">
<p>Sorry, this app only works on modern browsers with WebGL capabilities :(</p>
</div>
<div id="sigma-container" class="sigma-container"></div>
<div id="controls">
<div id="sigma-buttons">
<button id="regscreen" class="tooltip" tooltip="reduce to window">
<img src="./images/exit-fullscreen.svg" alt="exit-fullscreen" />
</button>
<button id="fullscreen" class="tooltip" tooltip="maximize to full screen">
<img src="./images/fullscreen.svg" alt="fullscreen" />
</button>
<button id="zoom-out" class="tooltip" tooltip="zoom out">
<img src="./images/zoom-out.svg" alt="zoom out" />
</button>
<button id="zoom-in" class="tooltip" tooltip="zoom in">
<img src="./images/zoom-in.svg" alt="zoom in" />
</button>
<button id="zoom-reset" class="tooltip" tooltip="recenter & reset zoom">
<img src="./images/reset-zoom.svg" alt="reset-zoom" />
</button>
</div>
<div id="search">
<input type="search" id="search-input" list="suggestions" placeholder="search…" class="tooltip" tooltip="search a specific 'entity' in the graph" />
<img id="search-icon" src="./images/search.svg" alt="search a node in the graph" />
<datalist id="suggestions"><option> </option></datalist>
<select id="suggestions-select"><option>search…</option></select>
</div>
</div>
<div id="legend">
<p><span class="desktop-details">click</span><span class="mobiles-details">tap</span> on a picture to select a <span class="creators-details">creator</span><span class="characters-details">character</span> and explore the associated links, details and comics</p>
</div>
<div id="histogram-container">
<div id="histogram-title">
<span id="comics-title"></span>
</div>
<div id="histogram"></div>
<div id="histogram-hover"></div>
<div id="histogram-legend"></div>
<div id="histogram-tooltip"></div>
</div>
<div id="view-comics-container">
<p id="view-comics" class="button tooltip selected">
<span>
Explore <span class="hide-small">the </span>comics
<img src="./images/left.svg" alt="open comics list" />
</span>
</p>
</div>
<div id="comics-bar">
<div id="comics-header">
<div id="comics-actions">
<button id="comics-filter" class="tooltip" tooltip="search comics">
<img src="./images/search.svg" alt="filter comics" />
</button>
<button id="comics-sort-date" class="sort-button tooltip selected">
<img src="./images/sort-date.svg" alt="sort chronologically" />
</button>
<button id="comics-sort-alpha" class="sort-button tooltip">
<img src="./images/sort-alpha.svg" alt="sort alphabetically" />
</button>
<button id="comics-prev" class="tooltip" tooltip="previous comic">
<img src="./images/left.svg" alt="previous-picture" />
</button>
<button id="comics-play" class="tooltip" tooltip="start scrolling comics">
<img src="./images/play.svg" alt="play" />
</button>
<button id="comics-pause" class="selected tooltip" tooltip="stop scrolling comics">
<img src="./images/pause.svg" alt="pause" />
</button>
<button id="comics-next" class="tooltip" tooltip="next comic">
<img src="./images/right.svg" alt="previous-picture" />
</button>
<button id="close-bar" class="tooltip" tooltip="close list of comics">
<img src="./images/close.svg" alt="close-comics-list" />
</button>
</div>
<form id="filter-comics" autocomplete="off">
<input type="search" id="filter-input" placeholder="search…" class="tooltip" tooltip="filter comics by title" />
</form>
</div>
<span id="comics-subtitle"></span>
<div id="comics">
<ul id="comics-list"></ul>
<div id="loader-list" class="tooltip" tooltip="loading list of comics…"><img src="./images/loader.gif"/></div>
</div>
<div id="comics-cache"></div>
<div id="comic-details">
<img id="comic-img"/>
<h4 id="comic-title"></h4>
<div>
<p id="comic-desc"></p>
<a id="comic-url" target="_blank">More on Marvel.com…</a><br/>
<div class="comic-entities">
<h4>crediting:</h4>
<ul id="comic-creators"></ul>
</div>
<div class="comic-entities">
<h4>featuring:</h4>
<ul id="comic-characters"></ul>
</div>
</div>
</div>
</div>
<div id="loader" class="loader tooltip" tooltip="loading network…"><img src="./images/loader.gif"/></div>
<div id="loader-comics" class="loader tooltip" tooltip="loading comics…">
<img src="./images/loader.gif"/>
<span>loading comics...</span>
</div>
<div id="modal-img-missing">image missing</div>
<div id="modal" class="modal">
<span id="modal-helper"></span>
<img id="modal-img"/>
<div id="modal-actions">
<button id="modal-previous" class="tooltip" tooltip="previous comic">
<img src="./images/left.svg" alt="previous-picture" />
</button>
<button id="modal-play" class="tooltip" tooltip="start scrolling comics">
<img src="./images/play.svg" alt="play" />
</button>
<button id="modal-pause" class="selected tooltip" tooltip="stop scrolling comics">
<img src="./images/pause.svg" alt="pause" />
</button>
<button id="modal-next" class="tooltip" tooltip="next comic">
<img src="./images/right.svg" alt="previous-picture" />
</button>
<button id="close-modal" class="close-button tooltip" tooltip="close picture overlay">
<img src="./images/close.svg" alt="close-picture-modal" />
</button>
</div>
</div>
<div id="help-modal" class="modal">
<div id="help-box">
<p><b>MARVEL graphs</b> is an app that displays network maps of the Marvel characters or creators galaxy where each one is positionned close to those she/he is most linked with as registered within <a href="https://developer.marvel.com/" target="_blank">Marvel's API</a>.</p>
<p>Data, comic book images and photographs are all provided by Marvel. © 2022 <a href="https://https://www.marvel.com/" target="_blank">Marvel</a></p>
<br/>
<p>Although Marvel API's data is not always perfect and many comics miss information on their creators or characters, it still remains really rich over all periods since the 40's and results look good enough! They should not be considered as totally accurate though.</p>
<p>Since associations between authors and comic book issues are more complete within webpages from the <a href="https://www.marvel.com/comics/series#divider-smart-ad-divider-az" target="_blank">Marvel.com</a> website than within the API, the data was completed accordingly.</p>
<br/>
<p>The nodes positions are computed using the <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679" target="_blank">ForceAtlas2 algorithm</a> implemented in <a href="https://doi.org/10.1371/journal.pone.0098679" target="_blank">graphology.js</a>, which places nodes that are the most linked together closer and further from the others.</p>
<p>The characters <i>families</i> used for the colors are network communities that were manually labeled after being computed with graphology's <a href="https://en.wikipedia.org/wiki/Louvain_method" target="_blank">Louvain algorithm</a> <a href="https://graphology.github.io/standard-library/communities-louvain" target="_blank">implementation</a>. They are therefore sometimes a little imprecise.</p>
<br/>
<p>All views have their own URL so each one can be shared directly with a link.</p>
<p>The app should work on most mobile devices (and <a href="https://sigmajs.org/" target="_blank">Sigma</a>'s dual-touch interactions with the graphs are quite cool!) but exploring the graphs and comics is way nicer on bigger screens.</p>
<p>You can <i>"install"</i> it as a mobile app by simply clicking the "Add to home screen" option within your device's browser options menu.</p>
<br/>
<p>This web application is entirely built with Free Libre Open Source Software and released as such under the <a href="https://github.com/boogheta/Marvel/blob/master/LICENSE" target="_blank">AGPL V3 license</a>.</p>
<p>The full source code is available on <a href="https://github.com/boogheta/Marvel/" target="_blank">GitHub</a>. <a href="https://github.com/boogheta/Marvel/issues" target="_blank">Issues and pull requests</a> welcome!</p>
<br/>
<p>Data collection and preparation in Python with <a href="https://requests.readthedocs.io/" target="_blank">requests</a> and <a href="https://networkx.org/" target="_blank">NetworkX</a>.</p>
<p>Web interface and network visualization in Node.js using <a href="https://graphology.github.io/" target="_blank">graphology</a>, <a href="https://sigmajs.org/" target="_blank">Sigma.js</a>, <a href="http://nodeca.github.io/pako/" target="_blank">pako</a> and <a href="https://www.papaparse.com/" target="_blank">PapaParse</a>, built in TypeScript with <a href="https://www.npmjs.com/package/kotatsu" target="_blank">kotatsu</a>.</p>
<p>All icons are used or adapted from SVG creations under CC Zero Public Domain by <a href="https://openclipart.org/detail/191399/smartphone" target="_blank">agomjo</a>, CC Attribution License by <a href="https://github.com/atisawd/boxicons" target="_blank">boxicons</a> and MIT license from <a href="https://github.com/artcoholic/akar-icons" target="_blank">artcoholic</a> & <a href="https://github.com/twbs/icons" target="_blank">Bootstrap</a>.</p>
<br/>
<p>Thanks to <a href="#/creators/?creator=Stan+Lee&comics" onclick="document.getElementById('close-help').onclick()">Stan Lee</a>, <a href="#/characters/?creator=Jack+Kirby&comics" onclick="document.getElementById('close-help').onclick()">Jack Kirby</a> and all the amazing <a href="https://www.marvel.com/" target="_blank">Marvel comics</a> authors who brought us so many incredible stories and uncanny characters over the past decades!<br/>
And thanks to MARVEL for bringing all of those together and providing the <a href="https://developer.marvel.com/" target="_blank">API</a> which makes this app possible.</p>
<p>Thanks to <a href="https://github.com/Yomguithereal" target="_blank">Guillaume Plique</a>, <a href="https://github.com/paulgirard" target="_blank">Paul Girard</a>, <a href="https://github.com/jacomyal" target="_blank">Alexis Jacomy</a>, <a href="https://github.com/jacomyMa" target="_blank">Mathieu Jacomy</a> and <a href="https://github.com/robindemourat" target="_blank">Robin de Mourat</a> for their precious help, ideas and code libraries!</p>
<p>And lots of thanks to the 2014 Amsterdam <a href="http://contropedia.net/" target="_blank">Contropedia</a> datasprint where this whole idea germinated before it got buried in my mind and GitHub repositories for 8 long years. :)</p>
<br/>
<p>If you're interested in Marvel and graphs, you can also watch this <a href="https://livestream.com/hugeinc/events/2474611/videos/32324838" target="_blank">cool talk</a> from <a href="https://github.com/dethtron5000" target="_blank">Peter Olson</a> from Marvel IT in 2013 in which he explains how and why they used the Neo4J graph database to modelize <a href="https://marvelentertainment.tumblr.com/post/30536120271/marvel-universe-data" target="_blank">their data</a>.</p>
<br/>
<p>You can find me on Mastodon: <a href="https://piaille.fr/@boogheta" target="_blank">@[email protected]</a>, Twitter: <a href="https://twitter.com/boogheta" target="_blank">@boogheta</a> or <a href="https://github.com/boogheta">GitHub</a>.</p>
</div>
<button id="close-help" class="close-button tooltip" tooltip="close info box">
<img src="./images/close.svg" alt="close-help-box" />
</button>
</div>
<script src="build/bundle.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WX3GLGZ95V"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); };
gtag('js', new Date());
gtag('config', 'G-WX3GLGZ95V');
window.addEventListener("hashchange", function(event) {
gtag('event', 'page_view', {
'page_path': location.pathname + location.search + location.hash
});
});
</script>
</body>
</html>