Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Data Visualization - Overview

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

There are many types of data visualizations that can be used within applications; only a few examples of the most frequently used variations are shown in the Design Pattern Library. Some types include:

  • Column & Bar Charts
  • Line Charts
  • Pie & Doughnut Charts
  • Zoom & Scroll Charts
  • Combination Charts
  • Bubble Charts
  • Pareto Charts
  • Marimekko Charts
  • Funnel Charts
  • Scatter Charts

Why

Presenting pieces of information employing interactions and drill down into data allows visualizing the information by highlighting relevant factors. Highlighting certain elements that contain the most important information will allow people to naturally focus on them. These should be the elements you want the user to notice, using opacity or color, and the clustering of data points. Using tooltips, legends, color schemes or images to provide additional hints can be very effective.

Pushpins of varying types, shapes, opacities, and colors would visibly communicate relevancy of points of interest (POI). These pushpins could essentially function as "buttons"; 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.

How

Dynamic data visualizations often make use of libraries containing a variety of components that can be bound to data. Examples of such data visualization frameworks (which include many types of data visualization options) include: