I just completed my first MOOC “Introduction to Infographics and Data Visualization” where I have learned new techniques for visualizations (see previous posts about Infographics and Data Visualization and Fusion Tables). For our capstone project, the course director, Alberto Cairo who teaches Information Graphics and Visualization at the School of Communication at the University of Miami, gave us the freedom to do whatever we want. He had us choose a topic, gather the appropriate information, and present the idea of how to show that information in graphic form, either as a static display (for print) or an interactive one (for the Web or mobile). The first assignment was to do sketches and write a short description outlining our goals and then share them in the discussion forums to get feedback from peers. We were also supposed to comment on other people’s proposals. Then, we had two weeks time to produce our infographic and post it publicly–again the assignment included to comment on the projects of our peers.

My final project
As dental educator working at the University of Pittsburgh, School of Dental Medicine, I am very interested in public health topics including access to care issues. Thus, I have selected data about dental HPSAs–these are Dental Health Professional Shortage Areas. A HPSA in the US is designated based on geographic areas, population groups, or facilities. For a geographic region to be deemed a dental HPSA, population to dental professional ratio must exceed 5,000:1 (4,000:1 in areas with unusually high need). Since 1990, the number of dentists in the United States has been roughly flat, about 150,000 to 160,000, while the population has risen about 22 percent.

Then, I was debating if I should design a static graphic that could be used as a template for an interactive graphic, or if I should rather go for an interactive one right away. I chose the latter well aware that there are shortcomings as the Google Fusion Tables are not yet ready for prime time in my view; for instance, my interactive graphic looks good on Safari and Chrome, but renders ugly on Firefox (all on Mac OS X v 10.8.2). After setting up the Fusion Table, I combined a map and a table using the provided embed code into one Web page. One can clearly see the shortcomings as you have little control over the layout of the table as you can see on the right side of my infographic; for instance, the left-right alignment of the data is apparently random with no control, and I could not find a way to determine the column width.

However, I am glad that I decided on an interactive infographic and not a static mockup as this is a useful product that I will share with fellow faculty who might be able to learn something new as it tells a story about our health care delivery system. If I had to improve it in one way, I would try to incorporate the imbalance of dentists between rural and urban areas, something which affects many people in our country, but is currently not shown in my infographic.

See the interactive version or the static screenshot in Figure 1.

As I am still enrolled in the MOOC “Introduction to Infographics and Data Visualization” I am learning new techniques for visualizations (see previous post). This week, the course director, Alberto Cairo who teaches Information Graphics and Visualization at the School of Communication at the University of Miami, had us create a data visualization using the Guardian Data Blog as a source. We downloaded the data from that a post titled “US jobless data: how has unemployment changed under Obama?” Our goal was to get some data and think about what kind of interactive graphic you could create with them.

Here my submission:
After downloading the data and uploading them to Google Drive, I watched the tutorial “Getting Started with Fusion Tables.” Then, I consulted the Google support page for further information on how to edit these tables and the resulting maps. Finally, I had to find a Fusion table with the US state boundaries which was much easier than I had expected. After merging both tables and some tweaking, I ended up with this interactive graphic. See Figure 1 for a screenshot of the graphic embedded in a larger infographic which was assembled in Photoshop. If you want to play with the interactive map, go to the public version here.

I am currently, together with more than 2,000 people, enrolled in a MOOC “Introduction to Infographics and Data Visualization.” This course is directed by Alberto Cairo who teaches Information Graphics and Visualization at the School of Communication at the University of Miami since January 2012. He holds a BA in Journalism (University of Santiago de Compostela) and a research-oriented Masters degree on Information Society Studies from the Universitat Oberta de Catalunya (Barcelona). He is author of The Functional Art: an Introduction to Information Graphics and Visualization, published by PeachPit Press, a division of Pearson Education, in August 2012. Watch the short introductory video by Alberto Cairo here.

For the third week of the course, we had to create an infographic using the Guardian Data Blog as a source. We downloaded the data from that same post which deals with the transparency of humanitarian aid agencies. The original report is here. Our goal was to think about how an interactive graphic based on those same data should look like.

Here my submission:
I found the biggest issue with the data and most presentations that it is very hard to understand the meaning. For instance, even knowing that Sweden’s response to “Does this organization publish the country strategy paper for this recipient country?” was 4 doesn’t mean much. I believe the challenge is to make the data transparent (pun intended) without forcing the viewer to spend an hour drilling into the details of the report as most of us probably did.Thus, my goal was to avoid any coding, such as “4″ for “Always publish,” but instead write it in clear text.

The big question is, and I could not avoid putting this into my infographic, does transparency translate into effectiveness. I somehow fail to see the connection and cannot refrain from wondering if the prime goal of any aid is effectiveness, i.e. helping people. But, this is obviously a question beyond the data and the visualization.

Technical note: I have produced this infographic using Adobe Photoshop CS6. I have used only vector graphics, except for the bars which I quickly made in MS-Excel, then took a screenshot and performed a Free Transform until they fit. Font is Hypatia Sans Pro. You can download the layered Photoshop file here (500 KB zip file).

I am increasingly interested in infographics to tell stories. Steven Rose published a recent article in The Atlantic about where our money goes compared with that of our parents or grandparents. The resulting data is surprising, but the real story can be best told with the embedded infographics (see Figure 1). The two infographics have been developed by Kiss Me, I’m Polish, a creative studio specializing in branding, interactive and editorial design. Their interesting work can be seen here.

The newest IOM report “Best Care at Lower Cost: The Path to Continuously Learning Health Care in America” is certainly a worthwhile reading for anybody in health care, but it also demonstrates two ways of how to make a complex topic more digestible:

First, the use of analogies:
“Consider the impact on American services if other industries routinely operated in the same manner as many aspects of health care:
- If banking were like health care, automated teller machine (ATM) transactions would take not seconds but perhaps days or longer as a result of unavailable or misplaced records.
- If home building were like health care, carpenters, electricians, and plumbers each would work with different blueprints, with very little coordination.
- If shopping were like health care, product prices would not be posted, and the price charged would vary widely within the same store, depending on the source of payment.
- If automobile manufacturing were like health care, warranties for cars that require manufacturers to pay for defects would not exist. As a result, few factories would seek to monitor and improve production line performance and product quality.
- If airline travel were like health care, each pilot would be free to design his or her own preflight safety check, or not to perform one at all.”

Second, the use of a visual representation:
Find in Figure 1 a snippet of a larger graphic providing a memorable mental picture for the complex relationships described in the 381-page report.

Everyone in academia has received hundreds or thousands of calls for submissions in his or her career. While subject matters obviously vary, they mostly display one common characteristic: confusing. The combination of different types of submissions, like posters versus papers, combined with different deadlines applicable for these submission types as well as different lengths of abstracts or papers required for their submission makes for a complex message. This message is often transmitted using lengthy explanations that are hard to digest; or using short bullet point-like fragments that are easier to read, but often lack the necessary details.

I was recently surprised to find the obvious solution to this dilemma: a visualization to help clarify the range of submission types. Dr. Jessica Tenenbaum, the Scientific Program Committee Chair for the American Medical Informatics Association 2013 Joint Summits on Translational Bioinformatics and Clinical Research Informatics (http://www.amia.org/jointsummits2013) came up with the idea. She put together the graphic in MS Visio using mostly existing “shapes” from the workflow category. She added the poster, and the podium from other sources. I hope that this visual representation of a call for submission inspires other conference organizers.

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.

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.

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.

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).

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.

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).

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.

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).
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).

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