ProtoVis

Peter Sikachev

Institute of Computer Graphics and Algorithms

Vienna University of Technology

Peter Sikachev 2

Overview

Introduction

Language Design

Integration into VolumeShop Plugin

Discussion

Peter Sikachev 3

Overview

Introduction

Language Design

Integration into VolumeShop Plugin

Discussion

Peter Sikachev 4

Tool Selection Criterias

expressiveness (“Can I build it?”)

efficiency (“How long will it take?”)

accessibility (“Do I know how?”)

Peter Sikachev 5

High-level vs Low-level

API’s

OpenGL, Java2D, Processing

Higher-level tools

Flash, Piccolo

Visualization Toolkits

InfoVis Toolkit, Improvis, Prefuse, Flare

Consumer software

Excel, Google Spreadsheets

Peter Sikachev 6

High-level vs Low-level

API’sOnly imperative methods for primitives

Higher-level tools

Visualization Toolkits

Consumer software

Peter Sikachev 7

High-level vs Low-level

API’sOnly imperative methods for primitives

Higher-level tools Still no visualization abstractions

Visualization Toolkits

Consumer software

Peter Sikachev 8

High-level vs Low-level

API’sOnly imperative methods for primitives

Higher-level tools Still no visualization abstractions

Visualization ToolkitsCustomized vis → software engineering

Even simple tasks might be hard to implement

Consumer software

Peter Sikachev 9

High-level vs Low-level

API’sOnly imperative methods for primitives

Higher-level tools Still no visualization abstractions

Visualization ToolkitsCustomized vis → software engineering

Even simple tasks might be hard to implement

Consumer softwareLimited to what is in GUI

Peter Sikachev 10

Overview

Introduction

Language Design

Integration into VolumeShop Plugin

Discussion

Peter Sikachev 11

Marks

Basic grammar primitive

Generated once per associated datum

Mapping visual properties (position, color etc)

Peter Sikachev 12

Panels

Mark containers

Marks replication

Peter Sikachev 13

Other Stuff

Event handlers: special properties for adding interactivity

Anchors: related marks, positioned

Inside/nearby (e. g., labels)

Peter Sikachev 14

Example

Peter Sikachev 15

Example

Peter Sikachev 16

Example

Peter Sikachev 17

Example

Peter Sikachev 18

Example

Peter Sikachev 19

Example

Peter Sikachev 20

Example

Peter Sikachev 21

More Examples

http://vis.stanford.edu/protovis/

Peter Sikachev 22

Overview

Introduction

Language Design

Integration into VolumeShop Plugin

Discussion

Peter Sikachev 23

Motivation

Rich InfoVis sample gallery

Independency from data generation

Cheap interactivity via JavaScript

Peter Sikachev 24

Challenges

Integration with Qt and VolumeShop

Dual way data and event transfer

GUI exporting (not discussed)

Peter Sikachev 25

Challenges

Integration with Qt and VolumeShop

Dual way data and event transfer

GUI exporting (not discussed)

Peter Sikachev 26

Porting

No stable C++ port

Using QWebView

Rendering an html page with JavaScript, running on it

Peter Sikachev 27

Challenges

Integration with Qt and VolumeShop

Dual way data and event transfer

GUI exporting (not discussed)

Peter Sikachev 28

Data Transfers

Update data visualized by ProtoVis

Get feedback from ProtoVis event handlers

Peter Sikachev 29

Data Transfers

Update data visualized by ProtoVis

Get feedback from ProtoVis event handlers

Peter Sikachev 30

Data Transfers

Peter Sikachev 31

Data Transfers

Update data visualized by ProtoVis

Get feedback from ProtoVis event handlers

Peter Sikachev 32

Data Transfers

Peter Sikachev 33

Data Transfers

Calling ProtoVis functions

Using QWebFrame::addToJavaScriptWindowObject and

QWebFrame::evaluateJavaScriptCalling C++ functions from ProtoVis event handlers

Introduce class, inheriting QObject with functions, defined as slots

Peter Sikachev 34

Event Handling

Other plugins might need to know about the events, fired by ProtoVis

Special events are fired for the shared resource (shader)

Peter Sikachev 35

Overview

Introduction

Language Design

Integration into VolumeShop Plugin

Discussion

Peter Sikachev 36

ProtoVis vs Others

a) ProtoVis

b) Processing

c) Flare

Peter Sikachev 37

Personal ExperienceSuited for static data and static windows

Can’t use convenient in-built conversions

Data is transferred as a function

Not for large datasetsPrefilter data

Might be not an issue in Java port

Very convenient interaction

Tricky in debuggingCan use browser

Data, coming from application

Peter Sikachev 38

Questions?