Visualmotive Blog

Munsell Color Space. Image created with POV-Ray, CC license via Wikimedia Commons

Choosing colors for maps, charts, and infographics can be a difficult task. Standard software packages like Excel and Matlab have tended to offer substandard color schemes (though this is getting better) so it’s up to the designer to learn about color and apply the appropriate techniques.

This post will focus on color schemes for maps. There are several types to consider:

• Sequential – good for quantitative variables.
• Divergent – good for quantitative variables with an obvious midpoint (e.g. zero) and two divergent tails.
• Qualitative – good for categorical variables.

Given a sequential, non-divergent color scheme, Cynthia Brewer and Mark Harrower (of ColorBrewer fame) note:

Lightness steps dominate the look of these schemes, usually with light colours for low data values and dark colours for high values. ‘Dark equals more’ is a standard cartographic convention. Sequential schemes can be either single hue (e.g. same blue, with different lightness and saturation levels) or multi-hued (e.g. light yellow through dark green).

Background

It’s important first to remember that computer displays and common digital color formats (like RGB) only show a subset of all visible color. It’s also good to be aware of some common color spaces: RGB, HSV, and YIQ.

RGB identifies color by red, green, and blue components. HSV uses hue (angle on the color wheel), saturation (intensity of color), and value (amount of black). YIQ is used for NTSC television signals. It has a black/white component plus two chromatic components; the black/white Y component is what is visible on a black and white television.

Much experimentation has been done on how people perceive colors. Assuming colors are at equal saturation. “Value perception dominates color perception.” (Bertin, p 87) Images generated earlier on this blog tested color sorting across every variation of RGB, HSV, YIQ color spaces and confirm Bertin’s assessment.

Bertin writes, “The saturated tone is not of constant value but varies in value according to the hue.” This makes sense. For example, yellow at 100% saturation is much brighter than blue at 100% saturation. If yellow and blue are to be used in the same color scheme, we will need to compensate for the perceived brightness of the yellow by decreasing its value.

Munsell Color System

Enter Albert H. Munsell. In the early 1900’s he undertook a lot of research to understand exactly how it is people perceive color. The resulting Munsell Color System is a three-axis system that doesn’t conform to any standard spherical/cubic geometric model.

Munsell Color System diagram. CC license via Wikimedia Commons.

The central axis indicates the perceived value (darkness/lightness) of the color. The angular values indicate hue, and length out from the axis is chroma (intensity).

When choosing colors for maps and other diagrams that utilize a linear, quantitative scale, the Munsell color system would be a good place to start. ColorBrewer has great color schemes for maps, and all of them have proven perceptual merit. ColorBrewer is a great resource and I have used it in many projects. The only real issue with ColorBrewer is that it contains so few color schemes. Sometimes a designer wants to be able to match the brand, identity, or theme of a larger project while maintaining the integrity of the diagram’s visual communication. Working with the Munsell system should allow just that.

Looking forward

We have not tested this yet, but one could choose a particular hue + chroma in the Munsell system as a starting point, and work up and down the axis to find related colors that vary on perceived value. Additionally, one could move in a diagonal fashion, moving up in value while also moving an angular increment around the axis. This would theoretically accomplish the multi-hued sequential schemes that Harrower and Brewer describe in their paper on ColorBrewer (quoted above).

Potential Munsell color schemes compared with schemes from ColorBrewer

References

Jacques Bertin, Semiology of Graphics. Translated 1983 by William J. Berg, originally published in 1967.

Mark Harrower and Cynthia Brewer, Colorbrewer.org: An Online Tool for Selecting Colour Schemes for Maps. The Cartographic Journal, Vol 40, No 1, pp 27-37. June 2003. [PDF]

Munsell Color System, on Wikipedia. Associated images at Wikimedia Commons: POV-Ray render and the color system diagram.

Bruce MacEvoy, Modern Color Models. 2005.

Cartographer.js screenshots: choropleth, area-scaled circles, and pie charts

Thematic maps describe statistical data about places. They come in many flavors: color-coded regions, area-scaled circles, pie charts, flow charts, heatmaps, and so on. By aligning statistical data to a geographic anchor, the underlying data can be made easier to understand.

The problem

It is difficult to build thematic maps for the web using standard HTML and Javascript. In the few maps that do exist, developers are re-creating basic thematic elements or using sub-standard visualization techniques. In particular, “red dot fever”—the ubiquitous red pushpins on Google Maps.

Our solution

Cartographer.js, a simple library for Google Maps that simplifies the development process and provides instant access to proven visualization techniques. Developers are freed from worrying about how to tweak the Google Maps API to build the thematic elements they need, and can focus on more important problems like data collection and normalization. Cartographer.js supports custom styling so it can integrate seamlessly into existing web applications.

Why HTML + Javascript?

Cartographer.js is built to leverage cutting-edge web technologies. Other formats, like Flash or Processing (Java Applet), are not supported on many mobile devices, and many developers are already familiar with HTML + JS. Also, many recent advances in the power and speed of Javascript (cf. V8) make it more desirable to build rich web applications in pure HTML + JS. We feel there is a very strong future for this set of technologies.

How do I use it?

Cartographer.js is a simple one-line include. It relies on the excellent Raphael.js vector-graphics library. Cartographer.js is currently in an early-stage Alpha release.

You can find out more by visiting the Cartographer.js website, where you can download the script, see examples, and read through the documentation.

Your feedback is greatly appreciated!

The Ebstorfer mappamundi, map of the Christian World in the 13th century overlaid with an image of Christ. (click for high resolution)

The Ebstorf mappamundi was drawn in 13th century Saxony and depicts the Christian worldview within the body of a crucified Christ. The map illustrates both the “known world” as well as significant landmarks and points of interest for the curious pilgrim.

Christ’s head is in the East, at the top of the map, the direction of Paradise. His hands mark the northern and southern limits of the known world, and his feet are at Gibraltar where the Mediterranean meets the Atlantic. In the middle of the map we see Jerusalem, the spiritual center of Christendom, located at Christ’s navel. Europe is in the bottom left quadrant of the map, Africa in the bottom right, and Asia dominates the upper half.

In the East, near Christ’s head, is the Garden of Eden surrounded by mountains. Just west are the Chinese (note the two figures bent to gather silk) and the Indians. In the Indus Valley we see opium eaters, people who stare at the sun all day (gymnosophists), as well as that strange tribe who subsists only on the scent of apples. Alexander the Great is consulting the Oracle of the Sun and the Moon.

Details from the Ebstorfer Mappamundi. Left: Places in India, including Alexander the Great consulting the Oracle, the Opium Eaters in their poppy field, and a gymnosophist staring at the sun. Right: Mt. Sinai (oriented sideways), and Sodom and Gommorah covered by the Dead Sea.

At the center of the map, near the all-important Jersulaem, we can find the Tower of Babel, Bethlehem (marked with the Star of David), Sodom and Gomorrah, and Mt. Sinai.

Africa and northern Asia both are hinterlands illustrated with mythical creatures and legends. In Africa, a tribe of dwarfs rides crocodiles. In Asia, two Amazonian women guard their citadel.

Maps such as this may explain much of the surprise 15th and 16th century explorers felt as they sailed to the Americas and around the Cape of Good Hope. Africa was much bigger than this map indicates, and the invisible Americas were very much in the way of a direct sea route to India. We know that the ancient Greeks had discovered that the world was round, and circa 1400 AD Ptolemy had produced an accurate map of Europe and Asia based on a spherical Earth. But the Ebstorf map follows the Roman tradition of placing landmarks in relative positions, maintaining basic order and structure but not following rules for measurements or Cartesian accuracy. And the T-O structure of this map—the base of the T was the Mediterranean, the cross was at Jersualem; the O formed the surrounding oceans—was an idealized depiction of the world that was all too common in the late medieval era.

Despite its shortcomings as a navigational aid, the Ebstorf mappamundi is a beautiful map. It is both a sacred object glorifying the Body of Christ and also a tourist map of the strange and wonderful places that formed the background of medieval storytelling.

References:

• Art and Cartography by David Woodward
• The Ebstorf Mappamundi by J. Siebold

Markets are People, published 1930 by Printer's Ink

“Markets are People” is a beautifully drawn map. It uses area-distortion to show population at both the state and city level. This is the first map we have seen that uses the area-distortion method at two resolutions. The effect is visually accurate, highly readable, and offers deeper insight into the data than similar maps that offer only one level of detail. (For comparison, look at modern cartograms on Wikipedia.)

Notice how easy it is, for example, to estimate the percentage of urban population in any given state: Illinois is about 50% urban. Relative sizes of cities are also easy to estimate.

This map was found in Graphic Presentation, published in 1939 by Willard C. Brinton, p. 242. The caption under the map reads:

Printer’s Ink Publishing Co., Inc. Chart by Walter P. Burns and Associates, Inc. New York City.

A Distorted Map of the United States Showing Population of Each State and Cities of 50,000 or More in 1930.

The presentation of cities whose areas are proportional to their population is the outstanding feature of this map.

The entirety of Graphic Presentation is worth exploring. It covers a full range of topics from color theory to line graphs and “quantitative cartoons”. The book is out of print, but we found a wonderful leather-bound copy at the university library. A PDF of the full text is also available.

Thanks to Datavisualization.ch and Flowing Data for pointing us to this book.

We built a tool to map your Twitter followers. It’s called Tweemap.
Read the rest of this entry »

The visual components of a subway map make it a great metaphor for grouping and linking ideas or things across many different conceptual realms. We’ve collected here ten excellent examples of the subway map metaphor.

1. Milky Way

The Milky Way Transit Authority shows the spiral of the galaxy, with major constellations and nebula appearing as transit stations. Perhaps unsuitable for navigating an FTL-enabled spacecraft, but it serves well for orienting terrestrial astronomers.

The Milky Way Galaxy

Read the rest of this entry »

London trains and metro map, 1874

Jonathan Stott’s thesis Automatic Layout of Metro Maps Using Multicriteria Optimisation (PDF) is a comprehensive look at the state-of-the-art of automatic transit map generation. The premise: start with a geographic map of subway or transit stations and lines, then convert this map into an abstract yet informative representation of the transit system akin to those standard transit maps found in the world’s major cities. My aim in this post will be to provide a brief summary of Stott’s thesis.

Aesthetics of the transit map

Transit maps have existed for centuries. From their genesis, these maps have expressed a tendency towards simplicity—perhaps encouraging customers to visions of quick and simple travel in an age when trains and ferries were still novelties and their complexity not yet understood. The 1874 London trains map removes much of the city clutter for the sake of a simple, almost playful, representation of rail lines and stations (see above). Read the rest of this entry »

Web Trends Startpage shows websites as if they were the Tokyo subway

Following up on our earlier post about the Tokyo subway map, the Information Architects Web Trends Startpage is a clever mashup of the subway map metaphor with the standard start-page. Authors of this map have manually categorized and located some of the web’s most popular sites into color-coded lines and stations. Especially interesting is the “inner loop” of sites that represent the authors’ favorite sites.

We could compare this site to other start pages such as My Yahoo! or iGoogle, or the built-in thumbnail views provided by Google Chrome and Safari 4. Against these competitors, the IA Startpage wins points for the sheer quantity of sites it can display in one screen, and its memorable composition makes muscle-memory point-and-click painless. On the other hand, the IA Startpage is probably not useful on a daily basis for most people, since it is tailored specifically to the needs of its creators.

On the whole we greatly appreciate this artistic portrait of the web and its attempt to bring order to a chaotic landscape. IA provides an interactive version of this map with clickable links, and also has PDF and hi-res JPEG formats available for download, and a poster version of the map is for sale.

There exist a number of subway-map algorithms that have the potential capacity to translate a arbitrary graph structure—such as the web—into a visual map. Maybe the next iterations of this map will include such algorithms, allowing users to generate custom maps of their personal stomping grounds.

note: XKCD has also published a map of the web focused on online communities.

Tokyo subway map

The very elegant Tokyo subway map. Cities are inherently complex, and transit-map publishers face a dizzying set of challenges if they wish to produce a readable but accurate representation of a transit system. The designers of this map deserve particular credit for organizing and clarifying what is necessarily a sprawling collection of subway lines and stations.

At the heart of this map is the Imperial Palace. The inherent structure of the subway system lends itself well to this concentric arrangement, since the tracks themselves circle the palace, but I would also suppose that we could read into this a set of cultural and political assumptions about the importance of this central place and its inhabitants.

This map correlates strongly to how we think of the city. Much research has suggested that human minds think of locations as landmarks, and relationships between locations as simple paths that lack traditional metrics of Euclidean distance or travel time. By translating the magnitude and centrality of the Palace-as-landmark into an appropriate visual representation, we can immediately understand our place on the map as it relates to our understanding of real-world space.

More information, including maps from Osaka and Seoul.