Download
snap together visualization n.
Skip this Video
Loading SlideShow in 5 Seconds..
Snap-Together Visualization PowerPoint Presentation
Download Presentation
Snap-Together Visualization

Snap-Together Visualization

154 Vues Download Presentation
Télécharger la présentation

Snap-Together Visualization

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