1

InfoVis Toolkit Tutorial

CS 4460/7450 - Information Visualization

Feb. 11, 2010

Guest speaker: Zhicheng Liu (“Leo”)

Spring 2010 CS 4460/7450 2

Agenda

• Tutorial and demo of toolkits

flare

prefuse

processing

protovis

• Powers and limitations of each

2

IDEs for building InfoVis

• Integrated Development Environment

Syntax highlighting, real-time compilation …

Easy import of existing projects / libraries

• Eclipse (Java)

prefuse, processing (has own PDE)

• Flex (Flash Actionscript)

flare

• ? (Javascript)

protovis Spring 2010 CS 4460/7450 3

Spring 2010 CS 4460/7450 4

InfoVis Reference Model

• Different toolkits have different support for each of the stages (as we shall see…)

3

Spring 2010 CS 4460/7450 5

Prefuse & Flare

• Written by Jeffrey Heer

• Similar architectural design in different languages:

Java vs. Actionscript

• Built-in support for

reading data sources

generating fine-grained visualization building blocks

applying layout and interaction algorithms

Top Level Components

Prefuse Flare

Spring 2010 CS 4460/7450 6

Java Container

Display

Visualization

Visual Object Container: Sprite

Visualization

4

Given a data file…

Price Year Mileage Make …

8000 2000 87000 Honda …

4500 1999 100200 Toyota …

14900 2004 72000 BMW …

… … … … …

Spring 2010 CS 4460/7450 7

Let’s build a scatter plot

Spring 2010 CS 4460/7450 8

5

CODE SNIPPETS ONLY!

Spring 2010 CS 4460/7450 9

1. Reading Data Source

Prefuse (csv and other delimited text files, GraphML, TreeML)

Table t = new DelimitedTextTableReader().readTable(datafile);

Visualization vis = new Visualization();

VisualTable vt = vis.addTable(“datacases”, t);

Display m_display = new Display(vis);

jpanel.add(m_display);

Flare (tab-delimited, JSON and GraphML)var ds:DataSource = new DataSource( datafile );

var loader:URLLoader = ds.load();

loader.addEventListener(Event.COMPLETE, function(evt:Event) : void {

var ds:DataSet = loader.data as DataSet;

});

Data data = Data.fromDataSet(ds);

Visualization vis = new Visualization(data);

sprite.addChild(vis);Spring 2010 CS 4460/7450 10

6

2. Create layout and set

stroke color

PrefuseAxisLayout xaxis = new AxisLayout(“datacases”, ”Mileage”, Constants.X_AXIS);

AxisLayout yaxis = new AxisLayout(“datacases”, “Price”, Constants.Y_AXIS);

int[] palette = new int[] {C1, C2, C3};

DataColorAction color = new DataColorAction(“datacases”, “Make”, Constants.ORDINAL, VisualItem.STROKECOLOR, palette);

Flare AxisLayout axis = new AxisLayout( "data. Mileage", "data.Price" ) );

ColorEncoder en = new ColorEncoder( "data.Make", Data.NODES, "lineColor", ScaleType.CATEGORIES ) );

Spring 2010 CS 4460/7450 11

3. Putting these together

PrefuseActionList draw = new ActionList();

draw.add (xaxis);

draw.add(yaxis);

draw.add(color);

vis.putAction(“draw”, draw);

vis.run(“draw”);

Flare vis.operators.add(axis);

vis.operators.add(en);

//execute axis layout

vis.update( null, "axis" ).play();

//execute all unnamed operators

vis.update();

Spring 2010 CS 4460/7450 12

7

4. Interaction (e.g. tooltips)

PrefuseToolTipControl ttc = new ToolTipControl (new String [] {“Mileage”, “Price”});

m_display.addControlListener(ttc);

Flare vis.controls.add( new TooltipControl( NodeSprite, null,

function( evt:TooltipEvent ):void {

TextSprite( evt.tooltip ).htmlText = Strings.format

(

”{data.Mileage}<br>{data.Price} “, evt.node

);

}));

Spring 2010 CS 4460/7450 13

More examples: graph

PrefuseGraph g = new GraphMLReader().readGraph(datafile);

m_vis.addGraph(“mygraph”, g);

//set node and link properties

ActionList draw = new ActionList();

draw.add(new ColorAction(“mygraph.nodes”, VisualItem.FILLCOLOR, ColorLib.rgb(0,0,0)));

draw.add(new ColorAction(“mygraph.edges”, VisualItem.STROKECOLOR, ColorLib.gray(200)));

//set layout and animate it

ActionList animate = new ActionList(Activity.INFINITY);

animate.add(new ForceDirectedLayout(“mygraph”));

Spring 2010 CS 4460/7450 14

8

For more references…

Prefuse

• Demos included in the distribution

• User manual (incomplete): http://prefuse.org/doc/manual

• JavaDoc: http://prefuse.org/doc/api/

Flare

• Demos included in the distribution

• API documentation: http://flare.prefuse.org/api/

• Tutorial: http://flare.prefuse.org/tutorial

Spring 2010 CS 4460/7450 15

Pros and Cons

• A few lines of code can do a lot!

• Built-in support for many useful features

• Quick and efficient for building standard visualizations

• Non-standard data format, custom visual design..

Extending abstract classes in the toolkits: e.g. Layout

Or resort to Java2D graphics / sprite graphics: back to square one

Spring 2010 CS 4460/7450 16

9

Processing

• Java based

• Unlike prefuse & flare, not specially designed for InfoVis

Data Reader? Layout algorithm?

But can definitely be used to build visualizations!

• Written by Ben Fry

• Well documented, lots of tutorials with contributions from many people and even books

Spring 2010 CS 4460/7450 17

Processing: the idea

• Programming as scripting

PDE: processing development environment

A program is called a sketch

written as a list of statements

Spring 2010 CS 4460/7450 18

10

The Pain of using Java2D

• Graphics repaint

• Animation

• ActionListener, EventListener …

• Long-winded Java syntax

Spring 2010 CS 4460/7450 19

Processing: useful functions

void setup() {

//your own code here

}

void draw() {

//your own code here

}

• These are built-in functions that are called automatically.

The setup() block runs once.

The draw() block runs repeatedly: good for animation

Spring 2010 CS 4460/7450 20

11

Barchart

float[] data = new float[] { 2.3f, 0.34f, 5.4f, 6.5f, 2.9f, 1.2f, 8.9f };

float max = 8.9f;

float left= 300; float right= 500;

float barWidth = (right- left) / data.length;

float chartHt = 300;

void setup() {

size(800, 600);

background(255);

fill(204, 102, 0);

stroke(255);

for (int i = 0; i < data.length; i++) {

rect(left+ i * barWidth, 100.0f, barWidth, chartHt * data[i]/ max);

}

}

void draw() {}

Spring 2010 CS 4460/7450 21

Animated Barchart

float[] data = new float[] { 2.3f, 0.34f, 5.4f, 6.5f, 2.9f, 1.2f, 8.9f };

float max = 8.9f;

float iniHt = 0.001f;

float left = 300;

float right = 500;

float barWidth = (right- left) / data.length;

float chartHt = 300;

void setup() {

size(800, 600);

frameRate(60);

background(255);

fill(204, 102, 0);

stroke(255);

}

Spring 2010 CS 4460/7450 22

12

Animated Barchart cont’d

void draw() {

background(255);

for (int i = 0; i < data.length; i++) {

if (iniHt < 1) {

rect(left+ i * barWidth, 100.0f, barWidth, chartHt * data[i]/ max * iniHt);

iniHt += 0.001;

} else

rect(left+ i * barWidth, 100.0f, barWidth, chartHt * data[i]/ max);

}

}

Spring 2010 CS 4460/7450 23

MouseEvent

• Rollover:

Create a class called MyBar, which represents each of the bars in the chart,

Create methods in the class that checks if the mouse position is over the bar

Override void mouseMoved () to change the bar color

Spring 2010 CS 4460/7450 24

13

Use Processing outside PDE

• Integrating with Eclipse:

Basically, extending the PApplet class

PApplet: Processing’s Java Applet

http://processing.org/learning/tutorials/eclipse/

public class MyProcessingSketch extends PApplet {

….

public void setup() { … }

public void draw() { … }

}

Spring 2010 CS 4460/7450 25

For more references

• http://processing.org/

• Tutorials: http://processing.org/learning/

• API reference: http://processing.org/reference/

Spring 2010 CS 4460/7450 26

14

Web as a Platform for

Visualization

• Instant, universal access

• Many Eyes, NY Times

• Problem: embedding visualization into web pages?

Standalone widgets: Java Applet, Flash

Javascript: write functions that are embedded in or included from HTML pages and interact with the page

Unrelated to Java

Gaining more popularity (Google Chrome)Spring 2010 CS 4460/7450 27

Protovis

• Javascript based

• Written by Mike Bostock and Jeff Heer

• Uses SVG (Scalable Vector Graphics)

an XML-based file format for describing two-dimensional vector graphics

Not supported by IE

• Less powerful than prefuse/flare in terms of data import, animation and layout, more expressive

• Sandbox: sandbox.protovis.org

Spring 2010 CS 4460/7450 28

15

Mark

• Mark: graphical primitives to compose visualization

Similar to Processing

• A mark is generated once per associated datum, mapping the datum to visual properties such as position and color

• Different types of marks supported:

Bar, dot, wedge, line, area, rule,…

Spring 2010 CS 4460/7450 29

Decomposing Visualization

into Marks

Spring 2010 CS 4460/7450 30

16

Mark: data & visual properties

data [1, 1.2, 1.7, 1.5, .7]

visible true

left i * 25

bottom 0

height d * 80

width 20

fillStyle blue

strokeStyle black

… …

Spring 2010 CS 4460/7450 31

Method Chaining

Spring 2010 CS 4460/7450 32

new pv.Panel().width(150).height(150) .add(pv.Wedge)

.left(75).bottom(75)

.outerRadius(70)

.angle(function(d) d * 2 * Math.PI)

.data(pv.normalize([1, 1.2, 1.7, 1.5, .7]))

.root.render();

size(150, 150); background(255); smooth(); noStroke(); int diameter = 140; float[] data = {1, 1.2, 1.7, 1.5, .7}; float lastAng = 0, sum = 0;for (int i = 0; i < data.length; i++){

sum += data[i]; } for (int i = 0; i < data.length; i++) {

fill(data[i] * 120); float ang = data[i] / sum * 2 * PI; arc(width / 2, height / 2, diameter, diameter,

lastAng, lastAng + ang); lastAng += ang;

}

protovis processing

The method to set a property returns a reference to the mark itself, allowing you to set multiple properties in a single statement.

http://martinfowler.com/dslwip/MethodChaining.html

17

Bar chart

Spring 2010 CS 4460/7450 33

vis.add(pv.Bar).data([1, 1.2, 1.7, 1.5, .7, .2]).bottom(0).width(19).height(function(d) d * 70).left(function() this.index * 24 + 45)

.anchor("top").add(pv.Label).textStyle("#fff");

Bar chart : add grids

Spring 2010 CS 4460/7450 34

vis.add(pv.Rule).data(pv.range(0, 2, .5)).bottom(function(d) d * 70 + .5)

.add(pv.Label);

18

Bar chart : add mouse events

Spring 2010 CS 4460/7450 35

.def("i", -1);

.fillStyle(function() vis.i() == this.index ? "orange" : "steelblue")

.event("mouseover", function() vis.i(this.index))

.event("mouseout", function() vis.i(-1))

Data Loading

• Hard code into Javascript

• External data:

client side vs server side

Web programming

Spring 2010 CS 4460/7450 36

19

Embed Protovis into HTML

<html>

<head> <script type="text/javascript" src="../protovis-r3.1.0.js"></script>

//javascript containing the data array<script type="text/javascript" src=”data.js"></script><style type="text/css"> #fig { width: 334px; height: 833px; } </style> </head>

<body><div id="center">

<div id="fig">

<script type="text/javascript+protovis">

//protovis code here

</script>

</div>

</div>

</body>

</html>

Spring 2010 CS 4460/7450 37

For more references

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

• Tutorial: http://code.google.com/p/protovis-js/wiki/ReadMeFirst

• Examples: http://vis.stanford.edu/protovis/ex/

• Documentation: http://protovis-js.googlecode.com/svn/trunk/jsdoc/index.html

Spring 2010 CS 4460/7450 38

20

Which toolkit to use?

• Depending on your visualization design and programming experience

• Whatever you choose, it is important to know the basic concepts in object-oriented programming

Class, method, arguments, loop ...

• Recommendation: “Don't start by trying to build a cathedral”

Spring 2010 CS 4460/7450 39

Spring 2010 CS 4460/7450 40

Upcoming

• Commercial systems

Reading

Spenke paper

• Tufte’s Design Principles

No reading