1 / 37

Snap-Together Visualization

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.

cooper
Download Presentation

Snap-Together Visualization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. Example: website hits

  3. Example: Expresso DB Schema

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

  5. 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/

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

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

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

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

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

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

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

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

  14. Software Architecture • JDBC-ODBC Database Snap Linkgraph Snap API Data Data Actions Actions … Visual-ization Visual-ization

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. Examples • EmptySnapplet • TableSnapplet • ScatterPlot

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

  30. Multiple Views UI 1 UI 2 Model

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

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

More Related