Visual Information Density Adjuster.
This work was done by Allison Woodruff, James Landay,
and Michael Stonebraker of the Computer Science Division
at the University of California Berkeley.
Clutter is a common problem in many visualization systems.
We've developed a new system that
uses cartographic principles to reduce clutter.
In this video, we'll give some background
on previous work in this area.
Then we'll introduce our system VIDA.
We'll show how VIDA helps users construct visualizations
with appropriate information density.
Finally, we'll show VIDA's new zoom method
that zooms in on graphical representations
until they have appropriate detail.
This is a visualization of income and transportation
data in the United States.
The states are colored according to income.
Many visualization systems represent
objects in a two-dimensional canvas over which the user can
pan and zoom.
DataSplash is one such system developed at the University
of California at Berkeley.
In these systems, zooming changes the user's distance
from the canvas.
This distance is also known as the user's elevation.
In DataSplash, the user's current elevation
is shown with the horizontal line and tick marks shown
at the right.
Higher elevations are at the top.
Lower elevations are at the bottom.
The user can change their elevation
by clicking on the tick marks.
DataSplash supports semantic zoom.
In semantic zoom systems, objects
change as the user zooms.
For example, detail may be added to an object when
the user zooms in on it.
DataSplash has a tool that lets users program the way objects
change representation during zooming.
In DataSplash, objects are organized in layers.
Each layer appears as a vertical layer bar in a layer manager.
Each layer bar shows the elevation range
at which the objects in that layer are visible.
The top of the layer bar indicates the highest elevation
at which the objects in the layer are visible.
And the bottom of the layer bar indicates the lowest elevation
at which the objects in the layer are visible.
For example, in this visualization,
the bar on the left-hand side of the Layer Manager
contains data outlines.
At our current elevation shown by the horizontal line,
only the states are visible.
The next layer bar contains cities.
When we zoom in, both the state outlines
and the cities are visible.
The final layer bar contains detailed graphs
as transportation data about each city.
When we zoom in even closer, these graphs become visible.
Semantic zoom solves part of the clutter problem.
However, visualizations can still
be cluttered for two reasons.
First, it's hard for users to specify the correct transition
points for the layers.
Second, data is often non-uniform
in the x and y dimensions.
So regions of the canvas can be too dense or too sparse.
We'll address these problems in turn.
This is a visualization of cities in the United States.
The color and size of the city indicate its population.
The user has guessed appropriate positions
for all of the layer bars.
And at the current elevation, the visualization
seems to have appropriate detail.
However, when the user zooms out,
the visualization is obviously cluttered.
In our naive implementation of DataSplash,
the user goes through a tedious iterative process
in which they repeatedly adjust the elevation bars
and then zoom around to see how their changes look.
VIDA is an extension to DataSplash
that helps users set the top and bottoms of the layer bars.
VIDA is based on the principle of constant information
density, which implies that the amount of information
in a visualization should remain constant as the user
pans and zooms.
We modified the Layer Manager so that it gives users
feedback about the information density of their visualization.
With this information, users can create
visualizations that have the same density at all elevations.
In this visualization, we'll measure density according
to the number of objects.
Our system supports other density functions as well.
The user has provided a goal density value.
We've made two changes to the Layer Manager.
First, the width of each layer bar
is exactly proportional to the layer's average density
at that same elevation.
The scale is defined in terms of a maximum layer bar width
so a single layer bar of maximum width
would have 100% of the maximum density specified by the user.
At higher elevations, more objects are visible.
Therefore, the layer bars are wider at the top.
They taper towards the lower elevations
at which they are less dense.
We crop the layer bars at the maximum width.
We've made one other change to the Layer Manager.
The tick marks on the left-hand side
are colored to indicate the cumulative density
value for all layers at a given elevation.
Red tick marks indicate the elevation is too dense.
Green tick marks indicate the elevation
has appropriate density.
And white tick marks indicate the elevation is too sparse.
We can slide the bars around trying
to get rid of red tick marks.
The resulting visualization is much improved.
Data is frequently distributed nonuniformly.
For example, there are many sparse regions
in this visualization of cities in the United States.
For this reason, visualizations often
look better if they display different parts of the screen
at different levels of detail.
To do this, we break the screen into a grid.
As the user pans and zooms, VIDA dynamically
chooses graphical representations
for the objects in each grid cell
such that each grid cell contains
a user-specified density.
This density can be expressed according
to various metrics, for example, the number of objects
or the number of vertices.
In the visualization, we can see that in more densely
populated areas, only the large cities are shown.
In more sparsely populated areas in which no large cities exist,
smaller cities appear.
As another example, this visualization
shows average housing costs versus average income
in each of the United States.
The visualization can be improved by showing more detail
about the outliers.
When the user zooms in, more detail appears.
We've seen that zooming and choice of representation
are related.
In naive systems, the user independently
controls elevation and choice of representation.
In semantic zoom systems, the user
picks the elevation, which determines
the choice of representation.
We introduce a new system in which the user
picks the representation.
And the choice of representation determines the elevation.
We call this method goal-directed zoom.
We'll demonstrate a goal-directed zoom
in a visualization of Fortune 500 data.
The x-axis shows the profit growth of the company.
The y-axis shows the number of employees of the company.
When we select an object, VIDA presents
a menu of the possible representations of that object.
From the menu, we see that the least detailed representation
of a Fortune 500 company is a dot.
We also see that a more detailed representation of the company
is an icon of a general category of industry.
The object we have selected is a light industry company.
The most detailed representation is
an icon of the specific industry of the company.
The object we have selected is a chemical company.
We decide we want to see this region in maximum detail,
so we pick the icon of the chemical industry.
VIDA pans and zooms so that the chemical icon appears
in the center of the screen.