Visualmotive Blog

Walk or Bus? iPhone app

Our popular Walk or Bus chart is now an iPhone application.

The app allows you to enter a travel distance as well as the time until the next bus, and the application will estimate whether you could travel faster by walking or by waiting for the bus. All our estimates can be tweaked to match your walking speed, your city’s average block size, and bus speeds.

We’re asking $0.99 to cover the cost of development. Learn more by checking out Walk or Bus on the Apple iTunes store, and enjoy!

I have had several requests for the Color Sorting code I used to create these images. The pixel-based color sorting uses linear and Hilbert sorting techniques in RGB, YIQ, and HSV color spaces.

So now, ColorSorting is now on Github.

The code is not polished, so use at your own risk. Enjoy!

The process of writing comics

What follows are notes and quotations from Scott McCloud’s excellent book Understanding Comics. The book describes the art of comic books, but most of the lessons are also applicable to other types visual communication like charts and maps.

Definition: “Comics are juxtaposed pictorial and other images in a deliberate sequence, intended to convey information and/or produce an aesthetic response in the viewer.”

Comics use iconic images: sparse representations of reality. Used to allow the reader to inject himself/herself into the narrative.

McCloud's triangle of communication types. Photographs on the left, written word on the right, abstract icons on top.

Most comics are along the bottom axis of the triangle (above), but there are examples of comics that fill the whole space.

Comics allow people to identify with roles and characters. “People in the 20th century don’t want goals, they want roles,” by McLuhan (1970?).

Closure: observing the parts, but perceiving the whole. Like seeing a character’s torso and knowing he has feet. For example: videos are a rapid sequence of stills, or rich color photos that are a bunch of little dots (like newspaper prints or Roy Lichtenstein).

The gutter: space between panels where the imagination works.

Visual icons are vocabulary, closure is the grammar.

Types of transitions:

1. Moment to moment (same character and scene)
2. Action to Action (single subject)
3. Subject to Subject (same scene)
4. Scene to scene (different characters and scenes)
5. Aspect to aspect (different aspects of a place or idea)
6. Non-sequitur (no relationships whatsoever)

How time works: divided panel by panel:

• Panel shape influences perception. Longer panels seem to occupy more time.
• Timelessness: long, lingering time. Usually borderless panels or those that bleed off the edge.
• Passage of time can be shown with “zip ribbons” (swish of motion).

How lines influence communication:

• Different types of lines can have different emotional and sensational qualities: passive and timeless, proud, dynamic, severe, gentle, etc.
• Subjective motion (subject is static, looks like the background is moving)

When thinking about the interplay between words and images in comics, there are several Word + Image combinations to consider:

• Word specific (words are dominant)
• Picture specific (pictures are dominant)
• Duo-specific (both words and pictures convey the same meaning)
• Additive (words add significant meaning)
• Parallel (words and pictures tell different but parallel stories)
• Montage (words are integral to the picture)
• Interdependent (both work together to tell a story neither could tell alone)

Process of creating comics (see image at the top of this post):

1. Idea/Purpose
2. Form
3. Idiom/style
4. Structure
5. Craft
6. Surface

What about Color? Color symbolizes certain characters (eg. Batman is always blue-gray). Flat colors emphasize the shape of an object (Herge’s TinTin comics used all flat colors) to promote a democracy of form in which no shape is any more important than any other.

——————————–

Those are my notes. If this sounds interesting to you I highly recommend reading the entirety of Understanding Comics. It’s delightfully crafted and a pleasure to read. Also, Scott McCloud writes on Twitter and on his 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.

A few quick notes regarding the latest release of Cartographer.js.

• Cartographer has an official Twitter channel. Follow @cartographerjs for updates.
• The latest version has full support for Internet Explorer (tested in IE 6+).
• The latest version also sports substantial speed improvements and should be easier to extend in the future.

Thanks to everyone on Twitter and on the Google Code page for the great feedback so far!

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!

Should you walk or take the bus?

It is intuitive that when you have a short distance to travel it is always faster to walk than wait around for a bus. But exactly how long should you wait? We decided to do some calculations to find out.

Click here to see Walk or Bus? and discover for yourself how long you should be willing to wait for a bus.

If you remember this rule of thumb you ought to get along just fine:

If you have N blocks to travel, you should only wait for the bus if it is less than N minutes away.

Of course, if you have a bike, you should probably use that instead.

Feel free to leave your questions or comments.

Link: Walk or Bus?

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.

Color sorting using RGB, HSV, and YIQ color spaces

We recently needed to sort the pixels in an image by their color. On first attempt, we sorted by simple RGB values: first sort on R, then on G, then B. But it turns out there are many other possibilities for sorting colors. Every permutation of the RGB letters could be considered (RBG, GBR, GRB, etc.), not to mention other color systems HSV and YIQ.

To see all the color sorting possibilities, we wrote a Python script to try every permutation against a common set of source images.  Click here to see every color sorting option. Note that we use a Hilbert curve in the top set of images to provide better grouping of similar color values. The bottom set of images is linear and wrapped: left to right, then top to bottom.

Our goal was to find a sorting mechanism that looked pleasing to the eye, but of course the results are completely subjective.

• For aesthetics, we prefer the YIQ sort. It highlights trends in value change, but information about hue variation is hidden and sometimes invisible.
• To communicate more information about hues, HSV sorting is by far superior, but it lacks the pleasant gradient-effect of the YIQ sort.
• RGB sorting proves inferior to HSV and YIQ, though the results can still be interesting.

Also worth noting: HSV sort is excellent for grouping colors of similar hues, but the IYQ and YIQ sorts also do this well and they can look cleaner than their HSV counterpart.

(with thanks to Steve Witham for his Hilbert curves in Python.)