-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
142 lines (104 loc) · 5.91 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph for Sets</title>
<meta name="author" content="Yoav Ilan">
<meta property = "og:title" content="g4s - New Concept in Data Visualization"/>
<meta property='og:image' content="https://kirdan.github.io/m/g4s_twitter.png"/>
<meta property='og:description' content="Graph for Sets (g4s) is a new way of displaying sets and intersections. g4s aims to be simple, intuitive, scalable as well as aesthetically pleasing"/>
<meta property='og:url' content="https://kirdan.github.io/" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@iyoav">
<meta name="twitter:creator" content="@iyoav">
<meta name="twitter:title" content="g4s - New Concept in Data Visualization">
<meta name="twitter:description" content="Graph for Sets (g4s) is a new way of displaying sets and intersections. g4s aims to be simple, intuitive, scalable as well as aesthetically pleasing">
<meta name="twitter:image" content="https://kirdan.github.io/m/g4s_twitter.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=" sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="viewer.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="g4s.css">
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-106782465-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-106782465-1');
</script>
</head>
<body>
<div class="container">
<div class="starter-template">
<h1>Graph for Sets</h1>
<p class="lead">This g4s exmaple visualizes the various intersections among some twitter influencers</p>
</div>
<div class="row">
<div class="col-md-8">
<div id="twitter_graph"></div>
</div>
<div class="col-md-4 ">
<div class="jumbotron" id="inspector"></div>
<div class="jumbotron" id="instructions" >
<h4>How to Use</h4>
<ul>
<li>Move the mouse over a set to show its intersections</li>
<li>Move the mouse over an intersection to show its sets</li>
<li>Double-click an intersection to filter out all the other intersections and the sets it is not intersected with.Double-click it again to return to the full graph</li>
<li>Double-click a set to selected it, double-click it to deselect. Select multiple sets to view their intersection all other intersections will fade out)</li>
</ul>
</div>
</div>
</div>
<div class="row">
<h3>About This Graph</h3>
<p>This interactive graph is an example for using the g4s library, available <a href="https://github.com/Kirdan/kirdan.github.io" target="_blank">here</a>.</p>
<p>The data was acquired from twitter by using their <a href="https://dev.twitter.com/rest/reference/get/followers/ids" target="_blank">GET followers/ids API</a>. The data collection was finalized by Sep 8, 2017, thus checking these twitter accounts now will show different numbers. I will update the data periodically but not too frequently. Due to twitter’s <a href="https://dev.twitter.com/rest/public/rate-limiting" target="_blank">API Rate Limits</a> it takes several days to get the data for these 6 accounts.</p>
</div>
</div>
<footer class="footer">
<div class="container footer_container">
<p class="text-muted">© 2017 Copyright: <a href="https://github.com/Kirdan/kirdan.github.io/blob/master/LICENSE" target="_blank"> Yoav Ilan </a></p>
</div>
</footer>
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="g4s.js"></script>
<script type="text/javascript">
fetch('https://kirdan.github.io/data/twitter.json')
.then((response) => response.json())
.then((sets) => g4s.init(sets, "twitter_graph", false, null, null, 485));
g4s.inspector(updateInspector);
function updateInspector() {
var inspector = g4s.getInspector();
if(Object.keys(inspector).length == 0) return;
document.getElementById("inspector").style.visibility = "visible";
var concatSets = (total, set) => total + "<b>" + graph.find(d => d.id === "g" + set).label + "</b> AND ";
var getPrecentage = (total, set) => total + "<li class='list-group-item'>" + graph.find(s => s.id === "g" + set).label + ": "
+ (inspector.size / graph.find(s => s.id === "g" + set).size * 100).toFixed(2) + "%</li>";
var message = "";
switch(inspector.type) {
case "set":
message = inspector.size.toLocaleString('en-US') + " twiiter accounts follow <b>" + inspector.label + "</b>";
break;
case "intersection":
message = inspector.size.toLocaleString('en-US') + " twitter accounts follow "
+ inspector.intersection.sets.reduce(concatSets, "").slice(0, -4);
message += "<h4> The precentage of followers in this intersection:</h4>";
message += inspector.intersection.sets.reduce(getPrecentage, "<ul class='list-group'>") + "</ul>";
break;
case "selected_set":
message = inspector.set.size.toLocaleString('en-US') + " twiiter accounts follow <b>" + inspector.set.label + "</b>";
break;
case "selected_sets":
message = inspector.size.toLocaleString('en-US') + " twitter accounts follow "
+ inspector.intersection.reduce(concatSets, "").slice(0, -4);
message += "<h4> The precentage of followers in this intersection:</h4>";
message += inspector.intersection.reduce(getPrecentage, "<ul class='list-group'>") + "</ul>";
break;
default:
}
document.getElementById("inspector").innerHTML = message;
}
</script>
</body>
</html>