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

2. Example: website hits

5. Example: Expresso DB Schema

9. Snap (Fusion) Custom visualization workspace Visualization Fusion Data Fusion

10. 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 http://infovis.cs.vt.edu/snap/

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

12. 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)

13. 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

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

15. 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

16. 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

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

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

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

20. 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, …

21. 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

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

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

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

25. 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()

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

27. 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?

28. 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)

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

30. 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, …

31. 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”);

32. ODBC Open DataBase Connectivity Setup “System DSN” for database

33. Examples EmptySnapplet TableSnapplet ScatterPlot

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

35. Multiple Views Model UI 2UI 1

36. 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)

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