-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
323 lines (303 loc) · 14.4 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>iStoryline Supplemental Material</title>
<style type="text/css">
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: flex;
justify-content: center;
}
.content-wrapper {
flex: 0 1 800px;
display: flex;
flex-direction: column;
/*padding: 0 550px;*/
}
.header-wrapper {
flex: 0 1 100px;
display: flex;
flex-direction: row;
}
.header {
flex: 0 1 80%;
}
.title1 {
font-size: 36px;
}
.github {
font-size: 24px;
}
.title2 {
font-size: 20px;
}
img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 2px;
}
.study {
box-shadow: none;
}
video {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 2px;
}
.interaction-header {
display: flex;
justify-content: center;
}
.project {
flex: 0 1 20%;
font-size: 14px;
font-variant: small-caps;
color: #2A5DB0;
text-align: right;
padding: 15px 0 0 15px;
}
.content {
flex: 0 1;
}
.section {
margin-bottom: 50px;
}
.section-title {
text-align: center;
}
.section-title-wrapper {
display: flex;
flex-direction: row
}
.section-title {
flex: 0 1 85%;
text-align: center;
font-size: 28px;
}
.section-gallery {
flex: 0 1;
font-size: 14px;
padding: 12px 0 0 0;
color: #2A5DB0;
}
.video-container {
display: flex;
justify-content: center;
padding-top: 20px;
}
.text-container {
text-align: justify;
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="header-wrapper">
<div class="header">
<div class="title1">
iStoryline <a class="github" href="https://github.com/tangtan/istoryline">Github</a>
</div>
<div class="title2">
Effective Converges to Hand-drawn Storylines
</div>
</div>
<div class="project">
<a href="https://istoryline.github.io/gallery/#/"><b>Hand-drawn Storylines Gallery</b></a>
</div>
</div>
<div class="content">
<section id="intro" class="section">
<!-- <img src="./img/teaser.png" width="100%"> -->
<div class="section-content video-container">
<!-- <iframe width="100%" height="400" src="https://www.youtube.com/embed/8aEC8OGVbtY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<video width="100%" height="480" controls onmouseover="this.play()">
<source src="./img/iStoryline.mp4">
</video>
</div>
<div class="section-content">
<p class="text-container">
Storyline visualization techniques have progressed significantly to generate illustrations of complex stories automatically. However, the visual layouts of storylines are not enhanced accordingly despite improvement in performance and the extension of its application area. The existing methods attempt to achieve several shared optimization goals, such as reducing empty space and minimizing line crossings and wiggles. However, these goals are not always conclusive. We conducted a preliminary study to learn how users translate a narrative into a hand-drawn storyline and to check whether the visual elements found in hand-drawn illustrations can be mapped back to appropriate narrative contexts. Moreover, we also compared the hand-drawn storylines with the output of the state-of-the-art automatic layout algorithms and found they have significant differences. Our findings and discussion lead to a design space that summarizes how artists utilize narrative elements and the sequence of actions that artists follow to portray expressive and attractive storylines. We developed an authoring tool, iStoryline, to integrate high-level user interactions into optimization algorithms and achieve a balance between hand-drawn storylines and automatic layouts. iStoryline allows users to create easily a new storyline layout according to their preferences by adjusting an automatically generated layout. The effectiveness and usability of the authoring tool are studied with qualitative evaluations.
</p>
<p class="text-container">
Three design principles (D1 to D3) and three optimization goals (O1 to O3) are defined to track the evolution of relationships between entities and generate aesthetically pleasing and compact storylines automatically.
</p>
<ul>
<li><b>D1</b> Lines belonging to the same group should appear next to each other</li>
<li><b>D2</b> Otherwise, lines must be far from each other</li>
<li><b>D3</b> A line must keep straight unless the group where is belongs changes</li>
</ul>
<ul>
<li><b>O1</b> Reducing line wiggles</li>
<li><b>O2</b> Reducing line crossings</li>
<li><b>O3</b> Reducing white space</li>
</ul>
<p class="text-container">
For the <a href="https://vimeo.com/289785328">preview</a> and the <a href="https://vimeo.com/299869127">oral talk</a> on IEEE VIS 2018 (Berlin).
</p>
</div>
</section>
<!-- <section id="demo" class="section">
<div class="section-title"><b>Video</b></div>
<div class="section-content video-container">
<iframe width="80%" height="400" src="https://www.youtube.com/embed/8aEC8OGVbtY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section> -->
<section id="designspace" class="section">
<div class="section-title"><b>Design Space</b></div>
<div class="video-container">
<img src="./img/designspace.png" width="60%" height="60%">
</div>
<div class="section-content">
<p class="text-container">
We conduct a two-stage preliminary study to understand the design space of storyline visualization. In the first stage, participants manually draw a storyline layout of a narrative and we identify visual elements which are widely used in hand-drawn storylines. In the second stage, the participants are asked to map a selection of visual elements back to their narrative elements.
</p>
<div class="video-container">
<img src="./img/study.png" width="60%" height="60%">
</div>
<h3>First Stage</h3>
<p class="text-container">
The goal is to examine what users consider as important narrative elements, what visual elements are commonly used for narratives in the hand-drawn layouts, and the pipeline of creating storylines.
</p>
<h4>Procedure</h4>
<ol class="text-container">
<li>The study starts with three introductory lectures on information visualization and a detailed lecture on storyline visualization.</li>
<li>Each participant is asked to select a story and draw a storyline using pen-and-paper, and we collect their illustrations for further study.</li>
<li>We identify visual elements from hand-drawn storylines and conduct interviews with participants who propose novel designs.</li>
</ol>
<p class="text-container">
All hand-drawn storylines can be found in <a href="https://istoryline.github.io/gallery/#/"><b>the gallery</b></a>.
</p>
<h4>Interview</h4>
<p class="text-container">
We interviewed 14 participants who propose novel designs and produce compelling storylines. Their responses can be found in <a href="./interview/interview.html">the library</a>.
</p>
<h3>Second Stage</h3>
<p class="text-container">
The goal is to examine a selection of visual elements found in the first stage. First, we want to see whether these elements can be mapped back to meaningful narrative elements. Second, we want to know whether they affect the aesthetics and legibility of final storyline layouts, despite not exactly conforming to traditional design principles and optimization goals.
</p>
<h4>Tasks</h4>
<ol class="text-container">
<li>Describe the possible narrative meaning of the visual element and associate a narrative context to the visual element: an actor, a relationship or a story/event.</li>
<li>Rate the visual element in both the hand-drawn and automatic storyline conditions from different aspects.</li>
<li>Discuss the implication of the visual element in the storyline visualizations.</li>
</ol>
<h4>Procedure</h4>
<ol class="text-container">
<li>The study begin by showing a visual element and the participant is asked to start Task 1.</li>
<li>We present two stories containing the corresponding narrative elements, and the participant is asked to start Task 2.</li>
<li>The participant is asked to discuss whether the given visual element can convey the narrative content in the hand-drawn illustrations in Task 3.</li>
</ol>
</div>
</section>
<section id="system" class="section">
<div class="section-title"><b>System Overview</b></div>
<img src="./img/interface.png" width="100%">
<div class="section-content">
<p class="text-container">
iStoryline is composed of three UI components. (a) shows the panels that controls the visual properties of storylines. (b) is the visualization canvas. (c) presents easy-to-use interactions which enable users to lay out storylines according to their design preference.
</p>
<p class="text-container">
iStoryline provides five high-level interactions which enable users to re-layout storylines.
</p>
<div class="interaction-wrapper">
<div class="interaction-header"><h3>Shifting</h3></div>
<div class="video-container">
<video width="70%" height="360px" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="./img/interactions/shifting.mp4">
</video>
</div>
</div>
<div class="interaction-wrapper">
<div class="interaction-header"><h3>Bending</h3></div>
<div class="video-container">
<video width="70%" height="360px" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="./img/interactions/bending.mp4">
</video>
</div>
</div>
<div class="interaction-wrapper">
<div class="interaction-header"><h3>Scaling</h3></div>
<div class="video-container">
<video width="70%" height="360px" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="./img/interactions/scaling.mp4">
</video>
</div>
</div>
<div class="interaction-wrapper">
<div class="interaction-header"><h3>Curving</h3></div>
<div class="video-container">
<video width="70%" height="360px" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="./img/interactions/curving.mp4">
</video>
</div>
</div>
<div class="interaction-wrapper">
<div class="interaction-header"><h3>Twining</h3></div>
<div class="video-container">
<video width="70%" height="360px" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="./img/interactions/twining.mp4">
</video>
</div>
</div>
</div>
</section>
<section id="evaluation" class="section">
<div class="section-title"><b>Study Results</b></div>
<p class="text-container">
We conducted a task-based study to assess the effectiveness and intuitiveness of the interactions supported by iStoryline, and we further held a semi-structured interview with the participants. We recruited 12 students (6 males and 6 females). Nine of them had experience using graphics editors, such as Adobe Illustrator and Photoshop, while others did not have such experiences. We asked participants to generate a storyline layout by interactively adjusting one automatically-generated layouts using iStoryline. All managed to complete the task successfully.
</p>
<p class="text-container">
Below are the results.
</p>
<div class="study-wrapper">
P1 <br>
<img class="study" src="./img/results/P1.png" width="600px">
</div>
<div class="study-wrapper">
P2 <br>
<img class="study" src="./img/results/P2.png" width="600px">
</div>
<div class="study-wrapper">
P3 <br>
<img class="study" src="./img/results/P3.png" width="600px">
</div>
<div class="study-wrapper">
P4 <br>
<img class="study" src="./img/results/P4.png" width="600px">
</div>
<div class="study-wrapper">
P5 <br>
<img class="study" src="./img/results/P5.png" width="600px">
</div>
<div class="study-wrapper">
P6 <br>
<img class="study" src="./img/results/P6.png" width="600px">
</div>
<div class="study-wrapper">
P7 <br>
<img class="study" src="./img/results/P7.png" width="600px">
</div>
<div class="study-wrapper">
P8 <br>
<img class="study" src="./img/results/P8.png" width="600px">
</div>
<div class="study-wrapper">
P9 <br>
<img class="study" src="./img/results/P9.png" width="600px">
</div>
<div class="study-wrapper">
P10 <br>
<img class="study" src="./img/results/P10.png" width="600px">
</div>
<div class="study-wrapper">
P11 <br>
<img class="study" src="./img/results/P11.png" width="600px">
</div>
<div class="study-wrapper">
P12 <br>
<img class="study" src="./img/results/P12.png" width="600px">
</div>
</section>
</div>
</div>
</body>
</html>