Data Visualization

Problem

People increasingly need to combine map-based information (e.g., a point or polygon on a map) with other non-visual data on an interactive web-based map to quickly visually understand relationships between pieces of information and enable insights in areas not previously noted. Add to this the problem of displaying how that same data changes over time.

Solution

Display map-able (e.g., geographic) data together with the non-visual pieces of information on a web-based browser making full use of color, pushpins, animations, etc. according to application-specific factors including density, distribution, importance or immediacy of data to allow for focused drill-down and jumpstart analysis. Introduce spatial dimensions to show how data has changed over time.

Context

  • Pieces of information cannot be displayed on a map because of its non-geographical nature.
  • The relation between pieces of information adds additional value to understand each piece of information.
  • The spatio-temporal dimension where spatial data is displayed in the context of time add enormous amount of information.

Rationale

Representing pieces of information on a map using zoom-able (and customizable) mapping tools such as Bing Maps allows visualizing the information by highlighting relevant factors. Various map-able elements can be combined to provide information: geographical boundaries such as countries, states/provinces, cities, postal codes, sales regions, etc. along with data distribution sets (e.g., sales figures, products sold, etc.).

Highlighting certain geographical elements that contain the most important information will allow people to naturally focus on them. They should be the elements you want people to notice, for instance opacity and color and clustering of data points (pushpins). Using tooltips, legends, color schemes or images to provide additional hints can be very efficient.

Pushpins of varying types, shapes, opacities, and colors would visibly communicate relevancy of points of interest (POI). These pushpins could be disguised “buttons” on the map; that is, they animate when the mouse hovers over them possibly providing a tool-tip-like menu with links to allow obtaining further information. Clusters of pushpins can be displayed grouped such that the individual data points don’t overwhelm the user (nor impact the performance of the application) by using varying grouping schemes according to a drill-down (e.g., zoom level) approach.

Displaying this data with a time dimension is a secondary but quite effective means of communicating information. Provide a means to specify a data window timeframe (start/end date). Use of slider controls or other effective means of communicating the further filtering or honing in on the data makes it intuitive depending on the context.

Implementation

The objective of a map is to help people find what they are looking for by using all elements of the map: space, time, POI, summarized data.

Spatial aspects should be considered first since the space dimension will have a primary scope in these types of applications and can be powerful in simple situations when one has to convey the idea of location.

Too many POI on the same screen have a negative impact on legibility and the ability to quickly display a web page. If too many POI have to be displayed, the following approaches can be used. The most efficient approach is to display all POI on the Map but to have the map zoomed in to a level that will minimize the number displayed; people have then to pan and navigate through the map to find the regions they're looking for. In this case, zooming back out will perform the clustering of points displayed.

POI can convey information in several ways: size and color are powerful media to show importance or categorize. Text or images can be added to provide information about each point, if used concisely. Too many can prevent good legibility.

Time controls are the last aspect of the map (and only used when time-based visualizations are required). Even though slider controls are best since they provide and start/end time that will be used for filtering, an alternative would be to use separate date/time entry boxes. If the application calls for multiple time-based filters, these should be limited since adding too many can be confusing and unintuitive and will impact the conciseness of the what the user sees and has to interpret.

Examples

The primary example is IDV Solutions demo Retail Analyzer application which uses SharePoint and their flagship product Visual Fusion. The web page beautifully integrates a Bing Map web-part with highly customizable map-viewer feeds which serve as a filter (and they’re part of the legend) to the data displayed. Data feeds that were set up for the demo below include proprietary retail locations and customer data along with US County demographic data (which can be obtained from a variety of public sources). Note the presence of the Year slider control allowing the data displayed to be further limited to the time window selected.

http://quince.infragistics.com/1mk3

Example of the Data Visualization UX Pattern Example of the Data Visualization UX Pattern

A second and very prominent example of the data visualization technology is Microsoft’s Silverlight website. It’s a little tricky to find as you need to go to the Show Case page and then click on the View Map button. This example uses a combination of data visualization aspects mentioned in this pattern such as visual cues, concentric circles, colors, time slider, clusters of POI, etc.

http://quince.infragistics.com/1mk4

Example of the Data Visualization UX Pattern Example of the Data Visualization UX Pattern

This example is Verizon’s Family Locator which is a simple map control embedded in a web page with push pins displaying saved locations of family members whereabouts. Note that the user can add to the map public locations (partially shown below) such as Schools, Emergency Services, Entertainment, etc. Clicking on the Locate button (shown below as Unavailable) allows the user to quickly zoom in to find the exact location of a person (actually, usually a person’s cell phone).

http://quince.infragistics.com/1mk5

Example of the Data Visualization UX Pattern Example of the Data Visualization UX Pattern

Tags

Data Visualization, Map, Spatio-Temporal.

Sources

IDV Solutions, www.idvsolutions.com

Microsoft, www.silverlight.net

Verizon Wireless, www.verizonwireless.com