# Presentation: 886347

## TheScientific Graphics Toolkit(A Technical Overview)

- Donald Denbo
- UW-JISAO/NOAA-PMEL

- _[http://www.epic.](http://www.epic.noaa.gov/java/sgt)__[noaa](http://www.epic.noaa.gov/java/sgt)__[.](http://www.epic.noaa.gov/java/sgt)__[gov](http://www.epic.noaa.gov/java/sgt)__[/java/](http://www.epic.noaa.gov/java/sgt)__[sgt](http://www.epic.noaa.gov/java/sgt)_

## Introduction

- The Scientific Graphics Toolkit (SGT) is a collection of Java classes and interfaces to create graphical applications.
- SGT is a *toolkit*, not an application.  Using SGT requires moderate Java programming skills.
- SGT does have several classes that make creating a graphical application easier, but using SGT does require producing code.
- With a modicum of effort a Java programmer can, using SGT, create graphical Java applications that are easy to use.
- SGT has had 5588 downloads to 2393 unique sites in 60 countries since March 2000 (as of Jan 7, 2002).

- NVODS/DODS Technical Workshop

- January 11, 2002

## History

- Sgt was developed to allow a NOAAServer user to interactively preview data and overlay plots.
- Originally developed using jdk 1.0.3, now uses jdk 1.1.x.  Next release will require jdk 1.2 or newer.
- Tutorial made available October 25, 2001.
- SGT release dates
- 1.0 – March 20, 2000
- 2.0 – March 14, 2001
- 2.1 – December 14, 2001

- NVODS/DODS Technical Workshop

- January 11, 2002

## SGT Applications

- _[OceanShare](http://www.epic.noaa.gov/collab)_
- a collaborative tool for distributed *in situ* data visualization
- Being customized for Fisheries-Oceanography use
- _[http://www.epic.](http://www.epic.noaa.gov/collab/)__[noaa](http://www.epic.noaa.gov/collab/)__[.](http://www.epic.noaa.gov/collab/)__[gov](http://www.epic.noaa.gov/collab/)__[/](http://www.epic.noaa.gov/collab/)__[collab](http://www.epic.noaa.gov/collab/)__[/](http://www.epic.noaa.gov/collab/)_ (pdf paper)
- ncBrowse
- a netCDF file browser for local and remote netCDF files
- _[http://www.epic.](http://www.epic.noaa.gov/java/ncBrowse/)__[noaa](http://www.epic.noaa.gov/java/ncBrowse/)__[.](http://www.epic.noaa.gov/java/ncBrowse/)__[gov](http://www.epic.noaa.gov/java/ncBrowse/)__[/java/ncBrowse/](http://www.epic.noaa.gov/java/ncBrowse/)_  (power point presentation)
- 3452 downloads to 1680 unique sites in 48 countries since February 2000 (as of Jan 7, 2002).
- _[Climate Data Portal client](http://www.epic.noaa.gov/cdp)_
- A distributed *in-situ* data application
- _[http://www.epic.](http://www.epic.noaa.gov/cdp/)__[noaa](http://www.epic.noaa.gov/cdp/)__[.](http://www.epic.noaa.gov/cdp/)__[gov](http://www.epic.noaa.gov/cdp/)__[/](http://www.epic.noaa.gov/cdp/)__[cdp](http://www.epic.noaa.gov/cdp/)__[/](http://www.epic.noaa.gov/cdp/)_  (power point presentation)
- Although the CDPclient has not been publicly released, it has had 125 downloads to 51 unique sites in 6 countries.

- NVODS/DODS Technical Workshop

- January 11, 2002

## Outline

- Demos and Examples
- Technical Issues
- Design philosophy & Goals
- Using standard Java idioms
- Design Patterns
- Architecture
- Real world applications using SGT

- NVODS/DODS Technical Workshop

- January 11, 2002

## Outline

- Demos and Examples (applet demo)
- Technical Issues
- Design philosophy & Goals
- Using standard Java idioms
- Design Patterns
- Architecture
- Real world applications using SGT

- NVODS/DODS Technical Workshop

- January 11, 2002

## TAOMap

- Plot built from basic sgt components
- Uses _[ValueIcon](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/ValueIcon.html)_, which implements _[Draggable](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/Draggable.html)_
- Uses a Point Key, which implements _[Moveable ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Moveable.html)_and _[Selectable](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Selectable.html)_

- _[http://www.epic.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[noaa](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[gov](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/java/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[_demos.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[shtml](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## JRealTimeDemo

- Built from basic sgt components.
- Data class uses PropertyChangeEvents to notify sgt.
- Sgt then updates plot.

- NVODS/DODS Technical Workshop

- January 11, 2002

## JVectorDemo

- Uses _[JPlotLayout](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/JPane.html)__[ ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/JPane.html)_which provides:
- Zoom
- _[LayerChild](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LayerChild.html)__[ ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LayerChild.html)_selection
- Vector head style is HEAD, where vector head is unscaled.

- _[http://www.epic.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[noaa](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[gov](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/java/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[_demos.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[shtml](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## JGridDemo

- Uses _[JPlotLayout](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/JPlotLayout.html)__[ ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/JPlotLayout.html)_which provides:
- Zoom
- _[LayerChild](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LayerChild.html)__[ ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LayerChild.html)_selection
- _[GridAttribute](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/GridAttribute.html)__[ ](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/GridAttribute.html)_is initially set to RASTER_CONTOUR style.

- _[http://www.epic.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[noaa](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[gov](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/java/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[/](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[sgt](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[_demos.](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)__[shtml](http://www.epic.noaa.gov/java/sgt/sgt_demos.shtml)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## Outline

- Demos and Examples
- Technical Issues
- Design philosophy & Goals
- Using standard Java idioms
- Design Patterns
- Architecture
- Real world applications using SGT

- NVODS/DODS Technical Workshop

- January 11, 2002

## Design Philosophy & Goals

- Don’t provide too much functionality in the toolkit
- Require developer to disambiguate zoom request (which layer)
- Use interfaces for data model specification
- Hide as much of the internal machinery as possible
- Provide utility classes to support developer
- Dialogs to set/edit graphics properties
- Plot layout class to support simple graphics
- Basic implementations of data model interfaces
- Keep toolkit flexible and extensible
- GIS style layer approach
- Support several display types
- Time series/Time axes
- X-Y plot
- 2-D contour and “pixel” plots
- Vector plot
- Point-Value plot

- NVODS/DODS Technical Workshop

- January 11, 2002

## Using standard Java idioms(don’t reinvent the wheel)

- Basic graphics toolkits
- AWT support (now being deprecated)
- Pane is a container
- Printing
- Swing support
- Scrolling
- Printing
- Repaint (refresh)
- Minimum, maximum, and preferred size
- JPane is a container
- JavaBeans idiom
- Use set/get for parameters
- Use add/remove for event listeners
- Use set/is for boolean parameters

- NVODS/DODS Technical Workshop

- January 11, 2002

## Don’t reinvent the wheel (cont...)

- Events
- Mouse events
- Trapped by SGT
- Object selection
- Object move/drag operations
- Zoom rectangle handling
- Passed on by SGT
- All others...
- SGT internal events (not really events!)
- Add/remove SGT components
- Modify component appearance (eg. Label, axis)
- Property change events
- When a property changes value (eg. _[LineAttribute](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LineAttribute.html)_)
- When a value changes in a data object
- When the range of a data object changes

- NVODS/DODS Technical Workshop

- January 11, 2002

## Design Patterns

**Strategy.** Define a family of algorithms, encapsulate each one, and make them interchangeable.
- _[Transform](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Transform.html)_, _[TimeAxisStyle](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/TimeAxisStyle.html)_, _[CartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/CartesianRenderer.html)_
**Proxy.** Provide a surrogate or placeholder for another object to control access to it.
- _[Pane](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Pane.html)_, _[JPane](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/JPane.html)_
**Abstract Factory.** Provide an interface for creating families of related or dependent objects without specifying their concrete classes.
- _[CartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/CartesianRenderer.html)_, _[GridCartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/GridCartesianRenderer.html)_, _[LineCartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LineCartesianRenderer.html)_, _[VectorCartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/VectorCartesianRenderer.html)_, _[PointCartesianRenderer](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/PointCartesianRenderer.html)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## More Design Patterns

**Interface.** Keep a class that uses data and services provided by instances of other classes independent of those classes by having it access those instances through an interface.
- _[SGTData](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/dm/SGTData.html)_, _[SGTGrid](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/dm/SGTGrid.html)_, _[SGTLine](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/dm/SGTLine.html)_, etc
- _[IndexedColor](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/IndexedColor.html)_, _[TransformColor](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/TransformColor.html)_, _[TransformAccess](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/TransformAccess.html)_
- _[LayerChild](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/LayerChild.html)_, _[Moveable](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Moveable.html)_, _[Selectable](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/Selectable.html)_, _[Draggable](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/Draggable.html)_
**Façade.** Provide a unified interface to a set of interfaces in a subsystem.
- _[JPlotLayout](http://www.epic.noaa.gov/java/sgt/sgt-doc/gov/noaa/pmel/sgt/swing/JPlotLayout.html)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## Outline

- Demos and Examples
- Technical Issues
- Design philosophy & Goals
- Using standard Java idioms
- Design Patterns
- Architecture
- Real world applications using SGT

- NVODS/DODS Technical Workshop

- January 11, 2002

## Core Architecture

- Three coordinate systems
- Device – lowest level in pixels
- Physical – lower-left origin
- User – user defined
- Three main components
- Pane/JPane – extends Container/JLayeredPane
- Layer – physical units, used to build plot
- Graph – user units, axes, renders data *(presently only **CartesianGraph** is implemented)*

- NVODS/DODS Technical Workshop

- January 11, 2002

## Core structure

- NVODS/DODS Technical Workshop

- January 11, 2002

## Layers

- Contain a single Graph object and many LayerChild objects.
- Many Layers can be associated with a single Pane
- Layers can share AxisTransforms via their CartesianGraph objects
- LayerChild objects use physical coordinates

- NVODS/DODS Technical Workshop

- January 11, 2002

## Layer Children

- NVODS/DODS Technical Workshop

- January 11, 2002

## Rendering data

- A CartesianGraph object aggregates:
- Zero or more X or Y axes
- A renderer appropriate for the data type and attribute *(e.g., **PointCartesianRenderer**, **LineCartesianRenderer**, or **GridCartesianRenderer**)*
- One X AxisTransform
- One Y AxisTransform
- AxisTransforms provide a user to physical coordinate transformation for space or time

- NVODS/DODS Technical Workshop

- January 11, 2002

## Graph and Renderers

- NVODS/DODS Technical Workshop

- January 11, 2002

## Space and Time Axes

- SpaceAxis provides a visual scale for the spatial user to physical coordinate transform
- TimeAxis creates a visual scale for the GeoDate to physical coordinate transform
- TimeAxis has several “styles” that can be used depending on the temporal span
- Minute-Hour
- Hour-Day
- Day-Month
- Month-Year
- Year-Decade

- NVODS/DODS Technical Workshop

- January 11, 2002

## Axes and AxisStyles

- NVODS/DODS Technical Workshop

- January 11, 2002

## Sgt Data Model

- Data model needs to
- Support X-Y, contour, raster, vector, and point plots
- Be compact and “light-weight”
- Throw events to notify applications of data and/or range changes.
- Accomplished the above by
- Supporting “plottable” objects
- One- and two-dimensional arrays
- Coordinate information
- Units and titles
- Data model implemented using java interfaces

- NVODS/DODS Technical Workshop

- January 11, 2002

## Sgt Data Model

- NVODS/DODS Technical Workshop

- January 11, 2002

## Mouse Events

- Mouse events are pre-processed by Pane
- Events passed to the user are
- Object selection
- Zoom rectangle selected
- PropertyChangeEvents thrown are
- objectSelected
- zoomRectangle
- Events processed by sgt are
- Object move
- Object drag

- NVODS/DODS Technical Workshop

- January 11, 2002

## Outline

- Demos and Examples
- Technical Issues
- Design philosophy & Goals
- Using standard Java idioms
- Design Patterns
- Architecture
- Real world applications using SGT

- NVODS/DODS Technical Workshop

- January 11, 2002

## ncBrowse

- ncBrowse was developed to browse netCDF files.
- Uses JPlotLayout which provides:
- Zoom
- LayerChild selection

- _[http://www.epic.](http://www.epic.noaa.gov/java/ncBrowse)__[noaa](http://www.epic.noaa.gov/java/ncBrowse)__[.](http://www.epic.noaa.gov/java/ncBrowse)__[gov](http://www.epic.noaa.gov/java/ncBrowse)__[/java/ncBrowse](http://www.epic.noaa.gov/java/ncBrowse)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## Client developed to plot data from distributed data servers.
Data from multiple servers can be combined on a single plot.
Uses JPlotLayout
Line Plots
Area Plots

- Data from multiple servers can be combined on a single plot.
- Uses JPlotLayout
- Line Plots
- Area Plots

- _[http://www.epic.](http://www.epic.noaa.gov/cdp/)__[noaa](http://www.epic.noaa.gov/cdp/)__[.](http://www.epic.noaa.gov/cdp/)__[gov](http://www.epic.noaa.gov/cdp/)__[/](http://www.epic.noaa.gov/cdp/)__[cdp](http://www.epic.noaa.gov/cdp/)__[/](http://www.epic.noaa.gov/cdp/)_

- Climate Data Portal Client

- NVODS/DODS Technical Workshop

- January 11, 2002

## OceanShare

- OceanShare provides
- Collaborative work environment
- Local and network access of data sets
- Access to Habanero tools (whiteboard, chat, etc.)
- Implemented using LineProfileLayout
- Line style (highlight, mark, or solid)
- Line color
- Interactive zoom
- UserIcon and ValueIcon *(implements **LayerChild** interface)*

- _[http://www.epic.](http://www.epic.noaa.gov/collab/)__[noaa](http://www.epic.noaa.gov/collab/)__[.](http://www.epic.noaa.gov/collab/)__[gov](http://www.epic.noaa.gov/collab/)__[/](http://www.epic.noaa.gov/collab/)__[collab](http://www.epic.noaa.gov/collab/)__[/](http://www.epic.noaa.gov/collab/)_

- NVODS/DODS Technical Workshop

- January 11, 2002

## What next?

- Finish GridAttributeDialog. *(enables **GridAttribute**, contour, and **ColorMap** editing.)*
- Next version (2.2) will
- use Java2D to provide native support of physical to device coordinate transformation
- Remove deprecated classes and drop jdk1.1 support

- NVODS/DODS Technical Workshop

- January 11, 2002

## Real World Applications using SGT

- SGT – Java graphics toolkit
- A Tutorial of the Scientific Graphics Toolkit, NOAATech 2002.
- _[“Interactive Graphics Toolkit for Java Applications and Web Applets”, ](http://www.epic.noaa.gov/talks/dwd/ams2001/sgt_10_3.htm)_American Meteorological Society paper, January 2001.
- _[SGT home page.](http://www.epic.noaa.gov/java/sgt)_
- ncBrowse – netCDF file browser
- _[ncBrowse home page.](http://www.epic.noaa.gov/java/ncBrowse)_
- OceanShare – collaborative tool for distributed in-situ data _[“OceanShare: Interactive Access to Distributed In](http://www.epic.noaa.gov/talks/dwd/ams2000/OceanShare.htm)__[ Situ](http://www.epic.noaa.gov/talks/dwd/ams2000/OceanShare.htm)__[ Data in a Collaborative Tool Environment”, ](http://www.epic.noaa.gov/talks/dwd/ams2000/OceanShare.htm)_American Meteorological Society paper, January 2000.
- GOIN 99 Presentation.
- Climate Data Portal – distributed in-situ data access
- Climate Data Portal home page.

- NVODS/DODS Technical Workshop

- January 11, 2002