1

Information VisualizationInformation Visualization

Ji Y

1

Jing YangSpring 2010

InfoVis ProgrammingInfoVis Programming

2

2

Outline

Look at increasing higher-level tools2D hi API2D graphics APIGraphicial User Interface (GUI) toolkitsVisualization framework

You decide which tool to use

3

2D Graphics APIs

OpenGL W ill h l thi Th dWe will have a class on this Thursday

Java2D, GDI+(win32), Quartz(MacOS X)Platform specific 2D graphics APIs

ProcessingAims to get non-programmers started with programming, through the instant gratification of visual feedbackBuilt for electronic arts and visual design communities

4

3

Graphical User Interface Toolkits

Built on top of a 2D graphics libraryM j dditiMajor additions:

Input event processing and handlingTypically mouse and keyboard events

Encapsulation and organization of widgetsBounds management

Only redraw areas in need of updating

5

GUI Toolkits

Examples: Visual C++ NET Visual Basic DelphiVisual C++, .NET, Visual Basic, Delphi Java Swing, Tcl/Tk, QT, GT/K, wxWidgets

Many GUI toolkits are supplied as frameworks

Framework – half-baked breadLarge chunks of the control flow are hidden ginside the canned machinery of the framework and are invisible

6

4

Terminology

WindowA f th t ll d bAn area of the screen controlled by an application. Is usually rectangular Can contain other windows

7

Terminology

ControlI GUI bj t d f t lli thIs a GUI object used for controlling the applicationHas properties and usually generates events. Corresponds to application level objectsEvents are coupled to methods of the corresponding object

8

corresponding object

5

Event-Driven Programming

9

TerminologyWidget:

Visible control that can be manipulated by user or p yprogrammer

Radio Button CanvasCheck buttonImagelistbox for lists!

Frame Label Button Text Entry Message boxes Frame

10

listbox - for lists! Menu/Menu Button Scale/Scrollbar

gLabel Button Text Entry Message boxes Text box

6

Terminology

FrameA t f id t d t th id tA type of widget used to group other widgets together. Often a Frame is used to represent the complete window and further frames are embedded within it.

11

Terminology

LayoutC t l l id t ithi F diControls are laid out within a Frame according to a particular form of LayoutThe Layout may be specified in a number of ways, either using on-screen coordinates specified in pixels, using relative position to other components (left, top etc) or using a grid

12

p ( , p ) g gor table arrangement

7

Terminology

ChildGUI li ti t d t i t f hi hGUI applications tend to consist of a hierarchy of widgets/controls. The top level Frame comprising the application window will contain sub frames which in turn contain still more frames or controls.

13

These controls can be visualized as a tree structure with each control having a single parent and a number of children.

The Containment tree

14

8

Example 1

Visual C++ 2005

15

Example 2

wxWidgetE l j t Vi T lExample project: wxVisTool

16

9

wxVisTool Overview

GUI (Graphical User Interface) platform: wxWidgetswxWidgetsIDE: VC 2005 (you can also use other IDEs that support C++ )Graphics: OpenGL

17

What is wxWidgets?

A C++ framework providing GUI and other facilities on more than one platformsfacilities on more than one platformsVersion 2 currently supports all desktop versions of MS Windows, Unix with GTK+, Unix with Motif, and MacOS Free, open sourcePowerful

18

10

To begin

To set a wxWidgets application going you willTo set a wxWidgets application going, you will need to derive a wxApp class and override wxApp::OnInit. An application must have a top-level wxFrame or wxDialog window. Each frame may contain one or more instances of classes such as wxPanel

19

more instances of classes such as wxPanel, wxSplitterWindow or other windows and controls. Example: MainApplication

Program Entrance

bool MainApplication::OnInit(){{

MyFrame* frame = new MyFrame("Visualization Tool Demo", 50, 50, 450, 300);frame->Show(TRUE);

return TRUE;

20

}MainApplication is derived from wxAppAn application must have a top-level wxFrame or wxDialog window

11

MyFrame and wxFrame

MyFrame is derived from wxFrameEach frame may contain one or more instances of classes such as wxPanel, wxSplitterWindow or other windows and controls. A frame can have a wxMenuBar, a wxToolBar, a status line, and a wxIcon for when the frame is iconized

21

iconized. MyFrame contains a canvas where you can draw using OpenGL

GLCanvas and wxGLCanvas

GLCanvas is derived from wxGLCanvaswxGLCanvas is a class for displaying OpenGL graphicswxGLCanvas is a class for displaying OpenGL graphics

22

12

Event Table

Event tableHeader file:Header file:

Declare the handlerDECLARE_EVENT_TABLE()

Source file: Declare an event (such as a menu click or a mouse click) in the event table, associate it with its handlerDefine the handler

23

DialogsInstances of wxDialog can also be used for controls and they have the advantage of not requiring a

t fseparate frame. Instead of creating a dialog box and populating it with items, it is possible to choose one of the convenient common dialog classes, such as wxFileDialog.

24

13

SceneGraph-Based Approaches

Commonly used in 3D toolkits, also used in 2D2DModels visual elements, properties, and groups in a semantic directed acyclic graphGroups specified related to their own coordinate systemsC i l d bj t i lti lCan include object grouping, multiple camerasWell suited for panning and zooming

25

SceneGraph-Based Toolkits

Adobe Flash A lti di l tf th t i l fA multimedia platform that is popular for adding animation and interactivity to web pages. Commonly used to create animation, advertisements, and various web page Flash components to integrate video into webcomponents, to integrate video into web pages, and more recently, to develop rich Internet applications.

26

14

SceneGraph-Based Toolkits

Piccolohtt // d d /h il/j /http://www.cs.umd.edu/hcil/jazz/Support Zoomable User InterfaceThree versions:

Piccolo.JavaBuilt on Java 2 and rely on Jave2D API

Piccolo.NETBuilt on the .NET Framework and relies on the GDI+ API

PocketPiccolo.NET (for the .NET Compact Framework) 27

InfoVis Toolkits

Most GUI toolkits provide unified structures for graphics and interactionfor graphics and interactionInfoVis frameworks must also consider:

Data modeling and manipulationMappings from data to visuals

Higher-level constructs also possible

28

Layout techniquesInteractive techniquesVisual transformations

15

InfoVis Toolkits

Jean-Daniel Fekete's InfoVis Toolkit K t B ' I f Vi C b I f t tKaty Borner's InfoVis CyberInfrastructureUC Berkeley's User Interface Research Group's Prefuse , ProtoVisUniversity of Maryland's Piccolo ToolkitPenn State Departement of Geography's

29

GeoVISTA Studio

For network visualization or graph layout

UC Irvine's Java Universal Network/Graph Framework (JUNG)Framework (JUNG)Dimitris Kalamaras's Social Network VisualizerAT&T's GraphVizUniversity of Ljubljana's PajekDavid Auber's Tulip

30

16

InfoVis Toolkit [Fekete]

http://ivtk.sourceforge.net/A J lib d ft hit tA Java library and software architecture relying on the Swing GUIExtensible collection of infovis “widgets”

Scatterplot, treemaps, graph visualizations, etc

GGeneral interactive componentsDynamic queries, distortion lenses, excentric labels

31

Data Model

Table-based data model, similar to databaseA t bl i li t f d l lA table is a list of named columns plus metadata and user dataTo represent a tree: add “parent”, “first child”, “next sibling “ columns and other columns on demand

32

17

Internal Structure

33

Sample Code

34

18

Example

35

Prefuse [Heer et al]

http://prefuse.org/P f t lkit id i li tiPrefuse toolkit provides a visualization framework for the Java programming language using the Java2D graphics library. Prefuse flare toolkit provides visualization and animation tools for ActionScript and the Adobe Flash PlayerAdobe Flash Player.Supports node-link diagrams, containment diagrams, collections, scatterplots, timelines

36

19

FeaturesData structures and I/O librariesMultiple visualizations, multiple viewsMultiple visualizations, multiple views Application design through composable modulesA library of provided layout and distortion techniquesAnimation and time-based processingGraphics transforms, including panning and zoomingA full force simulator for physics-based interfacesInteractor components for common interactionsInteractor components for common interactionsIntegrated color maps and search functionalityEvent logging to support visualization evaluation

Demonstration video37

System Architecture

38

20

Table-Based Data Representation

Use edge tables and node tables to represent graphs and treesgraphs and treesTables can be indexed and queriedVisual items

39

ProtoVis [Bostock et al]

A graphical toolkit designed for visualizationL d b Mik B t k d J ff H f thLed by Mike Bostock and Jeff Heer of the Stanford Visualization Group.Free and open-source, provided under the BSD License. Uses JavaScript and SVG for web-native i li ti l i i dvisualizations; no plugin required

JavaScript is an object-oriented scripting language; SVG is a language for describing two-dimensional graphics and graphical applications in XML. 40

21

Features

Composes custom views of data with simple p pmarks such as bars and dots. Defines marks through dynamic properties that encode data, allowing inheritance, scalesand layouts to simplify construction.Designed to be learned by example.Designed to be learned by example.

41

Reference

Jeffrey Heer: Software Architectures htt // i b k l d / / 294 10http://vis.berkeley.edu/courses/cs294-10-sp06/WWW/lectures-WWW/frameworks/

42