Scribd
Upload
186 views

Prefuse Tutorial

prefuse is a Java library for interactive information visualization that allows users to: 1. Represent graph data structures and import graph data from files or databases. 2. Filter graphs to select subsets of nodes and edges to visualize. Filtered data is mapped to visual items for rendering. 3. Perform graph processing like layout, attribute assignment, and animation through reusable action modules that can be combined into processing pipelines.

Uploaded by

dangerman1983
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
186 views

Prefuse Tutorial

prefuse is a Java library for interactive information visualization that allows users to: 1. Represent graph data structures and import graph data from files or databases. 2. Filter graphs to select subsets of nodes and edges to visualize. Filtered data is mapped to visual items for rendering. 3. Perform graph processing like layout, attribute assignment, and animation through reusable action modules that can be combined into processing pipelines.

Uploaded by

dangerman1983
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

prefuse

a visualization toolkit

prefuse
a user interface toolkit for interactive
information visualization
built in Java using Java2D graphics library
data structures and algorithms
pipeline architecture featuring reusable,
composable modules
animation and rendering support
architectural techniques for scalability

here is a graph
At this point it is purely abstract (i.e.
assume we havent given it any visual
appearance yet)
The graph could be a
file system
computer network
web site
biological taxonomy
social network

Before we can visualize it, we first


need means to represent and
import this data.

abstract graph data


Provided graph data structures:
package edu.berkeley.guir.prefuse.graph
Node, Edge, TreeNode, Graph, Tree
Node and Edge are both instances of the Entity
interface, and can have any number of attributes.

Loading and saving graph data:


package edu.berkeley.guir.prefuse.graph.io
GraphReader, GraphWriter interfaces
XMLGraphReader, TabDelimitedTreeReader, and
other provided modules

filtering the graph


we now need to select which
parts of the graph to visualize
this process is called filtering

abstract data
(Node, Edge)

visual analogues
(NodeItem, EdgeItem)

visual analogues
Filtered graph data is mapped to VisualItems
visual analogues of abstract data.

NodeItem: analogue of nodes in the graph


EdgeItem: analogue of edges in the graph
AggregateItem: represents group of nodes and edges
can be found in package edu.berkeley.guir.prefuse

Together they form a mirror of the filtered subset


of the original data, and are the subject of all
subsequent processing (e.g. layout, rendering).
NodeItems

EdgeItems

AggregateItems

the item registry


The ItemRegistry is the central data structure in prefuse. It manages the
mapping between VisualItems and the original graph data, and provides
queues for quickly iterating over filtered items. It also centralizes access to
other components, such as the RendererFactory and on-screen Displays.
Manages creation of all
VisualItem instances. Give
the registry an Entity, and it
will return you a
corresponding VisualItem.
A java.util.Comparator
instance is used to order the
rendering queues of items,
determining in what order
things are drawn.
Supports management of
focus items (clicked nodes,
search results, etc)

ItemRegistry
Comparator
NodeItems
EdgeItems

getItem(Entity entity, boolean create)


getItems()
getDisplay(int)
getRendererFactory()
getFocusManager()

rendering
Renderers are responsible for drawing items and computing bounding boxes. It is
the responsibility of the RendererFactory to return the desired Renderer for a
given VisualItem. These live in the package edu.berkeley.guir.prefuse.render.

RendererFactory
getRenderer(VisualItem)

Renderer
render(Graphics2D, VisualItem)
getBounds(VisualItem)
locatePoint(Point2D, VisualItem)

Provided Renderers include:


ShapeRenderer

EdgeRenderer

TextRenderer
TextImageRenderer

SubtreeAggregateRenderer

display
Display

The Display class provides on-screen drawing and


interaction with the visualized data set.
subclasses javax.swing.JComponent
renders VisualItems to the screen
provides user interface callbacks
through ControlListener interface
through prefusex.controls package classes
custom decoration with prePaint() and postPaint()
custom tool-tip handling
supports on-screen text editing
graphics transforms, including pan and zoom

ControlListener
itemClicked(VisualItem, MouseEvent)
itemDragged(VisualItem, MouseEvent)
itemKeyPressed(VisualItem, KeyEvent)

animation and activities


ActivityManager
schedule(Activity)
scheduleNow(Activity)
scheduleAt(Activity, long startTime)
scheduleAfter(Activity, Activity)

ActivityManager schedules and runs


Activities of specified duration (possibly
infinite), step rate, and start time.
Enables animation and time-based
processing.
Runs in a separate thread of execution,
and provides a protected environment
for running Actions.
edu.berkeley.guir.prefuse.activity

Activity
long duration, stepTime, startTime
isScheduled()
cancel()
run(long elapsedTime)
addActivityListener(ActivityListener)

ActivityListener
activityScheduled(Activity)
activityStarted(Activity)
activityStepped(Activity)
activityFinished(Activity)
activityCancelled(Activity)

actions: graph processing


Graph processing (filtering, layout, attribute assignment, etc) is achieved
by constructing a pipeline of processing modules called Actions. These
ActionLists are then submitted to the ActivityManager for execution.
Actions can be found in edu.berkeley.guir.prefuse.action

ActionList extends Activity


Actions

Action
run(ItemRegistry, double f)
isEnabled()
setEnabled(boolean)

provided Actions include.


Filters: GraphFilter, TreeFilter, FisheyeTreeFilter, FisheyeGraphFilter
Layout: ForceDirectedLayout, RadialLayout, SquarifiedTreeMapLayout,
Assignment: ColorFunction, SizeFunction, FontFunction
Interpolation: ColorInterpolator, LinearInterpolator, PolarInterpolator

action pipeline examples

Filter all graph nodes and edges

Filter a fisheye view (of depth 2) of a tree and its edges

ActionList filter = new ActionList(registry);


filter.add(new FisheyeTreeFilter(-2));
filter.runNow();

Perform a radial (circular) layout and assign node colors

ActionList filter = new ActionList(registry);


filter.add(new GraphFilter());
filter.runNow();

ActionList layout = new ActionList(registry);


layout.add(new RadialGraphLayout());
layout.add(new ColorFunction());
layout.runNow();

Perform a 1 second animation between configurations

ActionList animate = new ActionList(registry, 1000, 20);


layout.add(new LocationAnimator());
layout.add(new ColorAnimator());
animate.setPacingFunction(new SlowInSlowOutPacer());
animate.runNow();

customizing actions
The Action interface is designed to let developers easily create custom Actions to
accomplish their goals. In addition, many actions are very easily customized to a
particular application. For example, the ColorFunction includes two methods
getColor(VisualItem item) and getFillColor(VisualItem item) that subclasses can
override to perform application specific code. The FontFunction and SizeFunction
actions are similar.
public class MyColorFunction extends ColorFunction {
public Paint getColor(VisualItem item) {
// custom code here, just return the desired color
}
public Paint getFillColor(VisualItem item) {
// custom code here, just return the desired color
}
}

writing applications
So how do you build an app with prefuse?
before touching any code: design visual appearance,
layout, interactive behaviors
determine input/output of graph data
initialize ItemRegistry and Display(s)
select (or implement custom) Renderers and
RendererFactory
construct the various ActionLists necessary
using existing library of Actions, or with custom-built
modules (or sub-components like Force functions)
write user interface callbacks to orchestrate the
ActionLists

other features include

complete physics force simulation engine


including n-body (e.g. gravity/anti-gravity) solver, spring forces, drag forces, wall
forces, and multiple numerical integration options
edu.berkeley.guir.prefusex.layout.ForceDirectedLayout,
edu.berkeley.guir.prefusex.force

keyword search support using a prefix tree


indexes nodes, allowing for very fast searches of selected attributes
edu.berkeley.guir.prefuse.util.KeywordSearchFocusSet

automatic image loading and caching

including optional scaling to improve memory and computational costs.


edu.berkeley.guir.prefuse.render.ImageFactory
animation pacing functions (e.g., slow-in slow-out, there and back)
edu.berkeley.guir.prefuse.activity.Pacer,
edu.berkeley.guir.prefuse.activity.SlowInSlowOutPacer

graphical fisheye and bifocal distortion techniques


can be used to navigate large spaces (similar in principle to MacOS X dock)
edu.berkeley.guir.prefusex.distortion

database connectivity (working, but still under construction)


edu.berkeley.guir.prefuse.graph.external

You might also like