Tag Archive for visualization

Data Visualization For Learning

While written and oral language dominate instruction, the explosion of visual information has created new opportunities to represent complexity, reveal themes, explore data, and communicate information in powerful ways. Here is an overview of some of my favorite examples of visual data representation for education.

Molecular Models

Screen Shot 2014-02-24 at 2.20.36 PM


Image from http://pymol.org/

Students cannot see individual molecules and are normally confined to shaded textbook illustrations and small plastic model building kits. Molecular modeling software represents data from crystallographic analysis of substances as 3D graphics. This allows students to more fully develop their mental concept of molecules through zoom, rotation, color, and different representations (line, spheres, mesh, etc.). Students can quickly load and manipulate dozens of different molecules (e.g., amino acids), or large molecules with interesting symmetries and structural regions (e.g., DNA, proteins).

Screen Shot 2014-02-24 at 2.21.00 PM

An alternate representation of water (http://pymol.org/)

Graphs and Charts

Most of us cannot discern patterns and trends in numerical data and instead rely on graphs to reveal them. Commonly available graphing tools have continued to improve in sophistication and integration with specific types of data sets.

GapMinder opened many eyes to the explanatory power of visually representing a huge variety of demographic data. Trends in HIV infection rates, distribution of wealth, and dozens of other data sets become visible through bubble charts. Animation makes visible trends as the data changes over time.

Screen Shot 2014-02-24 at 2.42.19 PM

HIV Epidemic 1980-2009, GapMinder

Logger Pro draws line graphs of experimental data collected from Vernier data probes. This creates nearly instant visual representations of physical phenomena as they happen.


WorldMapper displays international demographic data differently, by distorting the sizes of countries based on different demographic measures. Map mashups have taken social networks by storm in the past year, whether in the more complex form that shades states (or even counties) based on different measures or the simpler form that simply labels states with words or visuals to reflect a trend.

Screen Shot 2014-02-26 at 10.54.12 PM



The D3 JavaScript library likely represents the future of mainstream data visualization. Anyone with a command of programming fundamentals can use the library to create stunning, animated representations of custom data sets. Such animations now occur commonly in mainstream publications such as the New York Times. The D3 website contains over 200 examples with source code, which one can download and modify for personal use. The range of visualization formats is stunning, driving home the idea that a practically infinite series of graph types exists beyond the usual bar, line, and pie charts. Interactive animation allows the user to see relationships and themes within the data in a manner that goes far beyond static charts.

Screen Shot 2014-02-24 at 2.47.50 PM

Source: http://d3js.org

Word Clouds

Word clouds represent text information in a simple way, by having the word size reflect its frequency in a body of text. Its effect is very direct, albeit limited, as single words lose a lot of their meaning out of the context of phrases and paragraphs. The word clouds of all of the State of the Union addresses is an effective example of making themes in history visible through word clouds.

Screen Shot 2014-02-26 at 10.44.17 PM

2013 State Of the Union Address, ABC News

Concept Maps

Concept mapping has been around for a long time but hit its peak with the use of Inspiration software. Learning specialists have advocated concept and mind mapping for years to allow students to visually organize concepts for pre-writing as well as conceptual understanding. When paired with high quality questions and feedback, concept and mind mapping can encourage critical thinking and direct study of the relationships among concepts in a topic.


Example concept map from Inspiration.com

Earth and Space

I recently saw one of the old “Puget Sound From Space” posters hanging in a classroom.The qualification from space seems quaint now that our students can smoothly pinch and zoom satellite databases using their own phones and tablets. Thanks to Google Earth, perhaps we no longer consciously realize that most geographic and stellar imagery is a visual representation of satellite and telescope data. Radar and spectral data is combined with colorization to represent distant or very large objects as if we are viewing them with our eyes. We would also do well to remember that the objects we “see” are also only the mental representations of the patterns and qualities of light passing through our eyes and interpreted by our brains.

Screen Shot 2014-02-26 at 10.52.51 PM



3D Cell Explorer

solute pump

Today, I launch a new site, 3D Cell Explorer, a teaching tool for cell biology using visual representation. It provides 40 animations of cellular structures and processes, accompanied by audio narration. Anyone may comment on a page or copy the embed code to display animations on one’s own web site.

Many students learn best from what they can see — visual learners often struggle in science classes in which the vast majority of instruction is text-based. This site complements the textual materials an individual may already have. Text is kept to a minimum, so as to not distract from one’s attention to the visual model. Three of the animations provide a simple level of interactivity.

The site is pretty much Web 1.0 — lots of good content ready for consumption. The learning theory is primarily cognitivist. I want to help students of cell biology better comprehend basic cellular processes. Still, I did throw in a little Web 2.0 goodness. Comments are enabled on all pages, making it possible for visitors to start a dialogue about the animations. Providing the embed code allows teachers (or students) to integrate the animations into their own teaching materials, for example on a Moodle site or other CMS.

In 1994, I began to create simple 3D animations to help explain biological and chemical processes to my students. Over the following three years, I created dozens, especially on the topic of cell biology. A colleague and I decided to package the cell biology animations on a CD-ROM, but by 1997, CD-ROMs were no longer so popular. Although I did ultimately release the package, it never caught on, as teachers moved toward web-based instructional content.

In our enthusiasm to embrace Web 2.0 tools, we have left behind some of the strengths of the CD-ROM era: visual richness, simulations, interaction with content, and vast, visual libraries. I of course love the ease of distribution and social qualities of Web 2.0, but we must not discard the successful educational innovations of the past in our rush toward the future.

After a ten-year hiatus, I am pleased to re-introduce 3D Cell Explorer. Please do let me know what works and what doesn’t, and do spread the word to potentially interested teachers.

Here are some brief technical notes.

I created the original animations using Strata StudioPro and Adobe (Macromedia) Director. The project was saved by the continued support for Director by Macromedia and then Adobe. Director was the standard for authoring interactive media, but like CD-ROMs, it quietly disappeared as Flash produced smaller, faster-loading web files. I don’t know whether the new Strata3D can read my old StudioPro files. It would be good to preserve the time and effort I put into those models and animations.

To make the project more web-friendly, I exported all of the old Director files to QuickTime and then used VisualHub to make them into Flash Video (FLV) files. I kept the three interactive animations in Director format using the built-in Shockwave converter. I installed Drupal 6 for the content management platform and then built out a page for each animation. The Amadou theme gave the site a clean, modern look — I changed the background to black in order to match the animation backgrounds. I used JW FLV Media Player to deliver the Flash video files.

Ten years ago, I was amazed that an ordinary classroom teacher could access great-quality 3D animation tools. Still, it took three years of evening and weekends to produce these 40 animations. Today, I find it incredible that I could convert the entire thing to a web-based format in about two days’ time. Experiences like this provide a visceral reminder of the exponential increases in computing power over time.

Update March 31, 2008

I came across this very modern cell visualization from Harvard — quite interesting that it’s set to music.