Rotary Maps powering the Thumbtack realtime dashboard

Cross-posted from the Thumbtack engineering blog. I recently released an open-source mapping toolkit called Rotary Maps that helps you make realtime maps on top of Google Maps v2 or v3. It also supports making maps in a simple DOM element if you don’t care for Google Maps. Check out the full post at the Thumbtack engineering blog.

Telephone calls and regional connections in Great Britain

These maps are fascinating.

Have you ever wondered why state or county or city boundaries are drawn where they are? It turns out that administrative and government boundaries are consistent with trends in human relationships; that is, people associate most with others in the same government-defined region.

To investigate the geography of human relationships, a group of researchers has mapped human relationships in Great Britain using telephone calls as a proxy for intensity of relationship. Specifically, Ratti, et al. used total call time (scaled so as to take into account local population densities) as an indication of relationship between two people.

Quoting:

… we would indeed expect an agreement between the administrative boundaries and those found from human interaction, as they probably evolved together, over many centuries of mutual interplay—cohesive patterns within society promoting change in administrative boundaries and the latter, in turn, affecting human interaction.

The research was done by Carlo Ratti, Stanislav Sobolevsky, Francesco Calabrese, Clio Andris, Jonathan Reades, Mauro Martino, Rob Claxton, and Steven H. Strogatz. More information can be found here: Redrawing the Map of Great Britain from a Network of Human Interactions.

Map of California County Populations produced with Cartographer.js

The most recent release of Cartographer.js supports county-level choropleth maps. This was the number one requested feature for Cartographer and I am delighted to finally be able to offer it in an official package. Many thanks to Ben Cohen and Xanthippe Wedel for making this a reality. The image above is a snapshot of the California county populations map.

Counties are drawn using the same efficient polygon encoding as states, and they can be easily referenced by name. All color schemes and other choropleth map features work for counties just as they worked for states. Click here to download Cartographer.js v0.4 with full county support.

Some additional notes about this release:

• Loading all US counties into a Google Maps is quite a challenge, and it’s recommended that you only use Cartographer’s county mapping facility for a few states at a time unless you wish to stall out older browsers. Google Chrome handles the large datasets gracefully, if slowly.
• Adding counties increases the filesize of Cartographer.js significantly. If you don’t need counties, feel free to use an older version for now, and this should be fixed in an upcoming release.

Enjoy!

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.

We built a tool to map your Twitter followers. It’s called Tweemap.

It is still a little rough around the edges, but the service is very functional. Tweemap shows up to 10,000 followers for any given user. The Google Maps Javascript API provides core mapping utilities, and the Twittervision API was used for geocoding.

How it works

The main problem we encounter building Javascript maps is performance. Javascript is getting faster and better all the time, but compared to a desktop mapping solution, or even to Flash, it is quite slow and requires a delicate touch. Our approach was to use a series of aggregation techniques to group similar data points and thereby limit the amount of rendering required by the browser.

When geolocating Twitter users, we group them based on latitude/longitude coordinates. These point groups (PGroups) definitely contribute to efficiency. For example, we are able all users—potentially hundreds or thousands—in a major cities as an individual entity. PGroups are fed into a larger point collection (PCollection) class, which manages the groups and renders graphics onto the map.

At each zoom level, the PCollection builds a uniform grid across the surface of the map. Grid cells maintain a constant pixel width and represent a “square” of lat/lon coordinates. Each PGroup that is visible within the current map viewport—any not within the viewport is temporarily discarded—is placed into its corresponding grid cell. The grid is passed to the PCollection’s render() method, which creates and places circles on the map to represent the total count of followers in that cell. If the map is moved, the grid is extended in the appropriate directions, and PGroups are likewise placed into the new sections of the grid. By merely extending the grid, rather than recreating it, we can cache any existing icons and save a full redraw cycle, while at the same time preventing the map from going temporarily blank.

Icons are scaled against other icons in the viewport, so smaller icons become larger when they are the only icons in view. We also cap the max icon size so that circles don’t become so cluttered as to make the map unreadable.

We had considered using CloudMade’s custom map tiles for this map, but having run into several issues with their map style editor, we resorted to Google and its powerful API. One thing we didn’t like about Google’s maps is that at higher zoom levels it became very difficult to see our circles against the backdrop of Google’s imagery. To solve this problem, we created a new Google Maps layer that sits atop the standard layers to darken the map and make our icons visible. This new map layer is quite dumb, for every tile it serves a static PNG with limited transparency. This kind of layer can be created as follows:

var modLayer = new GTileLayer( new GCopyrightCollection(""), 0, 15 );
modLayer.getTileUrl = function( tile, zoom ) {
    return image_root + "mod.png"; // a darkened, semi-transparent PNG
}
modLayer.isPng = function() { return true; }

// group the new "darkened" layer with the terrain map
var layerTerMod = [ G_PHYSICAL_MAP.getTileLayers()[0], modLayer ];
var mtTerMod = new GMapType( layerTerMod, G_PHYSICAL_MAP.getProjection(), "Dark" );

// add the darkened map type to the map
map.addMapType( mtTerMod );
map.setMapType( mtTerMod );

We have not compressed the Javascript source for this project with the hope that it might be useful to someone else. Feel free to dig around.

Now, have a look at Tweemap.

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

2. People

We are surprised to see Leonardo da Vinci at the intersection of the Comedians and Italian Artists lines in Simon Patteron’s otherwise wonderful Great Bear map of famous people.

Famous People

3. Music

Different genres of music are represented by different transit lines in Dorian Lynskey’s map, with bands and musicians appearing as transit stations. Björk is well-placed at the intersection of Pop, British Folk, Jazz, and Avant-garde. (thanks to Paul Lamere)

Musicians

4. Publishing Trends

In this map of publishing trends, Soybits diagrams the connections of people, formats, and products involved in the publishing industry. The Kindle, iPhone, and Android platforms form major intersections.

Publishing Trends

5. O’Reilly Books on Open Source

The O’Reilly books are known for covering a wide range of technologies and programming languages. This map diagrams the relationships among books on open-source technology.

O'Reilly books about open-source technologies

6. Web trends

As we mentioned in an earlier post, this subway map of the web by Information Architects is a fascinating exploration of popular Internet sites.

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

7. CMS Vendors

CMSWatch has published a diagram of popular content management technologies.

Content technology vendors

8. Subway map of world subway maps

Penguin’s book on Transit Maps of the World features a map of subway systems around the world. While the connections between cities seem somewhat arbitrary, we appreciate the style and spirit of this map.

Transit map of world transit maps

9. Cancer pathways

From Jonathan Stott’s thesis, Automatic Layout of Transit Maps, which we discussed previously.

Visualizing cancer pathways (Hahn and Weisberg, designed by Claudia Bentley)

10. Project plan

From Jonathan Stott’s thesis, Automatic Layout of Transit Maps, which we discussed previously.

Project plan

Bonus: Gotham City

Gotham City Rail has published their transit map. Wayne Central is, as expected, at the heart of the city.

Gotham City transit map

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.

Map and timeline from the Feltron 2008 Annual Report

The Feltron Annual Reports are brilliant personal visualizations that describe, one year at a time, the life of Nicholas Felton. He uses an elegant combination of textual manipulation, charts, and diagrams to convey interesting and sometimes trivial facts about his life.

We learn that the subway fees are 93 cents on the mile, compared with 536 cents/mile spent at the gym (unclear whether this is on a treadmill, elliptical, or stationary bike). Bradford Cox, Radiohead, and Daedalus fill out most of the “music heard” pie chart. A set of flags clipped to map sections show us unique locations, and below the maps, a timeline correlates personal life events with global and national affairs.

Annual reports dating back to 2005 are available at feltron.com.

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.