-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (74 loc) · 4.64 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Network of Thrones</title>
<link href="vendor/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="vendor/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="img/cytoscape-logo.png" rel="shortcut icon" type="image/png" />
</head>
<body class="about-closed">
<div id="cy"></div>
<div id="loading">
<span class="fa fa-refresh fa-spin"></span>
</div>
<script src="vendor/fastclick.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/cytoscape/cytoscape.min.js"></script>
<script src="vendor/jquery/jquery.qtip.min.js"></script>
<link href="vendor/jquery/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="vendor/cytoscape/cytoscape-qtip.js"></script>
<script src="vendor/bluebird.min.js"></script>
<script src="vendor/bootstrap/bootstrap.min.js"></script>
<script src="vendor/typeahead.bundle.js"></script>
<script src="vendor/handlebars.min.js"></script>
<script src="vendor/lodash.min.js"></script>
<script src="index.js"></script>
<script src="about.js"></script>
<div id="search-wrapper">
<input type="text" class="form-control" id="search" placeholder=" Search">
</div>
<div id="info"></div>
<button id="reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button>
<button id="about" class="btn btn-default"><i class="fa fa-info"></i></button>
<div id="about-content" class="about-content">
<h3>Network of Thrones</h3>
<h4>SAND Edition</h4>
<p>This map is a zoomable, searchable network visualization of the <a target="_blank" href="https://www.macalester.edu/~abeverid/thrones.html">Storm of Swords Network</a>. The data was published by Dr. Andrew Beveridge at Macalaster College and this visualization was done by Bobby Norton.</p>
<p>A. Beveridge and J. Shan, "Network of Thrones," Math Horizons Magazine , Vol. 23, No. 4 (2016), pp. 18-22.</p>
<p>The visualization leverages SAND, py2cytoscape, and python-igraph to implement the following features:</p>
<ul>
<li>An edge's thickness represents its weight, i.e. the number of interactions between the characters.</li>
<li>The size of a vertex corresponds to its PageRank value.</li>
<li>The color of a vertex's border indicates its community.</li>
<li>The size of a vertex's label corresponds to its betweenness centrality.</li>
<li>The background of a vertex is a local copy of the character's profile image on http://gameofthrones.wikia.com.</li>
<li>The layout is a degree-sorted circle based on community, with saved and reloadable manual positioning of communities.</li>
</ul>
<h4>How did you make this?</h4>
<p>You can find a Jupyter Notebook that will allow you to completely replicate this visualization <a target="_blank" href="https://github.com/testedminds/sand-network-of-thrones/blob/master/Network%20of%20Thrones.ipynb">on Github</a>.</p>
<p>The app was made using <a target="_blank" href="http://js.cytoscape.org">Cytoscape.js</a>
based on their <a target="_blank" href="http://www.wineandcheesemap.com">Wine and Cheese Demo</a>.</p>
<p>Also see the <a target="_blank" href="https://github.com/testedminds/sand">SAND repo</a> for examples of applying network analysis and visualization to systems architecture.</p>
<h4>But...why?</h4>
<p>SAND is a network analytics toolkit and workflow written in Python. SAND focuses on the domain of network data in systems architecture, but the principles are useful for network analysis in other domains such as this social network. The Network of Thrones dataset provided a basis to calibrate SAND against an existing well-described network analysis. Running this dataset through the SAND workflow started as a case study and functional test, but became useful and entertaining in its own right.</p>
<p>Love it? Hate it? <a target="_blank" href="https://www.twitter.com/bobbynorton">Let me know</a>.</p>
</div>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '59cbc3597218b518761c816f');
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
t.src = 'https://d36ee2fcip1434.cloudfront.net/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>