This is an old revision of the document!
The documentation available for prefuse is quite sparse, it consists mainly of the JavaDoc API documentation and demo source code. Even though the demo source code provides as good starting point (cp. [Heer et al., 1995] ), in my opinion the examples are overly complex for beginners.
Therefore, this tutorial starts with the minimum source code to create a scatter plot and incrementally adds features. Further, it discusses an axis-based visualization technique, whereas the documentation of prefuse focuses on graph visualization.
Here we create the outline of our demo application. It is designed very simple and consists of four static methods:
This shows, how we create a data table for our tutorial. We use hard coded values so that the demo application stays self-contained. It would be easy to replace this method by a call to prefuse's DelimitedTextTableReader
.
private static Table generateTable() { Table table = new Table(); // use a calendar for input of human-readable dates GregorianCalendar cal = new GregorianCalendar(); // set up table schema table.addColumn("Date", Date.class); table.addColumn("BMI", double.class); table.addColumn("NBZ", int.class); table.addColumn("Insult", String.class); table.addRows(3); cal.set(2007, 11, 23); table.set(0, 0, cal.getTime()); table.set(0, 1, 21.0); table.set(0, 2, 236); table.set(0, 3, "F"); cal.set(2008, 6, 22); table.set(1, 0, cal.getTime()); table.set(1, 1, 35.8); table.set(1, 2, 400); table.set(1, 3, "F"); cal.set(2009, 3, 8); table.set(2, 0, cal.getTime()); table.set(2, 1, 28.8); table.set(2, 2, 309); table.set(2, 3, "T"); return table; }
Next, we extend the method createVisualization(Table)
and add the minimal source code to show a scatter plot.
First, we need to create instances of Visualization and Display and link these with each other and the data table.
Visualization vis = new Visualization(); Display display = new Display(vis); vis.add("data", data);
Second, we create a AxisLayout for the x axis and another one for the y axis. When these layouts are run, they will set the x and coordinate of all visual items.
AxisLayout x_axis = new AxisLayout("data", "NBZ", Constants.X_AXIS, VisiblePredicate.TRUE); AxisLayout y_axis = new AxisLayout("data", "BMI", Constants.Y_AXIS, VisiblePredicate.TRUE);
Third, a ColorAction will set the color of all visual items to blue.
ColorAction color = new ColorAction("data", VisualItem.STROKECOLOR, ColorLib.rgb(100, 100, 255));
Fourth, these actions are combined to an ActionList and linked to the Visualization.
ActionList draw = new ActionList(); draw.add(x_axis); draw.add(y_axis); draw.add(color); vis.putAction("draw", draw);
Finally, we run this ActionList and return the Display so that it can be shown in the window.
vis.run("draw"); return display;
This is the resulting visualization:
alex @ ieg: home about me publications research