Snap-Together Visualization

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 3rd 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 • Link between vis. = Join between tuples in UI action subsets States in a scatterplot Counties in a scatterplot Select states Select counties 1 : M

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

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 Database Snap Linkgraph Snap API Data Data Actions Actions … Visual-ization Visual-ization

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 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: View (display) Controller (user input) Model (data, data logic)

35. Multiple Views UI 1 UI 2 Model

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

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