ProtoVis

1
ProtoVis

• Peter Sikachev

Institute of Computer Graphics and
Algorithms Vienna University of Technology
2
Overview

• Introduction
• Language Design
• Integration into VolumeShop Plugin
• Discussion

3
Overview

• Introduction
• Language Design
• Integration into VolumeShop Plugin
• Discussion

4
Tool Selection Criterias

• expressiveness (Can I build it?)
• efficiency (How long will it take?)
• accessibility (Do I know how?)

5
High-level vs Low-level

• APIs
• OpenGL, Java2D, Processing
• Higher-level tools
• Flash, Piccolo
• Visualization Toolkits
• InfoVis Toolkit, Improvis, Prefuse, Flare
• Consumer software
• Excel, Google Spreadsheets

6
High-level vs Low-level

• APIs
• Only imperative methods for primitives
• Higher-level tools
• Visualization Toolkits
• Consumer software

7
High-level vs Low-level

• APIs
• Only imperative methods for primitives
• Higher-level tools
• Still no visualization abstractions
• Visualization Toolkits
• Consumer software

8
High-level vs Low-level

• APIs
• Only imperative methods for primitives
• Higher-level tools
• Still no visualization abstractions
• Visualization Toolkits
• Customized vis ? software engineering
• Even simple tasks might be hard to implement
• Consumer software

9
High-level vs Low-level

• APIs
• Only imperative methods for primitives
• Higher-level tools
• Still no visualization abstractions
• Visualization Toolkits
• Customized vis ? software engineering
• Even simple tasks might be hard to implement
• Consumer software
• Limited to what is in GUI

10
Overview

• Introduction
• Language Design
• Integration into VolumeShop Plugin
• Discussion

11
Marks

• Basic grammar primitive
• Generated once per associated datum
• Mapping visual properties (position, color etc)

12
Panels

• Mark containers
• Marks replication

13
Other Stuff

• Event handlers special properties for adding
  interactivity
• Anchors related marks, positioned
• Inside/nearby (e. g., labels)

14
Example
15
Example
16
Example
17
Example
18
Example
19
Example
20
Example
21
More Examples
http//vis.stanford.edu/protovis/
22
Overview

• Introduction
• Language Design
• Integration into VolumeShop Plugin
• Discussion

23
Motivation

• Rich InfoVis sample gallery
• Independency from data generation
• Cheap interactivity via JavaScript

24
Challenges

• Integration with Qt and VolumeShop
• Dual way data and event transfer
• GUI exporting (not discussed)

25
Challenges

• Integration with Qt and VolumeShop
• Dual way data and event transfer
• GUI exporting (not discussed)

26
Porting

• No stable C port
• Using QWebView
• Rendering an html page with JavaScript, running
  on it

27
Challenges

• Integration with Qt and VolumeShop
• Dual way data and event transfer
• GUI exporting (not discussed)

28
Data Transfers

• Update data visualized by ProtoVis
• Get feedback from ProtoVis event handlers

29
Data Transfers

• Update data visualized by ProtoVis
• Get feedback from ProtoVis event handlers

30
Data Transfers
31
Data Transfers

• Update data visualized by ProtoVis
• Get feedback from ProtoVis event handlers

32
Data Transfers
33
Data Transfers

• Calling ProtoVis functions
• Using QWebFrameaddToJavaScriptWindowObject and
• QWebFrameevaluateJavaScript
• Calling C functions from ProtoVis event
  handlers
• Introduce class, inheriting QObject with
  functions, defined as slots

34
Event Handling

• Other plugins might need to know about the
  events, fired by ProtoVis
• Special events are fired for the shared resource
  (shader)

35
Overview

• Introduction
• Language Design
• Integration into VolumeShop Plugin
• Discussion

36
ProtoVis vs Others

1. ProtoVis
2. Processing
3. Flare

37
Personal Experience

• Suited for static data and static windows
• Cant use convenient in-built conversions
• Data is transferred as a function
• Not for large datasets
• Prefilter data
• Might be not an issue in Java port
• Very convenient interaction
• Tricky in debugging
• Can use browser
• Data, coming from application

38
Questions?