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 3rd party components• Integrates diverse tools

• Data extraction• Data mining• Visualization

• http://infovis.cs.vt.edu/snap/

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 map States in a scatterplot

States:LoadSelectZoom

States: LoadSelect

Model

• Link between vis. = Join between tuples in UI action subsets

States in a map States in a scatterplot

Selectstates

Selectstates

1 : 1

Model

Selectstates

Selectcounties

1 : M

• Link between vis. = Join between tuples in UI action subsets

States in a scatterplot Counties in a scatterplot

Model

Selectstates

Loadcounties

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

ActionsData

Visual-ization

ActionsData

…

Database

Linkgraph

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 1.4.1

• 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

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