VisualizationFor Novices

( Ted Hall )

University of Michigan 3D LabDigital Media Commons, Library

http://um3d.dc.umich.edu

Data VisualizationData visualization deals with communicating information about an existing data set through a visual medium.

Goals of Data Visualization○ Take advantage of the brain’s ability to efficiently process visuals. A

high volume of information can often be easily understood through an image.

○ We want the viewer to learn something about the data that could not be easily understood by reading the raw data.

○ Visual is presented in a simple manner. Don’t overload the viewer with many unnecessary details.

Design and PrototypingVisualization of an idea that has a real world visual representation.

Goals of Design and Prototyping○ See how a design will look, without the need to build an expensive real

world model.○ When coupled with an immersive

display, we can get a feel for the real world size and spacing of an environment or design.

○ Examples: ● Architecture (Yost arena)● Engineering (Fairy boat)

Conceptual VisualizationVisualization of an idea that has no real world visual representation.

Goals of Conceptual VisualizationTransform an idea without a clear visual representation into a visual representation.

Teach the viewer the concept through visuals instead of text.

GraphsGoal is to communicate the relationships among the data efficiently.

Common Types of Graphs:○ Simple graphs:

● Bar graphs, scatter plot, pie chart, etc.○ Network graphs:

● Show relationships between nodes.○ Chord graphs:

● View the frequency of relationships. For example, in a survey it may answer how often two particular selections are chosen together.

3D Modeling/CADA 3D model can be described as a geometric surface defined by a set of polygons.

More simply a 3D model is a virtual object existing in a virtual environment.

The buildings, furniture, vehicles, and characters within the environment are all 3D models.

3D Modeling/CADCommon Applications

Architectural Design & Engineering:Experience the look and feel of a building or vehicle before it is built. Perfect opportunity to avoid mistakes in spacing and scale.

Conceptual (atomic physics, astrophysics, …):View and experience the very small, the very large, or something that can’t be seen at all in the real world.

3D Modeling/CADHow are 3D models created?○ Typically a 3D model is created by an experienced artist or CAD

designer using a 3D modeling package. (See the 3D modeling and animation track)

○ A real world object can be turned into a virtual model using 3D scanning technology. (See the 3D scanning track)

○ A 3D model can be generated procedurally with computer code. This is typically done for simple shapes (spheres, cubes, cones, etc…). More interesting objects can be created using fractals.

NOTE: The visualization track focuses on what to do with a 3D model once you have one. It does not focus on how to create a 3D model.

Volumetric Visualization3D models are great, but what if we want to peel away the surface of an object and see what’s inside?

This is exactly what volumetric visualization attempts to achieve.

Volumetric VisualizationCommon Applications:Medical Imaging:● MRI (magnetic resonance imaging) technology collects data on the

body in layers. This allows medical professionals to “see” inside of the body without invasive cutting.

Density Fields:● View a scalar field covering a 3D

volume. This could be temperature, air flow speed, etc.

Volumetric VisualizationHow is Volumetric Data Represented?There are many standard formats for volumetric data, but at the core volumetric data is typically represented as a stack of 2D images.

Each image represents one layer of data. A single layer can be thought of as a slice through the original volume.

Ultimately, a 3D volume is constructed from the image stack using a technique called interpolation.

G.I.S. VisualizationG.I.S. stands for geographic information systems.G.I.S. is a specialized for visualizing data that relates some information to a location on a map. Positions are typically represented by longitude, latitude, and elevation and often are meant to coincide with exact locations on the earth.

Common Applications:Distributions within a specific area (income, family size, etc.)

Layout of Terrain (roads, elevation, trees, waterways, etc.)

Visualization DataData collected for visualization can come in many different forms. Data may come from a survey, sensors, web mining, social media, etc.

When deciding to visualize collected data we need to first understand the format and structure of the data.

Visualization software typically requires data to be cleaned and reformatted into a specific data format. Different visualization techniques typically require different formats.

Visualization DataDimensionsWe can often talk about the dimensions of the data. This is not necessarily about 2D versus 3D positional information, but about the number of orthogonal axes. There can be one or more dimensions to our data.

If we think about putting the data into a table format, then each column would represent a different data dimension.

Each dimension needs to be represented by a new concept in our visualization. We can cover 2 or 3 dimensions with position, but further dimensions will need to be represented by something else, such as color.

AestheticsCore Elements of Visualization:Shape:It is common on maps to use shapes to signify locations of key landmarks. Shapes can often be used in place of text to make processing a visual more efficient.

Scale:Many times scale can be used to visualize a quantity. Large elements correspond to large amounts and small elements to small amounts. Bar graphs and pie charts are a simple example of a visualization using this concept.

AestheticsCore Elements of Visualization:

Location:Often we want to visualize some information as it relates to a location (GIS, volumetric). In this case location information is a core piece of the data. In other cases location can be used to differentiate elements.

Color ChoicesBest if colors contrast so they are easily distinguishable. Colors should contrast in saturation or lightness as well as hue.

Hue:The underlying color.

Saturation:The “purity” of the color. Colors with low saturation are closer to grey.

Lightness/Value:How “bright” the color is.

Color ChoicesWhat about black and white?When dealing with grayscale visualizations we only have lightness available. In this case, we can use contrast in lightness to distinguish elements.

Convert an image to black and white by desaturating. Check that the image is still readable. This can expose problems with color choice.

For example, fully saturated colors are indistinguishable in black and white and should therefore be avoided.

Detail ConsiderationsIn general, visualizations should strive to only include the minimum amount of detail needed to process the information.

In many cases, a visualization can present a high level overview of the data and then interactivity can be used to allow the user to drill down into the details.

As an example, a chord graph uses scale to show which combinations show up most often. If the user is interested in the exact number of a particular combination, then we could choose to display the number only when the user hovers over the relevant piece.

2D vs. 3D VisualizationAdvantages of 3D

In graphing, 3D can untangle the graph. We have an entire new dimension to place nodes.

In volumetric rendering, 3D gives us the context of the entire object that is difficult to see when only looking at images.

Environment visualization naturally fits in 3D.

2D vs. 3D VisualizationWhat about 2D?

Despite the advantages of 3D, we need to think about if our visualization would really benefit from 3D.

Does it overcomplicate the visualization? Consider a bar graph in 3D vs. 2D.

Does the 3D graph provide more information to the viewer, or does it just look different?

Visualization on the WebWebGL:Brings interactive 3D computer graphics to the web. Requires HTML5 compatible browser.

Examples: Paleontology Viewer https://umorf.ummp.lsa.umich.edu/wp/vertebrate-2/mammutidae

d3.js:Javascript library for implementing interactive graphs.

Examples: https://github.com/mbostock/d3/wiki/Gallery

3D Stereo EffectHow is it achieved?

The 3D stereo effect is achieved by displaying a unique perspective of the environment to each eye. In other words, each eye sees a different image.

When both our eyes see the environment from slightly different perspectives it activates our depth perception, which creates the illusion of 3D.

3D Stereo EffectBut how do we deliver separate images to each eye?

That’s where the 3D glasses come in. Typically the display will display both images, it’s the responsibility of the glasses to allow each eye to only see the image it’s supposed to see.

It’s actually possible to deliver a unique image to each eye without using glasses. See the Nintendo 3DS.

3D Stereo EffectThere are two main types of 3D stereo displays in use today.

Passive:The display emits light that is polarized differently for the left and right images. Polarizing filters in the glasses only allow light with the proper polarization to be viewed.

Active:The display flickers between the left and right images. The glasses are synchronized to the system so when they block the right eye when the left image is displayed and block the left eye when the right image is displayed.

Head Mounted DisplayA head mounted display is simply a headset worn by the user that contains the display.

Advantages:○ Immerses the user in the environment

and covers all possible viewing directions.○ Typically tracks at least the user’s head

rotation and updates the perspective accordingly. Newer devices may include translational tracking as well.

Example: Oculus Rift

Immersive DisplaysImmersive displays allow the user to experience an environment at life size and give a strong illusion that the user is actually in the environment.

Advantages:○ Perspective is updated based on the

user’s head position. This creates a much stronger 3D effect than what one experiences at the movies.

○ The immersion allows the user to completely experience the design. It is very useful for getting a feel for the size and spacing of the environment.

Example: M.I.D.E.N (Michigan Immersive Digital Experience Nexus)

Visualization ResourcesThe University of Michigan Library should be your first stop for visualization support on campus.

Resources include:○ M.I.D.E.N.○ 3D Stereo Wall○ Oculus Rift○ Visualization Software○ Tile Display○ And more …

Remember, these resources are available to everyone.

Get Your Badgehttp://mblem.umich.edu

UM3D Lab

University of Michigan 3D LabDigital Media Commons, Library

http://um3d.dc.umich.edu