Snap-Together Visualization Chris North Lab for Information Visualization and Evaluation Department of Computer Science Virginia Tech

Example: website hits

Example: Expresso DB Schema

Snap (Fusion) Custom visualization workspace Visualization Fusion Data Fusion

Snap Flexibility: custom visualization workspaces End-users, non-programmers Rapid construction Browser based Any database Publish custom visualizations as single URL Extensible: exploits 3 rd party components Integrates diverse tools Data extraction Data mining Visualization

Relational Databases Relations (tables) Tuples (rows ) Attributes (columns) Values Associations (links)

Data Schemas Associations (links) Primary key (unique identifier) Foreign key (pointer) One to One (1:1) One to Many (1:M) Many to Many Join (follow link)

Snap Model Visualization Comp. = Display of a Relation Visual items = Tuples UI actions = Tuple subsets States in a mapStates in a scatterplot States: Load Select Zoom States: Load Select

Model Link between vis. = Join between tuples in UI action subsets States in a mapStates in a scatterplot Select states Select states 1 : 1

Model Select states Select counties 1 : M Link between vis. = Join between tuples in UI action subsets States in a scatterplot Counties in a scatterplot

Model Select states Load counties 1 : M Link between vis. = Join between tuples in UI action subsets States in a scatterplot Counties in a scatterplot

Relational Model → Snap Model Vis. = relation Item = tuple Link = join

Dialogs Data into visualization Choose table and fields Coordinating visualizations Choose actions

Software Architecture JDBC-ODBC Snap Visual- ization Actions Data Visual- ization Actions Data … Database Link graph Snap API

Snap Component API Implement “Snapable” Load data (jdbc resultset) fireEvent (vector of primary keys) doEvent (vector of primary keys) Events: Select, mouseover, zoom onto, scroll to, …

Component Design Generality, any data table Resizable to frame Conserve screen space, small Focus on components main visualization and interaction Let other components do other functions Actions that link to other components

Project Design Scenarios, tradeoffs Design description, pictures Implementation plan Scenarios can consider component within Snap environment

Component Development See instructions document Jdk Snap code Add new component Folder Html file Java Snapplet Use EmptySnapplet as example

Implementing Snapable Components Option 1: Applet Implement “Snapable” interface (Snapable.java) Option 2: (easier!) Extend “Snapplet” (Snapplet.java) Use “EmptySnapplet” as template (EmptySnapplet.java)

Snapplet Done for you: Extends JApplet, implements Snapable addSnapEventListener(SnapEventListener sel) removeSnapEventListener(SnapEventListener sel) fireSnapEvent(SnapEvent snapEvent) You need to write: load(ResultSet rs, String primaryKeyColName) performSnapEvent(SnapEvent e) Calls to fireSnapEvent(e) Enumeration getSupportedActions()

Snapplet load( ) getSupportedActions( ) performSnapEvent( ) fireSnapEvent( ) Snap

Snapplet: load load(ResultSet rs, String primaryKeyColName) rs is a JDBC data table primaryKeyColName is column in rs containing unique IDs –Used in events Display the data: –Process data, Make internal data structure? –Repaint(), paint the visualization?

Snapplet: actions Enumeration getSupportedActions() Return list of action names (e.g “select”, “zoom”, …) performSnapEvent(SnapEvent e) Do the event (e.g. select the given items) SnapEvent e: –String eventType(e.g. “select”) –Vector keys(e.g. 5, 32, 417, …) In various user events: Send event to Snap(e.g. user selected some items) fireSnapEvent(e)(e.g. “select”, 5,32,417)

Snapplet: Optional Icon getIcon( ) Return component’s icon String getAppletInfo( ) Return component’s name

JDBC ResultSet import java.sql.* ResultSet represents a table Access to 1 row at a time current row, “cursor” rs.next( ) move to next row Getting column values in current row: rs.getString(col),.getInt(col), … col = string name or int index (1,…) Column meta-data: rs.getMetaData( ) columnCount, column names, column types, …

JDBC (See sample code file) import java.sql.* Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”); Connection conn = DriverManager.getConnection( “jdbc:odbc:MyDatabaseName”); Statement st = conn.createStatement( ); ResultSet rs =st.executeQuery( “SELECT * FROM TableName”); MyComponent.load(rs, “ID”);

ODBC Open DataBase Connectivity Setup “System DSN” for database

Examples EmptySnapplet TableSnapplet ScatterPlot

MVC Model, View, Controller Separate UI from underlying system functionality UI: Data: Model (data, data logic) View (display) Controller (user input)

Multiple Views Model UI 2UI 1

Java MVC Lumps View/Controller together Model, UI UI can listen to model changes E.g. TreeModelListener Model (e.g. TreeModel) UI (e.g. JTree)

Data models TableModel, JTable (code in snap table component) TreeModel, JTree (code on website) Wrapper Converter