Estimated Time: 30 Minutes
In Tioga DataSplash, you can interactively create and browse visualizations of database tables. There are three main ways you can use this system. First, you can navigate by panning and zooming a visualization. Second, you can create objects with a paint program interface. Third, you can graphically program the way these objects behave during navigation. This tutorial provides a high-level introduction to these three parts of the system.
This tutorial uses a visualization of the average commute time for workers in the United States. The visualization contains a polygon outline of the United States. When you drill down into the visualization, the fifteen most populous metropolitan areas are displayed. Further drill-down reveals details about the average commute time for workers in those regions.
You can use this introduction in two ways. First, you can simply read through the introduction and look at the screen shots provided. This will provide an overview of the major features of the system. Second, you can follow the instructions for using these features in the system. This will provide you a hands-on demonstration.
You should allow approximately 30 minutes to read the introduction and follow the demonstration.
Demonstration instructions appear in tables which have two or three columns per row:
||A brief description of the concept being illustrated goes here, as
well as instructions about what to look for on the screen.
An instruction (e.g., click the foo button) goes here.
A description of the screen which results from your following the instruction goes here.
DataSplash uses only the left (primary) mouse button, hereafter referred to as the "mouse button." The following definitions are used throughout this tour:
If you wish to do the demonstration, follow the directions below. Otherwise, you can proceed directly to the next section.
In your UNIX environment, do the following:
||Establish a database client connection.
setenv PGHOST <database server>
This sets up the Postgres95 client database connection.
||Launch DataSplash. Run the DataSplash binary (usually called datasplash)
with no options.
The main menu for DataSplash should appear in the upper left corner of your monitor.
In the next set of instructions, you will open a database with an existing visualization (a DataSplash canvas).
||Open Canvas. The Open Canvas button is the
second button from the left on the main menu. It has an icon of a manila
Click the Open Canvas button on the main menu.
You should see the Open Database dialog.
If you see a dialog with the message "Database Connection Error," you probably don't have your PGHOST environment variable set correctly.
||Select a database.
Select the "datasplash_demo" database and click the OK button.
You should see the Open Canvas dialog.
||Select a canvas.
Select the "us_timetowork" canvas and click the OK button.
Depending on your database server, there may be a considerable delay before the next window appears. Eventually a window with the title "us_timetowork" should appear.
Several DataSplash components are used to edit or navigate in a visualization. These components are grouped together in a window called a studio. A new studio is created each time you open a canvas.
The studio contains the following four components:
In the remainder of the demonstration you will use these components to browse and interactively edit the visualization.
In Tioga DataSplash, all objects are placed in a two-dimensional canvas. You view the canvas with a camera which moves in three-dimensional space but always points straight down at the canvas. You can pan across the canvas (changing the x,y location of the camera). You can also zoom in and out above the canvas (changing the z location, or elevation, of the camera).
In this section you will pan, zoom and teleport in the visualization.
The studio is always in a mode. A mode defines the meaning of mouse movements in the canvas and layer manager. You choose modes by clicking tools in the toolbar. The system begins in Click Pan mode.
||Click Pan. When you are in Click Pan mode,
clicking on a pixel in the canvas moves the canvas camera so it is centered
above the x,y location of that pixel.
Click on the state of Texas.
The point on which you clicked should be in the center of the canvas.
Every canvas has a maximum elevation. There are tick marks on the left side of the layer manager ranging from 0 to 100% of the maximum elevation. Your current elevation is represented by the thin horizontal line in the layer manager.
||Layer-manager click zoom. When you click
on a tick mark in the layer manager, you zoom to that percent of the maximum
elevation of the layer manager. This is called layer-manager click zoom.
Unlike canvas Click Pan, layer-manager click zoom is not
a mode. Layer-manager click zoom is active while the studio is in any mode.
Click on the 20% tick mark in the layer manager.
You should see a zoomed view. Recall that your current elevation is represented in the layer manager by the horizontal elevation bar (a narrow, cyan bar). This bar should be positioned at the 20% level.
Every canvas has a user-configurable camera start location. The camera starts in this position when the canvas is first opened. In the following step, you learn how to return to this start position.
||Use the Home button to return to
Click the Home button on the toolbar.
You should see the opening visualization from step Qu05.
DataSplash includes an intuitive paint program interface. With this interface, you can create objects in the canvas. There are two types of objects, trim and splash. Trim objects are decorative and are not associated with the data. Splash objects are based on values from the data manager.
As in a conventional paint program, you are presented with a palette of displayable objects (point, line, etc.). To draw an object, you select the corresponding paint primitive from the paint palette and then place it in the canvas window. A single such object is called a trim object; each trim object is created individually. Trim objects are useful as titles, legends, and other helpful or decorative trim.
In the next set of instructions, you will move to a position in which you will subsequently draw a trim object.
|Qu09||Click Pan. Before you draw your object, you'll want to pan to
a blank part of the canvas.
Click in the upper right-hand corner of the canvas.
The US outline should be in the lower-left portion of the canvas.
|Qu10||Layer manager click zoom (Qu07)to 10%.
Click on the 10% tick mark in the layer manager.
The canvas should be relatively empty except for a purple rectangle. The rectangle may be only partially visible, but you can click pan to center the rectangle. If the rectangle is not visible at all, go back to step Qu08.
In the following set of instructions, you will draw a trim object.
||Enter Rectangle mode. The Rectangle toolbar
button is located immediately above the canvas and has an icon of a black
outline of a rectangle.
Click the Rectangle button on the toolbar.
The mouse cursor should be a pencil when the mouse is positioned over the canvas. The Rectangle button should be depressed.
|Qu12||Paint the rectangle.
Push the mouse in the lower left corner of the purple box and drag the mouse towards the upper right of the box.
A bounding box should be displayed for the rectangle as you drag the mouse cursor across the canvas.
|Qu13||Finish the rectangle.
When the bounding box is approximately the same size as the purple box, release the mouse button.
After you create an object, the system automatically switches you from Rectangle mode to Select mode and selects the recently created object. Nine beige bounding box handles should appear on the rectangle, indicating that the rectangle is selected. If your rectangle is too small, you will not see nine handles. That's okay - just draw another rectangle over the small one.
In the next set of instructions you learn how to re-select the rectangle in case you accidentally de-select it.
||Select an object using Select mode.
The Select mode toolbar button is located above the canvas, on the
right side, and has an icon of a white arrow pointing upward and to the
If the Select mode toolbar button is not depressed, click the Select button on the toolbar.
The Select mode button should be depressed.
|Qu18||De-select an object. You can de-select an object in the canvas by clicking
anywhere in the canvas that is outside the object.
Click anywhere on the canvas outside the object (rectangle).
The beige select handles should disappear.
|Qu19||Select an object.
Click inside the object (rectangle).
The beige handles should reappear. The object is selected.
Three operations can be performed when the mouse is positioned over a selected object. The specific mouse cursors (edit, move, or resize) determine the actions possible. First, when the microscope appears, you can click to edit the selected object. Second, when the hand appears, you can drag to move the selected object. Finally, when the crosshairs appear, you can drag to resize the selected object.
You use the Format dialog to edit objects.
||Activate the edit cursor (the microscope).
Move the mouse cursor slowly over the selected rectangle until the microscope appears.
You should see the microscope.
|Qu21||Invoke the Format dialog.
While the microscope is visible, click the mouse.
The rather large Format dialog should appear.
You now want to change the color of your rectangle. You can use the format dialog to set the color as follows:
|Qu22||Choose the Fill option. The Fill button is located
to the right of the three color sliders in the Format dialog.
Click the Fill button in the Format dialog.
The Fill button should be depressed.
|Qu23||Choose your favorite color for the rectangle.
Click anywhere in the red, green, and blue slider bar areas.
The box next to the Fill button should change color as you modify the color bars.
|Qu24||After you have chosen a color that you like, click the
OK button in the Format dialog.
The Format dialog should disappear and the rectangle in the canvas should be the fill color you chose.
The rectangle you just created is a trim object. There is only one of these objects and it is not dependent on any database data. Such objects can be created in traditional paint programs.
Unlike a standard paint program, our paint program contains a window (the data manager) that shows rows from a table to be visualized. Each row is assigned an x,y location in the canvas, i.e., the rows are scattered across the canvas, giving an effect similar to a scatter plot. The x,y location of each row is derived from its values in certain columns. For example, in this visualization we have a table of United States cities with longitude and latitude columns. x and y are assigned to the longitude and latitude values of each city.
At any point, you can select an object in the canvas and duplicate it for every row in the database table. As a result, a copy of the object appears at the x,y location of every row in the table. The effect is like splashing paint across the canvas, coating every scattered row; thus the name splash object. You may also associate display properties of objects with columns in the table, e.g., height, width, color, and rotation of each splash object can be derived from values in the columns of its row.
In the next set of instructions, you will create rectangles for each row in a table of the fifteen most populous US cities. The height of each rectangle will reflect the percentage of people who use public transportation in the city associated with the rectangle.
|Qu25||Select the rectangle if it does not have the beige handles.
Make sure the rectangle is selected (beige handles are present). If not, click on the rectangle.
If this doesn't work, see Qu17.
||Bring up the Format dialog.
Move the mouse cursor over the selected object until the microscope appears and then click the mouse.
The rather large Format dialog should appear.
||Change an object from trim to splash. Notice that in the Format
dialog there are two radio buttons near the top left. Currently the
Trim button is enabled.
Click the Splash button in the Format dialog.
The Splash Wizard dialog should appear.
|Qu28||Dismiss the Splash Wizard dialog. (If you're going
to set a lot of properties for an object, it can be faster to use the Splash
Wizard. Here, you're only going to set one property, so you won't bother
Click the Dismiss button in the Splash Wizard dialog.
The Splash Wizard should disappear.
||Associate height with a data value. The Height pop-up
menu has an icon of a thick light purple line with arrows pointing up-and-down.
Push the Height pop-up menu, select the "prcnt_use_public" field from the list of choices and release the mouse.
The Height pop-up box should be filled with "Function."
|Qu30||Dismiss the Format dialog.
Click the OK button in the Format dialog.
The trim rectangle should be gone.
Click the Home button on the toolbar (Qu08).
You should see rectangles scattered throughout the US.
At this point you are looking at an outline of the United States overlayed with rectangles. The table associated with the rectangles contains records for the fifteen most populous metropolitan areas in the United States. The field which determines the height of each rectangle is a United States census statistic which is the percentage of commuters in each metropolitan area that use public transportation. By inspecting the canvas, you can see that the rectangles in the east area are taller than those in the west. This illustrates that commuters in the east are more likely to use public transportation.
You can use the layer manager to program the way objects behave when you (or other users) zoom in a canvas. All objects in a canvas are organized into layers. Each object is in exactly one layer. In this screen shot of the layer manager, each vertical bar in the layer manager represents a single layer.
As in traditional paint programs, these layers can be made invisible or visible individually. Each layer bar has a Layer Visible Toggle button below it. This button toggles the layer between visible and not visible states, and it contains an icon for its layer. All visible layers except the selected layer have green icons and all layers which are not visible have gray icons. Precisely one layer is selected at all times. The selected layer is always visible and its icon is beige.
||Make a layer visible. The icon on the button below the third layer
bar from the left should be dark gray, indicating the layer is not currently
Click the Layer Visible Toggle button below the third layer bar from the left in the layer manager.
Blue text should appear. This text should be small and difficult to read.
The ordering of the layer bars from left to right is significant. In general, objects in a given layer are drawn on top of objects in layers to their left (i.e., layers are rendered from left to right). However, in Select mode, you can only select and edit objects which are in the currently selected layer. Therefore, in Select mode, DataSplash uses a special rendering order to facilitate selecting objects (objects in the selected layer are drawn last so they are on top of all other objects). Further, all objects in non-selected layers are wireframed (drawn with thin lines and not filled). This shows you which objects can and can not be selected and provides a visual cue that you are in select mode.
Each layer is associated with exactly one database table. Therefore, when you select a layer, the contents of the data manager change to show you the data for that layer.
||Select a layer. Currently, you should be in select
mode and the first layer from the left in the layer manager should be selected.
Click the third layer bar from the left in the layer manger.
The first layer should no longer be selected. As a result, the objects it contains should be wireframed (the rectangles should no longer be filled).
Unlike traditional paint programs, DataSplash allows you to control the elevation at which each layer is rendered. You can do this by graphically resizing layer bars in the layer manager (also known as the elevation map). The top of the layer bar represents the highest percentage of maximum elevation at which objects in the layer are rendered. Similarly, the bottom of the layer bar represents the lowest percentage of maximum elevation at which objects in the layer are rendered. Recall the horizontal elevation bar from (Qu09). In the above picture it is the red/pink horizontal bar spanning the layer manager at 100%. Any layer which is crossed by the horizontal elevation bar is considered to be active and objects in the layer are rendered.
||Resize a layer.
Position the mouse cursor over the black handle at the top of the newly selected layer bar until the crosshairs appear. Push the mouse and drag the top of the bar to 55%. Release the mouse.
The blue text text should disappear. If you accidentally invoke the Layer Operations dialog, click the Cancel button and try again.
||Layer manager click zoom (Qu07)to 50%.
Click on the 50% tick mark in the layer manager.
The blue text should reappear. At this elevation, the state abbreviations should be legible.
Certain objects in DataSplash are portals. A portal is a miniature window onto a canvas as well as a link to that canvas. You can zoom through a portal to enter the canvas it depicts.
In the following instructions, you will move so that you can see a portal.
|Qu36||Select a layer (Qu33).
Select the first layer bar from the left in the layer manager.
The first layer bar from the left should turn the selected color (beige).
||Enter Click Pan mode (Qu06).
The Click Pan toolbar button is above the layer manager and has
an icon of a white arrow pointing upward to the left positioned next to
a white cross.
Click the Click Pan button on the toolbar.
The Click Pan button should be depressed. Objects in the canvas should no longer be wireframed.
|Qu38||Teleport to a position specified by
a table row. Recall that each row has an x,y position. If you click
on a row in the table, you teleport to its x,y position.
Click on the topmost (first) record in the data manager table.
You should be positioned over the city of Baltimore, which is the first record in the city table.
||Layer-manager click zoom (Qu07)
Click on the 10% tick mark in the layer manager.
You should see a scene in which "Baltimore, MD USA" is written below a blue rectangle which contains a bar chart. The rectangle is a splash portal, i.e., there is one such portal for every city record in the data manager city table.
Now that you have a portal in your sights, you can go through it.
||Enter Portal Click mode. The Portal Click button
on the toolbar is positioned above the layer manager and has a icon of
Click the Portal Click button on the toolbar.
The Portal Click button should be depressed.
|Qu41||Go through the portal.
Click on the red bar chart in the Baltimore blue rectangle.
The Composite Modified dialog should appear.
|Qu42||Dismiss the Composite Modified dialog.
Click the No button in the Composite Modified dialog.
You should see an animated effect as you enter the portal and the studio displays a new canvas. Note that the layer manager and the data manager should be updated to show information for the new canvas. The title "US City Average Time To Work - Demo" should appear.
|Qu43||Layer-manager click zoom (Qu07) to 50% to get a
good look at the bar chart.
Click on the 50% tick mark in the layer manager.
You should see the complete bar chart.
|Qu44||Table record teleport (Qu38)
to compare Baltimore to other cities.
Click on random rows of the data manager table.
You should see a chart for a different city each time you click on a different row.
Like a web browser, DataSplash keeps a history of visited links so you can go backwards and forwards in the history list. In the next step, you'll return to the previous canvas.
||Use Portal Back. The Portal Back button is located above
the layer manager and has an icon of an arrow pointing left.
Click the Portal Back button on the toolbar. If the Composite Modified dialog appears, click the No button.
You should see the same scene you saw in step Qu39.
You now want to close the studio window and exit DataSplash. You have at some points modified the visualization. You probably do not want to save any changes if you would like to keep the demo visualization intact.
||Close the studio window without saving any changes. The
Close Studio button is in the upper right-hand corner of the toolbar.
Click the Close Studio button on the toobar. If a dialog appears asking if you are sure you want to close this window, click the Yes button.
The studio window should disappear.
Pull down the File menu from the main menu and select "Exit."
The DataSplash main menu should disappear, meaning you have exited DataSplash.
In just 30 short minutes you have touched on all the important concepts of DataSplash. You have done so by interacting directly with the software. You have browsed the visualization, created objects, and visually programmed the behavior of objects.
Thank you for taking this tour of DataSplash.
Copyright © 1997, Regents of the University of California Comments to: firstname.lastname@example.org Document: Quick Tour Date Last Revised: February 23rd, 1997