188.308, 1.0h What is prefuse? Extensible software framework to create interactive information visualization applications prefuse Tutorial Java beta release 2006.07.15 Open Source Wolfgang Aigner [email protected] http://ieg.ifs.tuwien.ac.at/~aigner/ 27.11.2006 27. November 2006 UE Informationsvisualisierung 1 27. November 2006 UE Informationsvisualisierung 2 Why prefuse? Download and Build Download OS independent (pure Java) many built-in components Homepage: http://prefuse.org I/O methods available demos and examples Beta release CSV, (tab-)delimited text, GraphML (XML), TreeML (XML) Download link in the upper left corner good documentation data structures Unzip table, graph, tree active community Build provides indexing, queries components for color, size, and shape Set "JAVA_HOME" environment variable encodings ANT build script (build.xml) layout components Ant = Java Build system distortion techniques highly recommended in general! animation (e.g., smooth transitions) Start Ant script via build.sh (Linux/Mac) or build.bat (Win) dynamic queries / interactive filtering 1) Build classes and jars Option "all" integrated text search 2) Build API documentation physical force simulation engine Option "api" SQL-like expression language for writing queries JAVA_HOME='/usr'; export JAVA_HOME sh build.sh api 27. November 2006 UE Informationsvisualisierung 3 27. November 2006 UE Informationsvisualisierung 4 How to run demos InfoVis Reference Model 10 Available demos AggregateDemo - Vis of groups of graph nodes Congress - Scatterplot of annual income of congressmen in di!erent states DataMountain - Spatial arrangement of book covers FisheyeMenu - Focus+Context list of numbers GraphView - Graph vis with adjustable parameters for layout RadialGraphView - Radial graph of a social network ScatterPlot - Scatterplot of Iris dataset TreeMap - Treemap vis TreeView - DOITree ZipDecode - Vis of US zip codes 1) Go to "build" folder 2) Launch demo of interest java -cp prefuse.jar:demos.jar prefuse.demos.<name of demo here> 27. November 2006 UE Informationsvisualisierung 5 27. November 2006 UE Informationsvisualisierung 6 1 Basic Architecture Source Data & Data Tables Source Data Raw data formatted files databases etc. Data Tables internal storage and management for data read from source data table columns are typed each row contains a data record (tuple) each column contains values for a named data field with a specific data-type graphs and tables are internally also stored as tables (nodes, edges) Data records do not contain any visual information like assignment attributes or color settings. Instead, own visual analogs are created 27. November 2006 UE Informationsvisualisierung 7 27. November 2006 UE Informationsvisualisierung 8 Visual Abstraction Visual Abstraction 2 Visualizations are created by generating visual representations of Specific visual mappings are provided by Action data records (VisualItems) in data tables. modules central data structure: Visualization Actions are independent processing modules that manages mappings between source data and VisualItems Table<-->VisualTable operate on the VisualItem instances in a Graph<-->VisualGraph Visualization Tree<-->VisualTree setting item visibility, computing layouts, assigning color manages VisualItems values, etc. visual representation of data elements interactive visual object can be grouped into ActionLists properties of source data + visual properties Actions can be run once or repeatedly over a time interval, Location, color, size, shape, font controlled by an ActivityManager specialization of VisualItems into NodeItems and EdgeItems for graphs Process is called Visual Mapping 27. November 2006 UE Informationsvisualisierung 9 27. November 2006 UE Informationsvisualisierung 10 Built-in Actions Interactive Views Assignment Graph/Tree Layout ColorAction BalloonTreeLayout actual drawing of VisualItems is done by Renderers DataColorAction ForceDirectedLayout responsible for drawing items and computing item bounds SizeAction FruchtermanReingoldLayout DataSizeAction NodeLinkTreeLayout ShapeAction choice of Renderer is done by RendererFactory that is assigned to RadialTreeLayout DataShapeAction a Visualization SquarifiedTreeMapLayout Filter Distortion Display component acts as a camera onto the contents of a VisibilityFilter GraphDistanceFilter BifocalDistortion Visualization FisheyeTreeFilter FisheyeDistortion is the component where the actual drawing takes place Layout Animation draws all the items within its current view, and can be panned, AxisLayout VisibilityAnimator zoomed, and rotated AxisLabelLayout LinearAnimator first-class user interface components GridLayout PolarAnimator can be added into Java applications and applets CircleLayout ColorAnimator StackedAreaChart FontAnimator single Visualization can be associated with multiple Display RandomLayout SizeAnimator SpecifiedLayout instances CollapsedStackLayout multiple views, overview + detail, small multiples CollapsedSubtreeLayout 27. November 2006 UE Informationsvisualisierung 11 27. November 2006 UE Informationsvisualisierung 12 2 Interactive Views 2 Application Building Overview Controls for user interaction process mouse or keyboard actions on the Display and on individual VisualItems built-in controls selecting focus items dragging items around panning zooming rotating Dynamic Query Bindings create a binding between a column of table data and an expression Predicate (or query) over that column bindings can automatically generate appropriate user interface components (e.g., sliders, radio buttons, check boxes, text search boxes, etc) 27. November 2006 UE Informationsvisualisierung 13 27. November 2006 UE Informationsvisualisierung 14 1) Load data 2) Create Visualization data sources maps loaded data to Visual Abstraction File Tables, Graphs, and/or Trees are added to the Database Custom Visualization prefuse data structures manages VisualItems Table visual representation of data elements Graph interactive visual object Tree properties of source data + visual properties 27. November 2006 UE Informationsvisualisierung 15 27. November 2006 UE Informationsvisualisierung 16 3) Create RenderFactory and 4) Construct processing Actions register with Visualization (Visualization Operators) is responsible for assigning Renderers to VisualItems operate on the visual abstraction Renderers do the actual drawing of VisualItems e.g., setting the location, color, size, and shape of visual items or animating these properties between DefaultRendererFactory di!erent configurations EdgeRenderer for any EdgeItems straight-line edges by default ShapeRenderer for all other items draws items as basic shapes such as squares and triangles 27. November 2006 UE Informationsvisualisierung 17 27. November 2006 UE Informationsvisualisierung 18 3 5) Initialize Display(s) 6) Specify interactive behavior for viewing and manipulating visual items by adding Controls to the Displays Search and filtering over data items can be added using "dynamic query bindings" 27. November 2006 UE Informationsvisualisierung 19 27. November 2006 UE Informationsvisualisierung 20 Coordinates in prefuse Example 1 two di!erent coordinate systems Built-in example network visualization "Example.java" absolute coordinates device-independent, logical coordinates all visual attributes like positions or sizes are defined in absolute coordinates view coordinates device-dependent (screen) coordinates Transformations between absolute and view coordinates are done automatically by Java painting routines 27. November 2006 UE Informationsvisualisierung 21 27. November 2006 UE Informationsvisualisierung 22 1) Load data 2) Create Visualization data source: file "socialnet.xml" <?xml version="1.0" encoding="UTF-8"?> <!-- "An excerpt of an egocentric social network "--> <graphml format: GraphML create Visualization object xmlns="http://graphml.graphdrawing.org/xmlns"> <graph edgedefault="undirected"> <!-- data schema --> parse file into Graph data <key id="name" for="node" attr.name="name" add graph to visualization attr.type="string"/> <key id="gender" for="node" attr.name="gender" structure using the attr.type="string"/> <!-- nodes --> GraphMLReader <node id="1"> <data key="name">Je!</data> <data key="gender">M</data> </node> <node id="2"> <data key="name">Ed</data> // add the graph to the visualization as the data group "graph" <data key="gender">M</data> Graph graph = null; </node> // nodes and edges are accessible as "graph.nodes" and "graph.edges" <node id="3"> try { Visualization vis = new Visualization(); <data key="name">Christiaan</data> !!!graph = new <data key="gender">M</data> vis.add("graph", graph); </node> GraphMLReader().readGraph("socialnet.xml"); ... } catch ( DataIOException e ) { <!-- edges --> <edge source="1" target="2"></edge> !!!e.printStackTrace(); <edge source="1" target="3"></edge> <edge source="1" target="4"></edge> !!!System.err.println("Error loading graph. <edge source="1" target="5"></edge> Exiting..."); <edge source="1" target="6"></edge> ... !!!System.exit(1); </graph> } </graphml> 27. November 2006 UE Informationsvisualisierung 23 27. November 2006 UE Informationsvisualisierung 24 4 3) Create RenderFactory and 4) Construct processing register with Visualization Actions create a new LabelRenderer (to see text labels on the nodes) setting up "visual encodings by creating Action create a new DefaultRendererFactory modules that process the VisualItems in the uses the new label renderer as the default renderer for all non-edge items Visualization all EdgeItems will