Presentation

We will take some quality time to review—and give feedback—for the following assignments which have been submitted so far:

  • Gallery Pages, Version 2

Showing Complex Data

Information graphics communicate knowledge visually rather than verbally. When done well, they let people use their eyes and minds to draw their own conclusions.

They show, rather than tell.

Information graphics simply means data presented visually, with the goal of imparting knowledge to the user.

This data presentation includes:

  • maps
  • tables
  • graphs
  • tree views
  • flowcharts
  • bar plots
  • diagrams of real-world objects

Because we are using computers rather than paper, we can allow users to choose how they view the data using interactivity. Rather than simply being a passive observer, a user can choose how to view the data by rearranging or showing/hiding elements.

As the designer, you need to understand what the user needs to learn from the material. Can he or she find something very specific within the data in a short amount of time? Which act would be more effective for this use: searching or browsing? Is the “big picture” the point of the process, with a few details thrown in for clarity, or are the details themselves the end goal?

Understanding the User’s Interaction with Your Data

Users don’t want to spend a lot of time learning your methods. Good interactive information graphics quickly offer users answers to these questions:

  • How is this data organized?
  • What’s related to what?
  • How can I explore this data?
  • Can I rearrange this data to see it differently?
  • How can I see only the data that I need?
  • What are the specific data values?

Design Patterns

There are many design patterns for dealing with complex data. Here is just a sample.

Overview Plus Detail

Place an overview of the graphic next to a zoomed “detail view.” As the user drags a viewport around the overview, show that part of the graphic in the detail view.

Overview Plus Detail Pattern on Amazon.com

Overview Plus Detail Pattern on Amazon.com

Overview Plus Detail Pattern on Washington Post

Overview Plus Detail Pattern on Washington Post

Datatips

As the mouse rolls over a point of interest on the graphic, put the data values for that point into a tool tip or some other floating window.

Datatips on Google Maps

Datatips on Google Maps

Datatips on Washington Post

Datatips on Washington Post

Data Spotlight

As the mouse rolls over an area of interest on the graphic, highlight that slice of data and dim the rest.

Data Spotlight on crimespotting.org

Data Spotlight on crimespotting.org

Data Spotlight on Washington Post

Data Spotlight on Washington Post

Dynamic Queries

Provide ways to filter the data set immediately and interactively. Employ easy-to-use standard controls, such as sliders and checkboxes, to define which slices or layers of the data set get shown. As the user adjusts those controls, show the results immediately on the data display.

Dynamic Query on Google.com

Dynamic Query on Google.com

Dynamic Query on Zillow.com

Dynamic Query on Zillow.com

Local Zooming

Show all the data in a single dense page, with small-scale data items. Wherever the mouse goes, distort the page to make those data items large and readable. Unlike Overview Plus Detail, the zoomed in image lies right on top of the larger data set.

Local Zoom on Cartifact

Local Zoom on Cartifact

Local Zoom on Bing Images

Local Zoom on Bing Images

Sortable Table

Show the data in a table, and let the user sort the table rows according to the cell values in a selected column.

Sortable Table on eBaycccc

Sortable Table on eBay

Multi-Y Graph

Stack multiple graph lines in one panel; let them all share the same x-axis.

Multi-Y Graph on MailChimp

Multi-Y Graph on MailChimp

Multi-Y Graph on Google Analytics

Multi-Y Graph on Google Analytics

Small Multiples

Create many small pictures of the data using two or three data dimensions. Tile them on the page according to one or two additional data dimensions, either in a single comic strip sequence or in a 2D matrix.

Small Multiples on andrewgelman.com

Small Multiples on andrewgelman.com

Treemap

Express multidimensional and/or hierarchical data as rectangles of various sizes. You can nest those rectangles to show the hierarchy, and color or label them to show additional variables.

Tree Map on  on Washington Post

Tree Map on Washington Post

Tree Map on Market Watch

Tree Map on Market Watch

Many More

More design patterns for complex visual data can be found at patternbrowser.org.

Calendars

Calendars of Events contain complex data, and are handled many different ways on various sites. Here are a few I found. Some are more beautiful and engaging than others.

Calendar Widget by Google Calendar at SacKids.org

Calendar Widget by Google Calendar at SacKids.org

Calendar Widget by Google Calendar at Sacramento Sidetracks

Calendar Widget by Google Calendar at Sacramento Sidetracks

Calendar of Events of Crocker Art

Calendar of Events of Crocker Art

Calendar of Events at Schultz Museum

Calendar of Events at Schultz Museum

Calendar of Events at Creation Museum

Calendar of Events at Creation Museum

Calendar of Events at de Young Museum

Calendar of Events at de Young Museum

Calendar of Events at Computer History Museum

Calendar of Events at Computer History Museum

Calendar of Events at Fowler Museum at UCLA

Calendar of Events at Fowler Museum at UCLA