Prefuse Visualization

Introduction

2009-10-10T11:08:00.000+02:00

Posted on June 27, 2008

To understand and to use prefuse toolkit we should better at first have some knowledge about information visualization (see wikipedia and infovis wiki), especially about the visualization pipline or the reference model; Prefuse is built just with these concept. You can read further about prefuse from authors.

In my opinion, it is a good idea to understand a visualization toolkit with visualization methods as well. On this web site I would try to visualize prefuse toolkit so that we can easily understand and explore it.

This web site would not present much prefuse programming detail or example code, but mainly give a whole picture of prefuse. The official prefuse user manual is currently not complete, and there are few tutorials or instructive articles on internet. This web site may help you learn prefuse or design its application with high level view, and the prefuse javadoc should help you do further detailed programming (sometimes you may probably need to read the prefuse source code as well).

The following links should be helpful when programming with prefuse.

Java tutorial
Swing tutorial (especially Using Swing Components and Writing Event Listeners.)
Java 2D
Prefuse Javadoc

The content from this site is based on prefuse beta release 2007.10.21.

News

2009-06-13T00:32:00.002+02:00

I am really glad if you thought this blog useful, but you may be also disappointed that there has been no newer posts coming out for a long time :-(.

I haven't updated this blog for almost one year. One reason is that prefuse or its application in Java Applet is not very attractive on web, while I am going to build some web-based visualization applications. (Actually the real reason is that prefuse/Java is really frustrating me. It is really hard. lol)

However, the great thing is that there is a Flash alternative from prefuse -- flare. Flare has the same visualization model as that from prefuse. However, the event model, display list, UI component and dynamic programming language (Actionscript3) from Flash/Flex can let development much easier. The flash application is also pretty effecient on web. Here is the project which I have developed with flare in the last month.

BTW, if you want build web-based visualiation application in Javascript, you should be interested in JIT. The best part of a Javascript-based visualization toolkit is that it can be much more seamlessly integrated with web content, e.g. AJAX, CSS, HTML...

June 13, 2009

prefuse

2008-07-21T14:21:00.005+02:00

Posted on July 21, 2008

Jeffrey Heer et al present prefuse in their paper Prefuse: A Toolkit for Interactive Information Visualization.

The paper represents mainly prefuse's concept, the implementation or the code snippet from the paper may not be identical to the prefuse library you have downloaded.

Software Design Pattern

2008-07-15T00:11:00.004+02:00

Posted on July 15, 2008

Beside wonderful prefuse toolkit, Jeffrey Heer et al also presented software design patterns for information visualization software.

Software design pattern for information visualization

This paper presents general but practical patterns for designing information visualization framework or software.

Pipeline pattern

2008-07-14T17:32:00.006+02:00

Posted on July 14, 2008

Since prefuse and its components are made with the pipeline concept, we should also follow such pipeline pattern when we development the prefuse application.

Pipeline model.

Before running it, we should define each piece of the whole Visualization, namely Source Data, Data Transformation, Data Tables, View Mapping, Visual Abstraction, View Transformation, View and Interaction. They are just the basic building blocks which would be composited together.
- The package organization of prefuse is according to those building blocks.
The execution of a visualization would follow the order of the pipeline. Namely, at first the Source Data would be populated into Data Tables by applying Data Transformation, then Visual Mapping would add some visual attributes to Data Tables and make them into Visual Abstraction, finally View Transformation would draw the result onto View according to the attributes of Visual Abstraction.
- The user can perceive the result from the View and do Interaction on it. Theoretically the Interaction can affect or update any building block of the Visualization, however the visualization execution would still keep its pipeline order.
It is not necessary to construct (or define) each building block in the exact order as what they should be. For example, it is possible to define View Transformation before defining Visual Mapping.
- However, we should execute (or run) them in the correct order. For example, we must run Data Transformation before running Visual Mapping.
- Note: Most of the time we have more than one action (or activity) to be run for Visual Mapping. We must also run them in correct order according to their meaning.
While we can construct each building block very independently, though each building block must use some clue to bind with each other. For example, prefuse let user assign a group name to any arbitrary data collection, and each building block can use such group name as clue to handle desired data.

Programming with pipeline pattern is similar to playing a pipe game.

Building pipe and define their connectivity: Constructing the building blocks for Visualization.
Running water through the pipes: Running the Visualization.
Changing the pipes while water running (if any game could do this): Doing the Interaction.

Expression

2008-07-04T21:10:00.004+02:00

Posted on July 04, 2008

An (information) visualization application must handle a huge amount of data, and should also let user do quick interaction to find out desired information (or to filter out undesired one). Hence, such dynamic query or data query is a very critical task for visualization.

For such reason prefuse provides a query expression language to do those tasks. The Expression can be used to query Data Tables (like SQL in database) for informational attributes, and it can also be used to query Visual Abstraction, i.e. a visual item, for the visual attributes.

Following figure shows all possible Expressions.

Expression.

There are expressions for doing string, math and Boolean operations.
Expressions in prefuse.visual.expression are for querying on visual item (Visual Abstraction) . For example, an expression to decide if a visual item visible or not.

Some Expressions are treated as Function.

Expression as Function.

Some Expressions are treated as Predicate which be always evaluated as true or false.

Expression as Predicate.

View & Interaction

2008-07-04T20:35:00.004+02:00

Posted on July 04, 2008

View & Interaction.

View is the representation media for user to perceive the visualization result. At the same time, such View should also have Interaction capabilities for user. A touchscreen is a good example of a View; People see the image on the screen and can interact directly with fingers. In common Java Swing application, a View may be any displayable JComponent. The common user interactions of a View are mouse and keyboard.

Following figure shows the View and Interaction in prefuse.

View Transformations (prefuse.render).

The single class prefuse.Display is the View. It is a JComponent in Swing.
A Control or ControlAdpater is used to define the interaction via mouse and keyboard. They are implemented as action or event listeners.
Prefuse provides some handy intractable Controls: Zoom, Pan, Drag and etc.

View Transformations

2008-07-04T13:35:00.006+02:00

Posted on July 04, 2008

View Transformation.

Visual Transformation renders the visual data, i.e. Visual Abstraction, onto displayable View. This step makes the visualization result perceivable for user. Package prefuse.render is responsible for such rendering.

View Transformations (prefuse.render).

To doing Visual Transformation you should define a RenderFactory which consists of one or more Renderers. Prefuse provides some default render classes for edge, label, polygon, shape and etc. Most of the time you would define your own RenderFactory and Renderer to fulfill your own specific requirements.

Data Transformations

2008-07-04T12:43:00.008+02:00

Posted on July 04, 2008

Data Transformation.

Data Transformation transforms the raw Source Data into specific internal data format (i.e. Data Table) which can be manipulated by prefuse directly. We can also see Data Transformation as data importing process. Prefuse, like any other visualization toolkit or aplication, provides data importing from common text file or from database. It provides data "exporting" as well.

Data Transformations (prefuse.data.io).

There are Reader and Writer available for Graph and Table structure.
Source Data can be comma-separated, delimiter-separated, or fixed width values in plain text file.
Source Data can be GraphML or TreeML in XML file.
You can use ConnectionFactory from prefuse.data.io.sql to query database and to get DatabaseDataSource which can (by using SQLDataHandler) populate query result into prefuse.data.Table.

Visual Mapping

2008-07-03T20:33:00.004+02:00

Posted on Junl 03, 2008

Visual Mapping.

Since Data Tables and Visual Abstraction are the core parts for representation of informational and visual data, the mapping between them is absolutely another important part in prefuse. This mapping is called Visual Mapping in prefuse. Visual Mapping can not only assign visual attributes to data, but it can be also responsible to animation, layout and visual effect. Most of the time you would implement your algorithm for visual representation in Visual Mapping phase.

In prefuse such Visual Mapping is also called activity or action which correspond to prefuse.activity and prefuse.action packages. Following figure will show all possible prefuse built-in actions.

Visual Mapping (prefuse.activity and prefuse.action).

There are many types of action (which is considered as an activity in prefuse): filter, animate, assignment, layout and distortion.

Data & Visual Abstraction

2008-07-02T15:54:00.019+02:00

Posted on Junl 02, 2008

Data Tables & Visual Abstraction.

Data Tables and Visualization Abstraction should be the most important part of whole prefuse. They represent the informational data and corresponding displayable visual properties. Java classes for Visual Abstraction are extended from those for Data Tables, so that programmer can manipulate Data Tables and their Visual Abstraction in a natural way. Pipeline and Package Overview should be kept in mind when further exploring prefuse in detail. The Quick Figures menu from left sidebar may be helpful.

To understand the structure of Java classes in prefuse, the UML class diagram is used for this purpose. Especially the inheritance and realization relations would be represented. The following figure illustrates an example of a class diagram.

Class diagram example.

Again, the Java package used for Data Tables is prefuse.data; for Visual Abstraction is prefuse.visual.
At first I would show the basic concept and structure between prefuse.data and prefuse.visual.

Basic structure of Data Tables and Visual Abstraction.

Every piece of information (data) is represented as a Tuple.
A TupleSet consists of one to many Tuples.
A TupleSet (or VisualTupleSet) is similar to a table in database, and a Tuple (or VisualItem) is similar to an entry of such table.
- A TupleSet (or VisualTupleSet) has a metadata to define the attributes of its columns, for examaple, name, type and default value of columns. (Such metadata is stored in prefuse.data.Schema.
- A Tuple (or VisualItem) is a unique entry in a TupleSet (or VisualTupleSet). A Tuple consists of attribute vlaues which are exactly defined by the metadata of the storing TupleSet.
- Illustration of a TupletSet with metadata and Tuples.
The schema of TupleSet and the values of Tuple are mostly defined and assigned according to input Source Data.
VisualTupleSet extends from TupleSet. It holds the schema from its extended TupleSet and has also a extra schema for visual attributes, for example, position, size ...etc.
VisualItem extends from Tuple. It holds the data values as Tuple does and it contains additionally visual attribute values.

The following figure shows the detail of the prefuse.data.

Data Tables (prefuse.data) in detail.

Edge and Node are two special Tuple. They can represent the data which has the tree or graph meaning.
TableTuple, TableEdge and TableNode are prefuse default implementing Tuple.
Table, Graph, Tree are typical implementing TupleSet.
Graph and Tree are implemented with composite Tables.

The following figure shows the detail of the prefuse.visual.

Visual Abstraction (prefuse.visual) in detail.

TableVisualItem, TableEdgeItem and TableNodeItem are typical implementing VisualItem.
VisualGraph, VisualTree and VisualTable are typical implementing VisualTupleSet.

The following figure shows the detail of both prefuse.data and prefuse.visual.

Data Tables (prefuse.data) and Visual Abstraction (prefuse.visual) in detail.

Many classes from prefuse.visual extend the classes from prefuse.data.
SearchTupleSet from prefuse.data.search can be used for dynamic query (e.g. user search or query interaction).

Package Overview

2008-06-30T13:51:00.023+02:00

Posted on July 01, 2008

Another important figure from prefuse official site is the package overview.

Package overview diagram from http://prefuse.org/

This figure represents prefuse's java package structure according to its reference model (or piepeline).

Here I would like to reorganize the package overview diagram and also format them according to the reference model. See following figure.

Package overview according to the reference model.

Only main packages (first level under prefuse root package) are shown.
prefuse.data.io is especially for Data Transformations (load Source Data into prefuse internal Data Tables).
Two important classes: prefuse.Display and prefuse.Visualization.
- Single prefuse.Display class represents interactive View.
- prefuse.Visualization is the center repository of whole visualization application.
Every package (every data and process in prefuse) can affect each other and they work together as pipeline flow.
Typically interaction events are from user, e.g. mouse movement, key stroke...etc. This would trigger the prefuse.controls components. However a interaction event may be generated from anywhere and directly affect any data or process in visualization, e.g. a time-based animation with varied data or action.

Besides pipeline as reference model, the whole structure (or design pattern) of prefuse framework can be further discovered in software design pattern for information visualization by Jeffrey Heer et al.

Pipeline

2008-06-28T11:48:00.073+02:00

Posted on June 29, 2008

A typical visualization pipeline can be modeled as follwing diagram.

Visualization pipeline.

Data acquisition: Collect data from various resource. For example, A temperature sensor.
Raw data: The raw data is the information resource. It may not be manipulated directly by visualization applications.
Filtering: Filter and organize desired data.
Visualization data: After proper filtering the data should be stored with specific structure which can be easily manipulated by visualization applications.
Mapping: Map the "informational" data to "displayable" or "render-able" data representation.
Rendering representation: Describe the visualize-able attributes of data. For example, color, size, position...etc.
Rendering: Render render-able data onto visualization output media. This process takes care the rendering effect which depends on visualization output media.
Visualization output: Where humane or any actor can perceive and recognize.
Interaction: A good visualization application should provide many possible interactions. The interaction can change any visualization process online or offline.

One of the most important contents from the prefuse official site may be the following figure.

Reference model diagram from http://prefuse.org/

This reference model describes the pipeline flow in the prefuse toolkit.

Source data: The input resource of information (raw) data. It can be from database, spreadsheet or other media. The source data is outside the prefuse applications scope (not as prefuse internal data).
Data transformation: Load source data into prefuse internal data tables.
Data tables: Prefuse internal data structure for data storing and manipulation. Data will be stored in tables (similar to a simple database table). Prefuse has built-in ability to store data with tree or graph semantics in tables.
Visual mappings: enrich "informational" data with "visualize-able" attributes
Visualization abstraction: The visualize-able attributes for data. Prefuse organizes visualization abstraction also in the tabular manner, so that prefuse can manage both information data and visualize-able attributes in internal data table structure.
Visual transformations: Do final visualization rendering of the visual abstraction on output views. We can say: Visualization abstraction define what to be displayed; Visual transformations decides how to display.
Views: Prefuse use Swing as its visualization view (display) media.

Here I would like to make this reference model a little bit colorful.

Colorful reference model.

Before further exploration of prefuse, I would like to show a common example which demonstrates the visualization scenario in prefuse.

Visualization pipeline with an example.

Source data: The input weather data is stored in database.
Data transformation: Load desired source data from database and store them in prefuse internal data structure, i.e. data tables.
Data tables: The weather data is stored in a tabular manner. It can be retrieved like a database table, for example, with a query expression.
Visual mapping: Assign extra visualization attributes to the data.
Visual abstraction: Extra visualization attributes, e.g. position, shape, size or color to display for specific city. Such attributes are also stored in tables which are extended from the data tables.
View transformation: Render those visual abstraction onto displayable media. This process may render some artifacts which are not necessarily defined in visual abstraction.
View: It may be a Java Swing panel which is displayed on LCD.
Interactions: Use may use mouse to do interaction on Swing panel, for example, to click somewhere on map. The application should calculate corresponding city, load necessary data, assign new data with visualization attributes and update the display.