Using Transparency to Visualize Information Density

This posts explains how to use transparency to visualize information density. When visualizing geocoded data points on a map, for example, it’s common to plot each location with a marker. When many data points are located in the same geographical area, the markers drawn later will overlay the markers drawn earlier. When the markers are opaque, it’s difficult to tell at a glance how many data points are located in each region. The following example shows geocoded tweets authored about the Boston marathon.

Transparent map markers

In this example, it’s clear that the tweets follow the marathon’s route. However, it’s not clear where the greatest concentrations of tweeters are. Zooming into the map is one way to move the markers apart to reveal the markers underneath. However, this requires an extra interaction that can be avoided with transparency.

When map markers are drawn in a transparent color, the accumulation of pixels in the same map region increases the density of the marker color in that region. The viewer can see at a glance that areas with a deeper shade of color represent more data points. The following example shows the same data drawn with transparency. The concentrations of tweeters are now clearly visible.

Opaque map markers

Using transparency is a very simple technique that involves adding the alpha channel to the color. In the RGB color model, each color is described with three components: red, green and blue. In the RGBA color model, a fourth component, alpha, is added that controls the transparency of the color formed by the values of the red, green and blue components.

The following example shows a Google map with a set of circular overlays centered on points of latitude and longitude. Although some circles have greater area than others, by drawing the circles in a transparent color, the circles beneath other circles are not obscured and the overlapping pixels build up the color density.

Transparent map markers

To add transparency to Google map overlays, simply set the fillOpacity property for the overlay. The value of the fillOpacity property ranges from 0 to 1, where 0 is fully transparent (i.e. invisible) and 1 is fully opaque.

The following code snippet shows how to create a red circular Google maps overlay with 35% opacity. The fillColor property value of #FF0000 sets the color of the circle to red. The fillOpacity property value of 0.35 sets the opacity to 35%.

// Create a new circular Google Maps overlay
circle = new google.maps.Circle({
  center: latLng,
  radius: radius,
  strokeOpacity: 0.5,
  strokeWeight: 1,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map: map,
});

Although 35% is a low opacity value, each circle must have a low opacity value to create the density effect when the pixels of one circle are drawn on top another circle.

blog comments powered by Disqus