Infographics For The Rest Of Us

Abhijeet Chavan's picture
Staff

An introduction to free tools for creating interactive information graphics.

As professionals shaping the built and natural environment, we have to process and communicate complicated concepts and data to peers and the public. We often use visuals such as maps, charts, graphs, and diagrams to illustrate a concept or explore data.  Such visual representations are called information graphics or infographics.

[Also see Part 2 -- YouTube For Your Data: Many Eyes on Obama & McCain

Creating effective infographics is both an art and a science. A good information graphic needs to be both beautiful and accurate. Creating innovative infographics  has typically been the realm of experts -- those with the requisite design talents and expertise with sophisticated software.  Now a new breed of web-based tools have emerged, making it easier for the rest of us  to quickly create interesting visuals. (This is similar to how Google Maps and Google Earth have brought elementary mapping and geographic data exploration within the reach of anyone with access to the internet.)

These web-based tools for generating infographics are limited and specific in what they can do. Yes, you can use these tools to create graphics that can be included in reports, presentations, and websites. But they allow us to do something more significant. These web-based tools bring interactivity to infographics. They generate visuals in unconventional formats, enabling us to expand our visual toolset  beyond that of the common bar charts and staid diagrams that we see and use so often. And, as an added benefit, some of these tools follow Web 2.0 principles, facilitating collaboration and encouraging information sharing.  

Here are some free tools that I find both interesting and useful. 

Timelines


A graphical timeline is a visual representation of a chronology of events. Web-based timelines offer some advantages that timelines on paper cannot. The ability to interact with the timeline, change the time scale, "zoom" & "scroll" the timeline, or link to other information on the web can increase the communication power of a timeline. You don't have to be a skilled web developer to build a interactive timeline.  Dipity is a free web-based tool that allows you to create timelines, add events, pull in or link to  information from other sources, add images, and more. (You need to sign up for a free account.)

To test it out I started a timeline of the life of Frederick Law Olmsted, considered to be the father of American landscape architecture.  Referring to his biography on Wikipedia, I picked out a few events and started adding them to a new timeline on Dipity.

Frederick Law Olmsted timeline.

When you add an event to a timeline, in addition to the title, date, and description of the event, it is possible to upload a picture, link to a webpage, or add a location.  

 Add event

Dipity presents the uploaded images as a slideshow or a "flipbook".

 Flipbook

Location information is presented on a map.

 Map

Visit the interactive timeline I created.  It's incomplete. I was planning to add in most of Olmsted's projects. But he had a prolific career and adding events to a timeline takes time.  You don't have to build a timeline alone though. In true Web 2.0 tradition, Dipity makes it possible to collaborate with others on a timeline. Invite editors or open it up so that anyone can edit it.

It is also possible to automatically generate a timeline based on a data source. If you use Web 2.0 services such as Flickr, Picasa, Blogger, Wordpress, YouTube, or Twitter,  you can generate a timeline based on your data at those websites.  Or grab any RSS feed and generate a timeline from it.  I created a live timeline of 5+ magnitude earthquakes by specifying the source of the timeline to be the appropriate RSS feed from USGS.  Since the feed includes images and location information, Dipity creates a flipbook showing the location of the earthquakes and displays the location on an interactive Google map. Create it once and Dipity will keep the timeline updated.

You can capture images from the timeline for use in other documents. Or you can embed the timeline itself on your own website.

It is so easy to generate a timeline using a data source that I couldn't resist the urge to create another one.  Here is a timeline of recent blog posts on Planetizen Interchange.  Does this post appear there?

[Web developers might be interested in MIT's Simile Timeline project. It is now part of Google's web widgets collection.]


Sparklines

The line chart is a common format used to show numeric data. A line chart can be easily created using spreadsheet software. Usually this is a large graphic. Information graphics expert Edward Tufte --- The New York Times called him the "da Vinci of Data" --  proposed an alternative for situations where a more compact, condensed visual format is more appropriate. He coined the name sparkline for the format and described it as an "intense, simple, word-sized, graphic".  Here is what a sparkline looks like:

Sparkline

By itself, it doesn't convey much. That is because a sparkline is meant to be presented alongside numbers and/or  text. For example, here is a table from the U.S. Energy Information Administration showing the energy profile of the United States:

 U.S. Energy Profile

Note how much information is conveyed in a small space and how multiple sparklines make it possible to compare different trends.

The Wikipedia page on sparklines links to resources for creating sparklines including add-ons for spreadsheet software. The one I found easiest to use is the free web-based parkline generator at BitWorking. All you need is some numerical data to chart separated by commas.

For example here is some data:

1,2,1,0,3,1,0,1,1,2,0,1,0,0,1,2,3,2,5,3

Plugging this information into the sparline generator results in:

Sparkline line   or  Sparkline bar or   Sparkline mark depending on the format you choose.  

Include the code in your webpage or capture the image to include in your documents. That's all there is to it.  The difficult part is deciding where and how to use there. If you use sparklines in your own work and find them effective, send me some examples.

Mind Maps

According to Wikipedia:
A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged radially around a central key word or idea. It is used to generate, visualize, structure, and classify ideas, and as an aid in study, organization, problem solving, decision making, and writing.
While a finished mind map is useful, the exercise of creating a mind map might be even more valuable. So a mind mapping tool needs to be flexible and not come in the way of the diagramming process. I find that pen and paper or a whiteboard are actually the best tools for mind mapping. But we are talking about digital tools here. Besides, if you want to include the finished mind map in your presentation or document you need something looks more professional.

My favorite digital tool for mind mapping is Freemind, an open source desktop application that runs on Linux, Mac OSX, or Windows computers. Since it is a desktop application, it is not necessary to be online to use it. So you can use it for brainstoring at meetings or outlining some ideas on a flight. I will use it here to create an example of a mind map.

The Open Directory Project (ODP) is the web's largest human edited directory. It is maintained by volunteers. It has a section on urban planning with a heirarchy of topics and links. Using Freemind, I created a mind map of the heirarchy used by ODP.

Mindmap of Open Directory Project section on Urban Planning

(Larger version)

Is this how you would organize a directory about urban planning?

There are several other web-based tools  you can used to create mind maps and other diagrams. Try mind42.com, Mindomo, MindMeister, and Gliffy.

If you come across examples of effective infographics used in urban planning and related fields, let me know at chavan at planetizen dot com.


Abhijeet Chavan is co-founder and co-editor-in-chief of Planetizen.

Comments

building block set

NEW! Build the world you want to see

Irresistible block set for adults when placed on a coffee table or desk, and great fun for kids.
$25
Red necktie with map of Boston

For dads and grads: tie one on to celebrate your city!

Choose from over 20 styles imprinted with detailed city or transit maps.
$44.95

Essential Readings in Urban Planning

Planning on taking the AICP* Exam? Register for Planetizen's AICP * Exam Preparation Course to save $25.
Currently on backorder

Stay thirsty, urbanists

These sturdy water bottles are eco-friendly and perfect for urbanists on the go.
$19.00