-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (155 loc) · 7.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
<!DOCTYPE html>
<html>
<head>
<title>Bitcoin Data Visualization</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=false"></script>
<script type="text/javascript" src="js/markerclusterer_packed.js"></script>
<script type="text/javascript" src="js/daynightoverlay.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/propagation_data.js"></script>
<script type="text/javascript" src="js/block_data.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">Bitcoin Visualisation</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transacton verification <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.html#heatmap">Heatmap</a></li>
<li class="divider"></li>
<li><a href="index.html#markers">Markers</a></li>
<li class="divider"></li>
<li><a href="index.html#grouped">Grouped markers</a></li>
<li class="divider"></li>
<li><a href="index.html#countries">Countries</a></li>
</ul>
</li>
<li>
<a href="index.html#transaction-value">Transaction value</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Propagation transactions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.html#propagation1">Propagation 1</a></li>
<li class="divider"></li>
<li><a href="index.html#propagation2">Propagation 2</a></li>
<li class="divider"></li>
<li><a href="index.html#propagation3">Propagation 3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" id="toggle-day-night">Day-Night</a>
</li>
<li>
<a href="#" id="toggle-log">Log information</a>
</li>
<li>
<a href="#" id="toggle-about">About</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="log-block">
<div class="panel panel-primary">
<div class="panel-heading">
Log information
<img src="images/close.png" height="20" width="20" class="close-button" id="close-log" />
</div>
<div class="panel-body">
<ul id="log-info">
</ul>
</div>
</div>
</div>
<div id="about-page">
<div class="panel panel-primary">
<div class="panel-heading">
About this project
<img src="images/close.png" height="20" width="20" class="close-button" id="close-about" />
</div>
<div class="panel-body">
<p>This project has been done for the Data Visualization course on Delft University of Technology by
<ul>
<li>Karens Grigorjancs (4002679): <a href="mailto:k.grigorjancs@student.tudelft.nl">k.grigorjancs@student.tudelft.nl</a></li>
<li>Ruud Visser (4043480): <a href="mailto:r.g.m.visser@student.tudelft.nl">r.g.m.visser@student.tudelft.nl</a></li>
</ul>
</p>
<p> The Bitcoin Data Visualization illustrates the geographic features that can be extracted from the Bitcoin Transaction Data provided by the one of the popular Bitcoin block explorer website: <a href="https://blockchain.info/">https://blockchain.info/</a>. The used API's can be found <a href="https://blockchain.info/nl/api">here</a>.
</p>
<p> The project consists of three data parts that can be found in the menu above:
<ol>
<li>Transaction verification data (gathered real-time);</li>
<li>Transaction value data (gathered real-time) and</li>
<li>Transaction propagation data (three examples of old transactions).</li>
</ol>
All the data can be linked to an IP-address and consequently to an geographic address. Although a lot of visualization can be applied to these three types of data, we tried to choose an approach that gives the most insight(s). In the first case we chose to do a couple of approaches to demonstrate the various possibilities of visualization on Google Maps.
</p>
<p>
<h4>Transaction verification</h4>
We applied the following four approaches to visualize where the transaction is first being relayed.
<ol>
<li><strong>Heatmap</strong>:
Here we use a Heatmap approach to find the concentration of the places where the transaction is been relayed first.
</li>
<li><strong>Markers</strong>:
Here we illustrates the individual places of first appearance of the transaction.
</li>
<li><strong>Grouped markers</strong>:
In this view we group the individual markers for a better overview.
</li>
<li><strong>Countries</strong>:
In this view we use Google Database to draw the layers on the countries, link them to IP data and show how the appearance of the transactions can be illustrated on different countries.
</li>
</ol>
</p>
<p>
<h4>Transaction value</h4>
On this page we link the total transaction value (in $) to an IP-address. We can see where the transactions with the highest value appear. The scale is of the total value is logaritmically scaled to improve readability.
</p>
<p>
<h4>Transaction propagation</h4>
Each transaction has be verified by different users. On this page we illustrate how a beforehand crawled transaction propagates through the world.
</p>
<p>
<h4>Extra features</h4>
There are some extra features in this project that we want elaborate.
<ul>
<li><strong>Day and night toggle</strong>:
it is possible to see if the activeness of the transaction appearance depends on the time of the day.
</li>
<li><strong>Log information</strong>:
a user who is interested in some extra information about the backend information can open a log information block.
</li>
</ul>
</p>
<br />
<p>Finally we want to say that we enjoyed working on this project and appreciate the given freedom to define our own scope. If you have any questions please contact us by email.
</p>
</div>
</div>
</div>
<div id="legenda"></div>
<div id="map-canvas"></div>
</body>
</html>