-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
299 lines (276 loc) · 18.6 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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K71830XVTD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-K71830XVTD');
</script>
<!-- Hotjar Tracking Code for Lumos Homepage -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:5200058,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<title>Lumos | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lumos: Increasing Awareness of Analytic Behavior during Visual Data Analysis">
<meta name="author" content="Arpit Narechania">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://lumos-vis.github.io/">
<meta property="og:title" content="Lumos">
<meta property="og:description"
content="Lumos: Increasing Awareness of Analytic Behavior during Visual Data Analysis">
<meta property="og:image"
content="https://raw.githubusercontent.com/lumos-vis/lumos-vis.github.io/main/assets/images/overview.png">
<!--<meta property="og:video" content="">-->
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="http://lumos-vis.github.io/">
<meta property="twitter:title" content="Lumos">
<meta property="twitter:description"
content="Lumos: Increasing Awareness of Analytic Behavior during Visual Data Analysis">
<meta property="twitter:image"
content="https://raw.githubusercontent.com/lumos-vis/lumos-vis.github.io/main/assets/images/overview.png">
<meta property="twitter:site" content="@arpitnarechania">
<meta property="twitter:creator" content="@arpitnarechania">
<link rel="shortcut icon" href="./assets/images/favicon.ico">
<link
href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<!-- FontAwesome JS -->
<script defer src="./assets/fontawesome/js/all.js"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="./assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="./assets/plugins/elegant_font/css/style.css">
<link rel="stylesheet" href="./assets/plugins/prism/prism.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="./assets/css/styles.css">
<!-- Custom CSS -->
<link id="custom-style" rel="stylesheet" href="./assets/css/custom.css">
<style>
.image-background {
width: 500px;
/* Set width of the div */
height: 300px;
/* Set height of the div */
background-image: url('./assets/images/overview.png');
/* Set the image as background */
background-size: cover;
/* Ensures the image covers the entire div */
background-position: center;
/* Centers the image in the div */
background-repeat: no-repeat;
/* Prevents the image from repeating */
}
</style>
</head>
<body class="landing-page">
<!-- GITHUB BUTTON JS -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<div class="page-wrapper">
<!-- ******Header****** -->
<header class="header text-center">
<div class="container">
<div class="branding">
<h1 class="logo">
<img src="./assets/images/logo.png" class="img-center" width="250" alt="Lumos logo" />
</h1>
</div><!--//branding-->
<div class="tagline">
<p>Mitigating Exploration Biases during Visual Data Analysis</p>
<small>Georgia Institute of Technology, Emory University</small>
</div><!--//tagline-->
<div class="cta-container">
<a class="btn btn-primary btn-cta m-xs" href="http://github.com/lumos-vis" target="_blank"><i
class="fab fa-github"></i> View on GitHub</a>
</div><!--//cta-container-->
</div><!--//container-->
</header><!--//header-->
<section class="cards-section text-center">
<div class="container">
<div class="intro">
<h2>Hi, Welcome to the Lumos Organization!</h2>
<br />
<p class="text-left">Visual data analysis tools provide people with the agency and flexibility to
explore data using a variety of interactive functionality. However, this flexibility may
introduce potential consequences in situations where users unknowingly over- or under-emphasize
specific subsets of the data or attribute space they are analyzing. For example, users may
overemphasize specific attributes and/or their values (e.g., Gender is always encoded on the X
axis), underemphasize others (e.g., Religion is never encoded), ignore a subset of the data
(e.g., older people are filtered out), etc.
</p>
<p class="text-left">To increase awareness of and mitigate such "exploration biases", we have thus far undertaken three projects: BiasBuzz (ACM CHI LBW'24); Left, Right, and Gender (IEEE VIS'21); and Lumos (IEEE VIS'21). Check them out!!!</p>
<hr>
<div>
<h4><strong>BiasBuzz</strong></h4>
<h5><i>Combining Visual Guidance with Haptic Feedback</i></h5>
<h6 class="text-secondary text-bold">Jamal Paden*, Arpit Narechania*, Alex Endert</h6>
<div>(* equal contribution)</div>
<br/>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/8Wm7GvN9c90?rel=0&showinfo=0" frameborder="0"
allowfullscreen></iframe>
</div>
<br />
<div>
<a class="btn btn-info btn-cta m-xs" href="https://arpitnarechania.github.io/docs/publications/biasbuzz_chi_2024.pdf"
target="_blank" download><i class="fas fa-file-pdf"></i> Paper (ACM CHI LBW'24)</a>
<a class="btn btn-success btn-cta m-xs" href="https://arpitnarechania.github.io/docs/posters/biasbuzz_chi_2024.pdf" target="_blank"
download><i class="fas fa-image"></i> Poster</a>
</div>
</br>
<p class="text-left">
During visual data analysis, users may inadvertently focus more on certain aspects of data, affecting analysis outcome(s). Existing tools primarily rely on visual cues (e.g., highlight already visited data) to increase user awareness of such analytic behaviors. We believe this single, visual modality is a passive form of guidance that adds to users' cognitive load already engaged in analysis. We investigate how a dual modality (visual guidance and haptic feedback) can capture users' attention and more actively guide them in their pursuits. We interface an existing visual data analysis tool with a gaming mouse. This enhanced system tracks user interactions and communicates biases by vibrating the mouse (haptic) and simultaneously displaying contextual information in the tool (visual). A formative study with nine users revealed that this dual modality increased analytical awareness in some cases but some users found the haptic mouse vibrations to be distracting and disturbing, informing the design of future multimodal user interfaces.
</p>
<div class="text-left">
<p><strong>Citation:</strong></p>
<pre style="background: #efefef">
@article{paden2024biasbuzz,
title={{BiasBuzz: Combining Visual Guidance with Haptic Feedback to Increase Awareness of Analytic Behavior during Visual Data Analysis}},
author={Paden, Jamal and Narechania, Arpit and Endert, Alex},
journal={ACM CHI LBW},
year={2024},
publisher={ACM},
url={https://doi.org/10.1145/3613905.3651064}
}
</pre>
</div>
</div>
<hr>
<div>
<h4><strong>Left, Right, and Gender</strong></h4>
<h5><i>Exploring Interaction Traces to Mitigate Human Biases</i></h5>
<h6 class="text-secondary text-bold">Emily Wall*, Arpit Narechania*, Adam Coscia, Jamal Paden, Alex Endert</h6>
<div>(* equal contribution)</div>
<br/>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/hdKZnSeg-Hw?rel=0&showinfo=0" frameborder="0"
allowfullscreen></iframe>
</div>
<br />
<div>
<a class="btn btn-info btn-cta m-xs" href="https://arpitnarechania.github.io/docs/publications/left-right-gender_vis_2021.pdf"
target="_blank" download><i class="fas fa-file-pdf"></i> Paper (IEEE VIS'21)</a>
<a class="btn btn-dark btn-cta m-xs" href="https://youtu.be/z_DHjMe7ZZg"
target="_blank"><i class="fas fa-video"></i> Talk (IEEE VIS'21)</a>
</div>
</br>
<p class="text-left">
Human biases impact the way people analyze data and make decisions. Recent work has shown that some visualization designs can better support cognitive processes and mitigate cognitive biases (i.e., errors that occur due to the use of mental "shortcuts"). In this work, we explore how visualizing a user's interaction history (i.e., which data points and attributes a user has interacted with) can be used to mitigate potential biases that drive decision making by promoting conscious reflection of one's analysis process. Given an interactive scatterplot-based visualization tool, we showed interaction history in real-time while exploring data (by coloring points in the scatterplot that the user has interacted with), and in a summative format after a decision has been made (by comparing the distribution of user interactions to the underlying distribution of the data). We conducted a series of in-lab experiments and a crowd-sourced experiment to evaluate the effectiveness of interaction history interventions toward mitigating bias. We contextualized this work in a political scenario in which participants were instructed to choose a committee of 10 fictitious politicians to review a recent bill passed in the U.S. state of Georgia banning abortion after 6 weeks, where things like gender bias or political party bias may drive one's analysis process. We demonstrate the generalizability of this approach by evaluating a second decision making scenario related to movies. Our results are inconclusive for the effectiveness of interaction history (henceforth referred to as interaction traces) toward mitigating biased decision making. However, we find some mixed support that interaction traces, particularly in a summative format, can increase awareness of potential unconscious biases.
</p>
<div class="text-left">
<p><strong>Citation:</strong></p>
<pre style="background: #efefef">
@article{wall2021lrg,
title={{Left, Right, and Gender: Exploring Interaction Traces to Mitigate Human Biases}},
author={Wall, Emily and Narechania, Arpit and Coscia, Adam and Paden, Jamal and Endert, Alex},
journal={IEEE TVCG},
year={{2022}},
url={https://doi.org/10.1109/TVCG.2021.3114862},
publisher={IEEE}
}
</pre>
</div>
</div>
<hr/>
<div>
<h4><strong>Lumos</strong></h4>
<h5><i>Increasing Awareness of Analytic Behavior during Visual Data Analysis</i></h5>
<h6 class="text-secondary text-bold">Arpit Narechania, Adam Coscia, Emily Wall, Alex Endert</h6>
<div>(* equal contribution)</div>
<br/>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/PuGotlGpqgY?rel=0&showinfo=0" frameborder="0"
allowfullscreen></iframe>
</div>
<br />
<div>
<a class="btn btn-info btn-cta m-xs" href="https://arpitnarechania.github.io/docs/publications/lumos_vis_2021.pdf"
target="_blank" download><i class="fas fa-file-pdf"></i> Paper (IEEE VIS'21)</a>
<a class="btn btn-dark btn-cta m-xs" href="https://youtu.be/ZEfgMYWi-9g"
target="_blank"><i class="fas fa-video"></i> Talk (IEEE VIS'21)</a>
<a class="btn btn-success btn-cta m-xs" href="https://arpitnarechania.github.io/docs/posters/lumos_cridc_2021.pdf" target="_blank"
download><i class="fas fa-image"></i> Poster (CRIDC'21)</a>
<a class="btn btn-orange btn-cta m-xs"
href="https://lumos-webapp-4aeadb3bf30d.herokuapp.com/" target="_blank"><i
class="fas fa-rocket"></i> Live Demo</a>
</div>
</br>
<p class="text-left">Lumos is a visual data analysis tool that captures and shows the
interaction
history with data to increase awareness of such analytic behaviors. Using in-situ (at the
place
of interaction) and ex-situ (in an external view) visualization techniques, Lumos provides
real-time feedback to users for them to reflect on their activities. For example, Lumos
highlights datapoints that have been previously examined in the same visualization (in-situ)
and
also overlays them on the underlying data distribution (i.e., baseline distribution) in a
separate visualization (ex-situ). Through a user study with 24 participants, we investigate
how
Lumos helps users' data exploration and decision-making processes. We found that Lumos
increases
users' awareness of visual data analysis practices in real-time, promoting reflection upon
and
acknowledgement of their intentions and potentially influencing subsequent interactions.
</p>
<div class="text-left">
<p><strong>Citation:</strong></p>
<pre style="background: #efefef">
@article{narechania2021lumos,
title={{Lumos: Increasing Awareness of Analytic Behavior during Visual Data Analysis}},
author={Narechania, Arpit and Coscia, Adam and Wall, Emily and Endert, Alex},
journal={IEEE TVCG},
year={{2022}},
url={https://doi.org/10.1109/TVCG.2021.3114827}],
publisher={IEEE}
}
</pre>
</div>
</div>
</div><!--//intro-->
</div><!--//container-->
</section><!--//cards-section-->
</div><!--//page-wrapper-->
<footer class="footer text-center">
<div class="container">
<p>
Lumos Organization<br />
<small>Georgia Institute of Technology, Emory University © 2024</small>
</p>
<!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
<small class="copyright">Designed with <i class="fas fa-heart"></i> by <a
href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Main Javascript -->
<script type="text/javascript" src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./assets/plugins/prism/prism.js"></script>
<script type="text/javascript" src="./assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="./assets/plugins/lightbox/dist/ekko-lightbox.min.js"></script>
<script type="text/javascript" src="./assets/plugins/stickyfill/dist/stickyfill.min.js"></script>
<script type="text/javascript" src="./assets/js/main.js"></script>
</body>
</html>