VISAP 2020 Tutorial

Printmaking, Puzzles, and Studio Closets

Using Artistic Metaphors to Reimagine the User Interface for Designing Immersive Visualizations

[us_single_image image=”1307″ size=”full” align=”center”]

The Tutorial Video

An Overview of Artifact-Based Rendering (ABR)

Artifact Based Rendering (ABR) is a framework that includes tools and processes to enable digital visualizations to incorporate physical media. Created with artists and designers in mind, ABR is a technical foundation and the input channel for Sculpting Visualization’s project to enrich the visual vocabulary of scientific visualization through hand-crafted or naturally occurring objects. ABR bridges key barriers to incorporating artists and designers onto visualization teams by enabling them to contribute their visual expertise without having to spend months learning software tools that currently limit the creative possibilities for their work.

Artifact-Based Rendering is based on a series of metaphors connecting and translating our work in complex graphics processes with the practices of the artistic community. Pulling from the ideas of printmaking, ABR layers glyphs, lines, and surfaces with color and shape the way a printmaker might approach image-making in their studio.

[us_single_image image=”1242″ size=”full” align=”center” css=”.vc_custom_1602834902450{margin-bottom: 100px !important;}”]

The design interface has two primary workable components:

  • Key Data: geometric representations of your data (points, lines, surfaces), loaded from VTK unstructured grid files, each piece of key data has associated scalar & vector variables
  • Data Impressions: your “layers” of data in the visualization. Apply variables and visual elements to each data impression, and watch as they are composed in real time in your visualization.

[us_single_image image=”1240″ size=”full” align=”center” css=”.vc_custom_1602834918232{margin-bottom: 100px !important;}”]

The user interface itself has three primary elements:

  • Data Palette: the panel on the left-hand side which displays data impressions and loaded variables for your data.
  • Composition Panel: the central window into which data impressions are dragged. Each set of data impressions + colormaps, glyphs, streamlines, etc. is called a “plate,” sticking with the printmaking metaphors. Use this panel like you would in Photoshop, adding visual elements as you see fit. More information on this can be found further along in this instructional guide.
  • Design Palette: the panel on the right-hand side which displays all design options for the elements that comprise your visualization.

[us_single_image image=”1245″ size=”full” align=”center” css=”.vc_custom_1602834943550{margin-bottom: 100px !important;}”]

About the Data

Antarctica’s ice sheets are melting rapidly. These ice sheets sit atop Antarctica’s land mass and flow slowly toward regions on the perimeter, where they extend over the ocean and float over the water. These floating pieces of ice are called ice shelves.

The ice shelves hold the ice sheets back, preventing them from flowing into the ocean like corks for champagne. Understanding the shelves’ meltrates is essential to predicting how and when the sheets will begin to flow into the ocean, thereby raising sea levels around the world.

The meltrates of the ice shelves are determined by the ocean’s biogeochemistry and fluid dynamics: temperature, salinity, density and current velocity. However, these variables are difficult to track, as much of the action occurs far below the Antarctic and within deep ice caverns.

We  partnered with a team at Los Alamos National Labs to study this  problem using advanced visualization techniques and simulation data. The visualization you will create during this tutorial will use this data, including temperature, salinity, current velocity, density, bathymetry, and terrain.

The biogeochemistry ocean data has been segmented into six different “water masses,” which are points determined by specific combinations of temperature, salinity and velocity. These segmentations allow scientists to track water with certain characteristics over time and to understand their relationships  and flow patterns. When you begin to add data to your ABR visualization, you will see several different point data options. These are the six different water masses.

For more information about specific aspects of the data, please ask your breakout room leader.

Step-by-step Instructions for Getting Started with ABR

1. Getting started

Go to the ABR user interface in your web browser (an URL will be provided to you that is in the format of

2. Load your data

  • Click the Choose Key Data button in the upper right toolbar

[us_single_image image=”1256″ size=”full” align=”center” css=”.vc_custom_1603470058223{margin-bottom: 50px !important;}”]

  • In the pop-up window, click the plus (+) button next to the data you want to visualize

[us_single_image image=”1249″ size=”full” align=”center” css=”.vc_custom_1603470048817{margin-bottom: 50px !important;}”]

  • As you select the key data, it will begin to show up in data palette on the left side of your interface

[us_single_image image=”1273″ size=”full” align=”center” css=”.vc_custom_1603470802721{margin-bottom: 50px !important;}”]

3. Import some visual elements

  • Open the SculptingVis Library:

[us_single_image image=”1276″ size=”full” align=”center” css=”.vc_custom_1603471684162{margin-bottom: 50px !important;}”]

  • You’ll see a selection of glyphs, colormaps, textures, and lines

[us_single_image image=”1268″ align=”center” css=”.vc_custom_1603471340069{margin-bottom: 50px !important;}”]

  • Drag and drop elements from the library website over to the design palette on the right. Click and drag as many elements as you want. You can come back and get more elements at any time.

[us_single_image image=”1260″ size=”full” align=”center” css=”.vc_custom_1603471522135{margin-bottom: 50px !important;}”]

4. Open the Visualization Viewer

  • Click on the leftmost button in the upper right toolbar to open the Visualization Viewer

[us_single_image image=”1257″ align=”center” css=”.vc_custom_1603472201907{margin-bottom: 50px !important;}”]

5. Create your first plate

  • Create your first plate by clicking and dragging from the Plate List on the right side into the Composition Window in the center

[us_single_image image=”1278″ size=”full” align=”center” css=”.vc_custom_1603472230247{margin-bottom: 50px !important;}”]

  • The puzzle piece on a plate should correspond to the puzzle piece on a key data in the left panel. For example, if you pull a surface plate into the composition window, the key data you should attempt to apply to this plate would only work if it was bathymetry, terrain, or some other kind of surface

[us_single_image image=”1263″ align=”center” css=”.vc_custom_1603472354403{margin-bottom: 50px !important;}”]

  • Drag and drop a key data into the plate

[us_single_image image=”1264″ align=”center” css=”.vc_custom_1603472410787{margin-bottom: 50px !important;}”]

  • The data will now appear in your Visualization Viewer. Everything is white right now because we haven’t applied a colormap to our data. You can use the controls in the upper right corner of the Visualization Viewer window to rotate or zoom in/out of the data

[us_single_image image=”1265″ align=”center” css=”.vc_custom_1603472516824{margin-bottom: 50px !important;}”]

  • Add variables to your data:
      • Click on the dot in the key data to filter variables for that data


    • On the left panel, expand the Scalar Variables or Vector Variables menu, and drag in a variable of your choice onto the plate. Notice how there’s a blue highlight to show you where to drag in the variable.

6. Apply visual elements

  • In the Design Palette panel on the right, there are a few visual asset menus: Colormap, Glyph, LineTexture (and SurfaceTexture). Click on them to see what visual assets you have imported from the library.

[us_single_image image=”1283″ size=”full” align=”center” css=”.vc_custom_1603474138562{margin-bottom: 50px !important;}”]

  • Drag a visual element into their corresponding slot on the plate.

[us_single_image image=”1284″ align=”center” css=”.vc_custom_1603474644710{margin-bottom: 50px !important;}”]

  • The visualization will be updated in the Visualization Viewer. In the example image below, we have applied a subtle light grey colormap to our terrain

[us_single_image image=”1285″ align=”center” css=”.vc_custom_1603474822468{margin-bottom: 50px !important;}”]

  • As you work on your visualization, in the upper left toolbar, click on the Bookmark icon to save the current state or the Double Bookmark icon to save as a new state

[us_gallery ids=”1291,1290″ columns=”2″ indents=”1″ img_size=”full”]

7. Editing visual elements

Glyphs or Streamlines

  • When you drag the Glyph or Streamline key data into your plate, it will appear in the Visualization Viewer. To edit the size or character of these elements, on the plate click the “Glyph size” or “Streamline width” and adjust their numerical value.

[us_gallery ids=”1292,1293″ columns=”2″ indents=”1″ img_size=”full”]

  • You can apply a specific type of glyph/streamline by
    • Clicking on the glyph/streamline dropdown menu in the right panel
    • Finding the glyph/line texture you desire
    • Then dragging and dropping it into the “glyph”/”line texture” puzzle slot on your key data plate.

[us_single_image image=”1296″ size=”full” align=”center”]

Editing colormaps

  • To apply a colormap, select the colormap dropdown menu in the design palette on the right. Click + drag your desired colormap over to your plate, then drop it in the colormap slot
  • To edit the colormap, double click on it while it is applied to the plate

[us_single_image image=”1299″ size=”full” align=”center”]

  • The histogram above the colormap in its dialog box shows the distribution of whichever variable you’ve applied
  • The colorstops are freely movable. You can click and drag them around to achieve your desired map, or add colors using the “add color” button
  • The color will adjust in real time on the Visualization Viewer (for an example, see video)
  • When done, simply click out of the dialogue box

[us_single_image image=”1301″ size=”full” align=”center”]

8. Saving + Taking screenshots

  • You can take a high res image of your vis by clicking the camera button upper right-hand toolbar

[us_single_image image=”1303″ size=”full” align=”center”]

  • An image from the Visualization Viewer will be saved
  • Click on the Gallery icon in the upper right toolbar to select a screenshot to save to your computer

[us_single_image image=”1304″ size=”full” align=”center”]

  • Download the state to share it with others using the ABR program by clicking the folder on the upper left-hand side of the toolbar

[us_single_image image=”1305″ size=”full” align=”center”]