-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathassignment1.html
200 lines (182 loc) · 18.4 KB
/
assignment1.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
<html>
<head>
<meta charset="utf-8">
<title>Interactive Data Exploration, DIKU 2015</title>
<script src="js/jquery-1.11.3.min.js" type="application/javascript"></script>
<script src="js/ide.js" type="application/javascript"></script>
<link type="text/css" href="css/default.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Interactive Data Exploration, DIKU 2015</h1>
<p>Assignment 1</p>
<p>Deadline: 23. November 2015, 10:00 </p>
</header>
<section>
<div class="section">
<h2>1. Web-Server Limitations</h2>
<table>
<tr><td>Free Disk Quota</td><td>ca. 80GB</td></tr>
<tr><td>Traffic Limit</td><td>None / Unlimited</td></tr>
<tr><td>Other Features</td><td>PHP 5.5 (incl. Imagick Module) & MySQL</td></tr>
</table>
</div>
<div class="section">
<h2>2. Interactive Visualizations</h2>
<div class="subsection">
<h3>2.1 Google Public Data</h3>
<img class="preview" src="img/google-public-data.jpg" />
<a class="vis_page" href="https://www.google.com/publicdata/explore?ds=d5bncppjof8f9_&ctype=b&strail=false&nselm=s&met_x=sp_dyn_le00_in&scale_x=lin&ind_x=false&met_y=sp_dyn_tfrt_in&scale_y=lin&ind_y=false&met_s=sp_pop_totl&scale_s=lin&ind_s=false&dimp_c=country:region&ifdim=country&hl=en&iconSize=0.5&uniSize=0.035#!ctype=b&strail=false&bcs=d&nselm=s&met_x=sp_dyn_le00_in&scale_x=lin&ind_x=false&met_y=sp_dyn_tfrt_in&scale_y=lin&ind_y=false&met_s=sp_pop_totl&scale_s=lin&ind_s=false&dimp_c=country:region&ifdim=country&pit=1385074800000&hl=en_US&dl=en_US&ind=false">google.com/publicdata</a>
<h4>Description</h4>
<p>The diagram shows each country as a circle, where the size of the circle corresponds to the size of its population, the position on the x-axis corresponds to the life expectancy, and the position on the y-axis corresponds to the fertility rate. The data corresponding to the axes can be freely chosen among all data that is available in the <a href="http://www.worldbank.org/">World Bank</a>. The time progression over the years is additionally shown as an animation. Additionally, the circles are color coded by continent.
<p>In this particular example most of the countries have moved towards the bottom right corner of the diagram over time, which signifies that the fertility rate dropped and the life expectancy raised.</p>
<p>The visualization tool <a href="http://www.gapminder.org/">Gapminder.org</a> shows the same visualization developed by Hans Rosling and his team. In an older version of this tool it was further possible to separate the circles on click into their respective regions or provinces.</p>
<h4>Positive and Negative Aspects</h4>
<ul>
<li>Positive</li>
<ul>
<li>Lots of features in one visualization: data for both axes, population size as bubble size, continent by color code, and time progression by interactive slider or animation.</li>
<li>On mouse-over, information for each country is shown.</li>
<li>There is the possibility to show only countries from a specific region (i.e. filtering).</li>
<li>Countries can be compared based on a number of different values, e.g. the income level, gender or urban/rural areas.</li>
<li>The chart is showing the data over time progression.</li>
<li>There are 4 different chart types (Line Chart, Bar Chart, Map Chart, Bubble Chart), which can be used to visualize the data.</li>
<li>Scaling of the data can be chosen between linear and logarithmic.</li>
<li>Vast number of options for the axes, based on information of the <a href="http://www.worldbank.org/">World Bank</a></li>
<li>Option to show the trails in the animation to clearly show the development over time.</li>
<li>Possibility to upload own datasets to explore.</li>
</ul>
<li>Negative</li>
<ul>
<li>Number of options can be overwhelming.</li>
</ul>
</ul>
</div>
<div class="subsection">
<h3>2.2 World's Top Arms Exporters 2013</h3>
<img class="preview" src="img/arms-exports.jpg" />
<a class="vis_page" href="http://insightfulinteraction.com/armsexport.html">insightfulinteraction.com</a>
<h4>Description</h4>
<p>This chord diagram shows the origin and destination countries of weapon exports in 2013. It was developed by <a href="http://insightfulinteraction.com/about.html">Natalia Bronshtein</a> using d3.js and is based on data from the <a href="http://www.sipri.org/databases/armstransfers">SIPRI Arms Transfers Database</a>. The work is licensed under the Creative Commons Attribution 4.0 International License.</p>
<p>The diagram lists countries (or fighting factions) alphabetically on the outside of a circle and shows connections between weapon exporter and importer, where the volume of the export in $USD is indicated by the thickness of the connection at its base at the exporting country.</p>
<h4>Positive and Negative Aspects</h4>
<ul>
<li>Positive</li>
<ul>
<li>Diagram type suited to show volume of many-to-many relationships</li>
<li>More detailed information is available on mouseover</li>
<li>Countries are listed alphabetically and therefore easier to find</li>
</ul>
<li>Negative</li>
<ul>
<li>Countries are listed alphabetically, no visual indication of export volume by order</li>
<li>Lacks of drill down functionality especially for small weapon exporters</li>
<li>The visualizaton does not show the share of a country of the total weapon imports of a customer country. There is another <a href="http://insightfulinteraction.com/armsimport.html">visualization</a> which shows the imports</li>
</ul>
</ul>
</div>
<div class="subsection">
<h3>2.3 Inside Institutional Networks</h3>
<img class="preview" src="img/nature-vis.jpg" />
<a class="vis_page" href="http://www.nature.com/nature/journal/v527/n7577_supp/interactive/nature-collab.html">nature.com</a>
<h4>Description</h4>
<p>This network diagram shows the collaboration between research institutions. Institutions who published papers in journals that are tracked by the <a href="http://www.natureindex.com/">Nature Index</a> are the nodes. The volume of a node is determined by the research output and the clustering is based on the research output and the connections to other institutions. The thicker the connection to another institution is the more papers were published together. The color marks either the geographical region or the type of the institution (industry or university research).</p>
<p>The user has the posibility to select and display subsets by geography and change the coloring to either indicate the type of the instituion or the region.</p>
<p>The visualization was developed by Ian Calvert, Tamar Loach and Martin Szomszor of <a href="https://www.digital-science.com/">Digital Science</a> using the <a href="http://leafletjs.com/">leaflet</a> JavaScript library.</p>
<h4>Positive and Negative Aspects</h4>
<ul>
<li>Positive</li>
<ul>
<li>Clustering and color makes general pattern recognition easy</li>
<li>More detailed information is available on mouseclick</li>
<li>Subset selection allows to drill down up to a certain level</li>
</ul>
<li>Negative</li>
<ul>
<li>Hard to find individual institutes</li>
<li>Selection of multiple-subsets (North-American and European institutions or industry research institutions in Pacific Asia) is not possible</li>
<li>Clicking on each node is tedious (in comparison to mouseover with a small time interval)</li>
</ul>
</ul>
</div>
<div class="subsection">
<h3>2.4 WebGL Globe - World Population</h3>
<img class="preview" src="img/webgl-globe.jpg" />
<a class="vis_page" href="http://globe.chromeexperiments.com/">globe.chromeexperiments.com</a>
<a class="vis_page" href="https://github.com/dataarts/webgl-globe">webgl-globe@GitHub</a>
<h4>Description</h4>
<p>This visualization is displaying the worlds population for every approximately equally sized geographical chunk of the globe. The data can be selected for three different years: 1990, 1995, and 2000. The globe is rendered via WebGL and three.js, which allows the user to rotate the globe by dragging it with a mouse or the like.</p>
<h4>Positive and Negative Aspects</h4>
<ul>
<li>Positive</li>
<ul>
<li>Very good looking visuals.</li>
<li>Can be rotated to any point.</li>
<li>Rotation supports inertia effect.</li>
<li>Changing the data has an animated transition and does not abruptly change the visuals.</li>
<li>Project is open source and can be used with own data.</li>
</ul>
<li>Negative</li>
<ul>
<li>The changes of the data is not making a big difference.</li>
<li>The bin size (size of the geographical chunks) is fixed.</li>
<li>There is no zoom function to get a closer look at particular areas.</li>
</ul>
</ul>
</div>
</div>
<div class="section">
<h2>3. Individual Parts</h2>
<div class="subsection">
<h3>3.1 Bogdan</h3>
<h4>3.1.1 Description</h4>
<p>My idea of an interactive visualization, I would like to build after this course has finished, is a Köppen–Geiger climate classification system. Even though the data visualized is not very impressive, I believe that this interactive map chart would be utterly useful for students, who are interestied in learning the climate zones in an interactive way.</p>
<h4>3.1.2 What should the accompanying text say about the visualization?</h4>
<p>The accompanying text will shortly describe the climate classification groups</p>
<h4>3.1.3 What story would the combination of text and visualization tell?</h4>
<p>The combination of text and visualization would tell how the climate areas are positioned on the world map, what are the main characteristics of each climate zone and how do they resemble to each other.</p>
<h4>3.1.4 Who is the intended audience?</h4>
<p>The intended audience are students who are interested in geography and are willing to learn about the climate areas in an interactive way.</p>
<h4>3.1.5 Where would you get the dataset from?</h4>
<p>I will get the dataset used for the interactive visualization from <a href="http://www.cid.harvard.edu/ciddata/geographydata.htm">Center for International Development</a> at Harvard University.</p>
<h4>3.1.6 A sketch or mockup of the visualization.</h4>
<p>In general, the map chart will look like the one below, where there is the possibility to select one of the continents for a better insight view. On mouseover, each climate area will provide additional information about that climate zone.</p>
<div class="mockup"><img src="img/world_map.png" width="850" height="500"/></div>
</div>
<div class="subsection">
<h3>3.2 Hauke</h3>
<h4>3.2.1 Premise</h4>
<p>I would like to visualize data from the matches of professional Counter Strike: Global Offensive teams. Every match is recorded as a so called demo. Analysing those demo files from a tactical standpoint could help teams to figure out counter tactics in preparation for a match, identifying their opponents favourite and most effective spots on a heatmap of the game world.</p>
<h4>3.2.2 Who is the intended audience?</h4>
<p>The intended audience are (professional) Counter Strike players, coaches, e-sport commentators or anyone who wants to show the play style of a team.</p>
<h4>3.2.3 What should the accompanying text say about the visualization?</h4>
<p>The accompanying text should explain the possiblities the user has in interacting with the visualization. As of now I plan to enable users to upload their own demos and to let them analyse them using the visualization tools I provide. This also affects the next section:</p>
<h4>3.2.4 What story would the combination of text and visualization tell?</h4>
<p>There are many stories the visualization can tell if I enable users to analyse their own demos. I think this would provide the most gain for the users. If that is not within the guidelines of this class I can also use this system to get the "static" interactive visualization of just one professional, high-profile Counter-Strike: Global Offensive match and provide more "static" texts hinting the user to interesting properties of each teams play style in that particular match.</p>
<p>The interactive elements should allow the user to select different sets of the up to 30 rounds per game. There are "economy-rounds" ("eco") in which one of the teams didn't have enough money at the start to buy rifles, "force" rounds, where the teams doesn't have enough money to fully equip and "full-buy" rounds. Depending on their equipment I expect professional team to adapt their tactic which should be visible on the heatmap. These are the stories I want to tell.</p>
<h4>3.2.5 Where would you get the dataset from?</h4>
<p>Demos of official professional matches are publicly available. There are libraries that extract events (like "weapon fired", "bomb planted") from demo files which can be visualized. Examples are <a href="https://github.com/mikeemoo/jsgo">jsgo</a> for node.js and the official <a href="https://github.com/csgo-data/demoinfogo-mirror">Demoinfogo</a> in C++.</p>
<h4>3.2.6 A sketch or mockup of the visualization.</h4>
<div class="mockup"><img src="img/hauke_draft.png" /></div>
</div>
<div class="subsection">
<h3>3.3 Marco</h3>
<h4>3.3.1 Premise</h4>
<p>I do not have a definite data set at this moment. Therefore, the current idea is only tentative. It is quite difficult to think about a visualization without knowing the exact features of the data I will get.</p>
</p>I am using the following scenario as a premise: I would like to get a dataset of measurements done by healthcare professionals or individuals with access to equipment in order to make their own measurements (e.g. blood pressure, blood glucose, body temperature, oxygenation, heart rate, etc.). Additionally, there should be some labels available, which show the current health status of the corresponding (e.g. healthy, experiencing symptom X or ill with a specific disease Y).</p>
<h4>3.3.2 What should the accompanying text say about the visualization?</h4>
<p>The accompanying text should explain how to interpret the visualization and explain the controls, i.e. the interactive elements of the visualization. The interactivity could be switching between different types of measurements. At a later stage, the visualization could “follow” the development of the measurements for one specific individual.</p>
<h4>3.3.3 What story would the combination of text and visualization tell?</h4>
<p>The combination of text and visualization would tell how to see correlations between the measurements and the health status of the user, and in the future the trend or development for a specific user over time. It would be used to find correlations or to simply show the current estimation (or prediction) of the user’s health.</p>
<h4>3.3.4 Who is the intended audience?</h4>
<p>The intended audience are health professionals and users who are interested in an indicator for their health based on their measurements.</p>
<h4>3.3.5 Where would you get the dataset from?</h4>
<p>Healthcare facilities/departments or lifelogging communities. However, healthcare facilities have often rigorous non-disclosure requirements and rules for anonymization of data, which might cause a time issue. Lifelogging enthusiasts are often more willing to offer their data with the prospect of gaining some insight. Furthermore, their data often includes relevant data, as they collect a vast number of information. Unfortunately, their data may be quite sparse or “dirty”, i.e. the measurements may be very infrequent and have missing or wrong information.</p>
<h4>3.3.6 A sketch or mockup of the visualization.</h4>
<div class="mockup"><img src="img/hon_complete.png" /></div>
</div>
</div>
</section>
<footer></footer>
</body>
</html>