Post on 27-Dec-2015
Snap-Together Visualization
Chris North
Lab for Information Visualization and Evaluation
Department of Computer Science
Virginia Tech
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
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: 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”);
MVC
• Model, View, Controller
• Separate UI from underlying system functionality
• UI:
• Data:Model
(data, data logic)
View(display)
Controller(user input)
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)