Show The Data

Moving Charts

Heiko — Thu, 12 Apr 2012 13:35:22 +0000

When doing anything online, we increasingly experience that video seems to be the new Web. This trend is not only expressed in the rise of YouTube popularity in the mainstream, but also by the widespread use of video–think lecture recording, Khan Academy and open course initiatives–in education and science. So, I was looking for examples of using video for data visualization. Needless to say there are many fancy (and mostly useless) animations of otherwise boring data. But, one example from NIH is inspiring: NIH “explored the increase in average age of new investigators. While that average age has remained relatively constant over the past ten years, we are seeing something different in our entire pool of principal investigators (PIs).” Watch 46 second video on YouTube and see for yourself that the “moving chart” visualization is more effective than any combination of static approaches could ever be. The whole article can be found on NIH’s Website.

BioImages 2011 Awards

Heiko — Tue, 20 Mar 2012 09:03:09 +0000

As member of the BioCommunications Association, I am always thrilled to check out the winners of BioImages–an annual visual media competition that showcases the finest still, graphics and motion media work in the life sciences and medicine. These images are judged by their impact, clarity, scientific content, technique, lighting, image quality, presentation, creativity, originality and effective use of the medium to fulfill its purpose. Find the BioImages 2011 Awards here. I am specially impressed by the image “Molecular Probes for Diagnostic Imaging” by Fabian de Kok-Mercado, Battelle Memorial Institute, Ellicott City, MD.

Workflow Diagram for JMIR Paper

Heiko — Mon, 05 Mar 2012 10:21:51 +0000

For a recent Natural Language Processing paper, I have created a workflow diagram showcasing how the data was processed. The paper was published in the Journal for Medical Internet Research: Bekhuis T, Kreinacke M, Spallek H, Song M, O’Donnell JA. Using Natural Language Processing to Enable In-depth Analysis of Clinical Messages Posted to an Internet Mailing List: A Feasibility Study. J Med Internet Res 2011;13(4):e98 doi: 10.2196/jmir.1799 PMID: 22112583.
The actual workflow includes a sequence of machine-based steps and human classification of NLP-discovered phrases and is freely accessible as “Figure 1. Workflow for finding clinically relevant messages posted to an Internet mailing list.” The co-authors provided input on various iterations, starting with paper drawings, until we finally arrived at the version which has been published. All elements were created in Photoshop using vector graphics providing the option for high resolution export.

Screenshots for Publications

Heiko — Sat, 25 Feb 2012 10:19:25 +0000

For a peer-reviewed publication which will appear in print as well as digitally, we need to show part of a user interface. While it is easy to create a screenshot, the problem you run into is that publishers often specify that you need to submit 300 dpi resolution figures. As screen resolutions are all 72 dpi this leaves you either with a tiny (unreadable) figure or with a zoomed-in one which looks blurry (see Figure 1 below).

Figure 1: Screenshot of User Interface (zoomed in and blurry)

The alternative requires a bit more work, but results in a much better outcome: In this example, I have recreated the user interface in Photoshop as vector graphic which allows me to derive an image file of any resolution. Compare the end-result (Figure 2) with the initial attempt using a regular screenshot. I will briefly explain how I have created the particular screen elements.

Figure 2: Exported user interface (recreated in Photoshop)

There is no need to explain how to create the actual text layers and the gray box I believe, but the drop-down menu (aka select box) requires several steps and a total of 4 layers to make it look realistic. First, we need a white box with a bevel. Select as foreground color white, select the Rectangular Tool (U) from the tool palette and then select Shape layers in the options palette (see Figure 3).

Figure 3: Shape layers option selected

Draw a rectangular shape layer which you can change in size at any time. Then, you need to add a layer style using the “fx” symbol at the bottom of the layers palette. Select Bevel and Emboss and use the settings in Figure 4.

Figure 4: White select box with bevel.

Note that the Bevel is “Up.”
Then, select as foreground color a light gray (RGB 211:211:211) and add another rectangular shape as button for the select option and add again a layer style (see Figure 5).

Figure 5: Gray select box button with bevel.

Note that the Bevel is “Down.”
Now, you add the little downwards-pointing black arrow by selecting black as foreground color and change to the Polygon Tool. Note that you will have to change the default sides from 5 to 3 sides. After adding the actual text layer (pick a san serif font) with your select option, you have a total of 4 layers for the user interface control (see Figure 6).

Figure 6: Layers palette after completion

This technique can easily be modified for check boxes and other user interface control.

Data Visualization in the Humanities at Stanford University

Heiko — Wed, 18 Jan 2012 18:55:24 +0000

From Adobe: “Join Stanford University’s Geoff McGhee for a discussion of “data storytelling,” best practices for data visualization, and using visual interfaces to explore large data sets. McGhee — who produced multimedia and infographics for The New York Times, Le Monde, and ABC News — now helps Stanford scholars develop new tools and techniques for exploring and sharing research.”
Free Seminar: Thursday, January 26: 10–11 a.m. PST; 1–2 p.m. EST

Steve Jobs’ product launch presentations visualized

Heiko — Sat, 03 Dec 2011 11:34:32 +0000

“You have the power to change the world” is the main theme of Nancy Duarte’s talk at TEDx East–an inspiring speech about how to carry a message through presentation techniques to a broader audience. Nancy has analyzed the structure of “presentations” (I put this in quotation marks as she refers to many stories, talks and speeches which we would normally not call a presentation.). For instance, she found structure in stories, such as 1. likeable hero, 2. encounters roadblock, 3. emerges transforms. One of her other ideas is the importance of presenting “What is” intersected with “What could be” which was masterfully applied by Steve Jobs during his product launches. Starting at around 9 min she visualizes Jobs’ original iPhone launch by charting his presentation for the use of video, his marveling about the new product, the star moments, the use of external speakers, personal stories as well as the use “What is” and “What could be.”
Nancy’s talk on Vimeo (18 min)

Free, Open-Source Data Visualization Web Widgets

Heiko — Fri, 03 Jun 2011 09:16:09 +0000

Massachusetts Institute of Technology (MIT) developed as the part of their Simile project open-source web widgets for data visualizations. The Simile project “focused on developing robust, open source tools that empower users to access, manage, visualize and reuse digital assets.” [Simile] . Check out Timeline which visualizes temporal information on an interactive drag-able timeline; Exhibit which creates web pages with support for sorting, filtering, and rich visualizations by writing only HTML; Timeplot which plots time series and overlay temporal events over them; and Runway which displays images in a Coverflow-like visualization and is in my view probably the least useful one.

Looking at Science Cities

Heiko — Tue, 22 Mar 2011 23:52:06 +0000

Nature published a special package titled “Looking at the Best Cities for Science” by Richard Van Noorden showcasing interactive graphics. The analysis which is provided by Elsevier shows how absolute counts of publications per city and relative citation impact have changed from 2000 to 2008. The chart is animated with a slider at the bottom to fast forward in time. You can click on individual cities and drag the time slider to compare their changing output over time. Notable is Pittsburgh’s surge in research output.

Gallup maps the health in America

Heiko — Sun, 06 Mar 2011 12:16:39 +0000

Published on March 5th in the NYT: “For the last three years, Gallup has called 1,000 randomly selected American adults each day and asked them about indicators of their quality of life. Responses are converted to the Gallup-Healthways Well-Being Index. Here are the 2010 results, sorted by Congressional districts.” The map is nicely done with features like zooming and switching between different criteria. While the direction of the legend is always the same (dark for better), it needs a bit of getting used to as the same color represents all criteria ranging from obesity to nighttime safety.
See yourself: NYT map.

Molecular Animations

Heiko — Sat, 27 Nov 2010 15:02:35 +0000

I have read a very interesting article titled “Where Cinema and Biology Meet” in the New York Times published on November 15, 2010 by Erik Olsen. It showcases Dr. Lue who is one of the pioneers of molecular animation, “a rapidly growing field that seeks to bring the power of cinema to biology.” The visualizations are stunning, like the series of images from an animation depicting how proteins move across the endoplasmic reticulum membrane. I was especially intrigued by the “Powering the Cell: Mitochondria” which can be found on the NYT Website as well as on the Harvard Website. “I think visualization is going to be the key to the future,” Dr. McGill said.
More about visualizations can be found at the BioCommunications Association which is an international professional association of people working in the biological communications field.