Transcript Snap - Virginia Tech

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:
Load
Select
Zoom
States:
Load
Select
Model
• Link between vis. = Join between tuples in
UI action subsets
States in a map
States in a scatterplot
Select
states
Select
states
1:1
Model
• Link between vis. = Join between tuples in
UI action subsets
States in a scatterplot
Counties in a scatterplot
Select
states
Select
counties
1:M
Model
• Link between vis. = Join between tuples in
UI action subsets
States in a scatterplot
Counties in a scatterplot
Select
states
Load
counties
1:M
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
Database
Link
graph
Snap
Snap API
Data
Data
Actions
Visualization
…
Actions
Visualization
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
Snap
load( )
getSupportedActions( )
performSnapEvent( )
fireSnapEvent( )
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
• SnapEvent e:
(e.g. select the given items)
– String eventType
– Vector keys
(e.g. “select”)
(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:
View
(display)
Controller
(user input)
• Data:
Model
(data, data logic)
Multiple Views
UI 1
UI 2
Model
Java MVC
• Lumps View/Controller together
• Model, UI
• UI can listen to model changes
UI
(e.g. JTree)
• E.g. TreeModelListener
Model
(e.g. TreeModel)
Data models
• TableModel, JTable
• TreeModel, JTree
• Wrapper
• Converter
(code in snap table component)
(code on website)