design and implementation of interactive data visualization method in practical uses
TRANSCRIPT
![Page 1: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/1.jpg)
Design and Implementation of Interactive Data Visualization Method in Practical Usesインタラクティブな情報可視化⼿法の実利⽤に向けた設計と実装
M. C. 2nd yearHe ChenKitamura lab
1
![Page 2: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/2.jpg)
Background
Digital Content in Practical Uses
Lack of ❖a comprehensive
visualization for diverse content
❖flexibility in interactive arrangement
❖ context adaptive visualization
2
![Page 3: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/3.jpg)
Background
Demand
❖An interactive content visualization framework1. diverse content2. flexible interaction3. multiple interactive scenarios
3
![Page 4: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/4.jpg)
Related Work(1/2)❖ Interactive By-example Design of Artistic Packing
Layouts [SIGGRAPH Asia 2013]
4
![Page 5: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/5.jpg)
Related Work(1/2)❖ Benefit
❖ Infer packing layouts by examples❖ Limitation in flexibility
❖ High dimensional metadata
5
![Page 6: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/6.jpg)
Related Work(2/2)❖ The Bohemian Bookshelf [CHI 2012]
6
![Page 7: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/7.jpg)
❖ Serendipitous discovery❖ Flexible visual pathways❖ Highlighting adjacencies❖ A playful exploration
❖ Limitation in flexibility❖ Transition between open-ended and targeted
browsing
7
Related Work(2/2)
![Page 8: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/8.jpg)
Possible Foundation D-Flip: Dynamic & Flexible Interactive PhotoShow
❖ Dynamically show overview & detail of photos without overlaps
❖ Flexible in arranging photos based on its metadata
❖ Playful experience
8
Chi Thanh Vi, Kazuki Takashima, Hitomi Yokoyama, Gengdai Liu, Yuichi Itoh, Sriram Subramanian, Yoshifumi Kitamura, A dynamic & flexible interactive display method of digital photographs, Entertainm. Comput. (2014)
![Page 9: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/9.jpg)
Overview of This Research
9
2. flexible interaction
3. multiple interactive scenarios
1. diverse content
An Interactive Content Visualization Framework
D-Flip -- Foundation�
![Page 10: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/10.jpg)
Original
+Photo ❖ Shooting time & location
❖ Tagged RIO ❖ Color
Extension Examples
+
+
+
Music❖ Composer ❖ Lyricist ❖ Singer ❖ Genre
Movie❖ Title ❖ Producer ❖ Director ❖ Actor
10
❖ A comprehensive framework❖ High dimensional metadata
Extension
Purpose: 1. Diverse Content
![Page 11: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/11.jpg)
11
❖ Allow & entice user exploration
Extension
Purpose: 2. Flexible Interaction
![Page 12: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/12.jpg)
12
❖ A wide range of usage contexts
Extension
Purpose: 3. Multiple Interactive Scenarios
Original Scenario ❖ Desktop display ❖ Mouse interaction
Extension Examples ❖ Multi-touch display ❖ Whole body interaction
![Page 13: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/13.jpg)
Design Concepts of Extension
1. Diverse Content2. Flexible Interaction
❖ wall label❖ clustering❖ interactive venn diagram❖ dynamic sorting
3. Multiple Interactive Scenarios❖ multi-touch interaction❖ whole body interaction
13
![Page 14: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/14.jpg)
Design Concepts of Extension
1. Diverse Content2. Flexible Interaction
❖ wall label❖ clustering❖ interactive venn diagram❖ dynamic sorting
3. Multiple Interactive Scenarios❖ multi-touch interaction❖ whole body interaction
14
![Page 15: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/15.jpg)
Diverse Content
Metadata Management❖ Relational Database❖ XML❖ Flat File
15
![Page 16: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/16.jpg)
Diverse Content
Metadata Management❖ Relational Database❖ XML❖ Flat File
16
a MySQL example
![Page 17: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/17.jpg)
Diverse Content
Metadata Management❖ Relational Database❖ XML❖ Flat File
17
![Page 18: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/18.jpg)
Diverse Content
Metadata Management❖ Relational Database❖ XML❖ Flat File
18
An example of configuration:filePath | fileName | shooting time | creation time | tags | color
![Page 19: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/19.jpg)
Diverse Content
Metadata Management❖ Easy to maintain
❖ Relational Database❖ Easy to extend
❖ XML❖ Easy to implement
❖ Flat File
19
![Page 20: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/20.jpg)
Design Concepts of Extension
1. Diverse Content2. Flexible Interaction
❖ wall label❖ clustering❖ interactive venn diagram❖ dynamic sorting
3. Multiple Interactive Scenarios❖ multi-touch interaction❖ whole body interaction
20
![Page 21: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/21.jpg)
2. Flexible Interaction(1/4)
Wall Label❖ Spacial proximity
21
Content Metadata
Artwork
TitleArtistMuseumCountry
Flash Card
EnglishJapaneseChineseKorean
![Page 22: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/22.jpg)
22
❖ Relevancy: 0 / 1
Selected item (tagA, tagB)item(tagA)
item(tagB)item(tagA, tagB)
item(tagC)
2. Flexible Interaction(2/4)
Clustering
![Page 23: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/23.jpg)
23
❖ Relevancy: 0 ~ 1
Selected itemitem(0.9)
item(0.7)
item(0.8)item(0.5)
2. Flexible Interaction(2/4)
Clustering
![Page 24: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/24.jpg)
24
❖ a natural way to visualize intersections❖ targeted browsing
Metadata A Metadata B
item (A, B)
item(B)item
(A)
2. Flexible Interaction(3/4)
Interactive Venn Diagram
![Page 25: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/25.jpg)
25
❖ Value❖ Time❖ Season❖ Distance❖ …
2. Flexible Interaction(4/4)
Dynamic Sorting
![Page 26: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/26.jpg)
Design Concepts of Extension
1. Diverse Content2. Flexible Interaction
❖ wall label❖ clustering❖ interactive venn diagram❖ dynamic sorting
3. Multiple Interactive Scenarios❖ multi-touch interaction❖ whole body interaction
26
![Page 27: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/27.jpg)
3. Multiple Interactive Scenarios
Multi-Touch Interaction
27
❖ Individual / Collaborative work❖ Intuitive, fast, enjoyable to interact with
![Page 28: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/28.jpg)
3. Multiple Interactive Scenarios
Whole Body Interaction❖ Kinect + Wall display❖ Shadow metaphor connecting private & shared space❖ Promising for public settings
28
![Page 29: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/29.jpg)
Applications
❖ Flexible Interaction❖ Paintings for art appreciation
❖ Multiple interactive scenarios❖ Public walk-up-and-use display
29
![Page 30: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/30.jpg)
Application (1/2)
Paintings for Art Appreciation
Motivation:❖ Visualize a collection of paintings in a
playful way❖ Entice engaging interaction for art
appreciation
30
![Page 31: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/31.jpg)
Application (1/2)
Paintings for Art Appreciation
31
![Page 32: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/32.jpg)
Application (2/2)
Public Walk-up-and-use Display
Motivation:❖ Evaluate this visualization in public
settings❖ Observe people’s behavior towards this
interactive public display system
32
![Page 33: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/33.jpg)
Application (2/2)
Public Walk-up-and-use Display
33
RIEC Introduction Content
![Page 34: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/34.jpg)
34
❖Experiment Purpose❖Experiment Settings❖Results
❖ Behavioral Counting Data❖ Questionnaire ❖ Observed Gesture
❖Experiment Conclusion
Application (2/2)
Public Walk-up-and-use Display
![Page 35: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/35.jpg)
35
❖ Observe how people ❖ notice❖ approach ❖ interact
with our multi-touch public display system❖ Explore design factors for such system
Application (2/2)
Experiment Purpose
![Page 36: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/36.jpg)
Application (2/2)
Experiment Settings❖ Time: During RIEC Open Day, 10. 4 - 10. 5, 2014. ❖ Place: RIEC building #1, 1F lobby❖ RIEC Introduction Content
❖ 60 photos and text images ❖ 16 short video clips
36
• 4K 50inch TV display• Max 10-point multi-touch screen
![Page 37: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/37.jpg)
Application (2/2)
Results: Behavioral Counting Data
37
interacted 115stopped 176looked 414
passed by 1115official data: 585 visitors in two days
0%
25%
50%
75%
100%
Passed-By Looked Stopped Interacted
10.3%15.7%
37.1%
100%
![Page 38: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/38.jpg)
user experience
38
❖ 49 Questionnaires: 33 male, 16 female❖ positive feedback
Application (2/2)
Results: Questionnaire
![Page 39: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/39.jpg)
39
❖ want to use this in public places❖ restaurant, museum, theater, etc
❖ need enlarge the image❖ want to know detail of the content (link,
webpage)
Application (2/2)
Results: Questionnaire — Comments
![Page 40: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/40.jpg)
40
Tap
Drag
Enlarge
Flick
Continuous touch. Probable explanation: system reaction is slower than expected
Long time press. Probable explanation: touch takes effects after finger leaves
Application (2/2)
Results: Observed Gesture
![Page 41: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/41.jpg)
Application (2/2)
Experiment Conclusion
❖ Promising as interactive public display❖ Touch experience can be further improved,
e.g., enlarge, flick❖ Item’s detailed information can be
provided, e.g., link
41
![Page 42: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/42.jpg)
Summary❖ extended the original framework in three aspects
❖ diverse content❖ flexible interaction to entice user’s exploration❖ multiple interactive scenarios: individual/
collaborative work❖ applied design concepts
❖ paintings ❖ public walk-up-and-use display
42
![Page 43: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/43.jpg)
Future Work1. Diverse Content
❖ Metadata source, e.g., community website, image recognition
2. Flexible Interaction❖ Immersive
e.g., Visualization in 3D3. Multiple Interactive Scenarios
❖ Gaze interface, tangible interaction, etc43
![Page 44: Design and Implementation of Interactive Data Visualization Method in Practical Uses](https://reader036.vdocuments.net/reader036/viewer/2022062412/58edb2911a28ab4e3c8b463f/html5/thumbnails/44.jpg)
Thank you for your attention !
Q & A
44