Representing ‘No Data’ on Interactive Maps

We spend a lot of time determining the best way to represent data given to us by our clients. Whether in the user interface or on the map itself, it’s at the core of what we do. In contrast, I’ve been surprised recently by the amount of time we’ve spent thinking about how to best represent data we do NOT have. Here, I’m talking about places where data was either not collected or not reported. Needless to say, discovering empty cells in a spreadsheet is not at all uncommon, albeit frustrating at times. This is the nature of data collected in the real world. But what is the best way to represent “no data”? It only takes a single missing value to raise the question and present this rather unique design problem.

Below are a few of the ways we’ve chosen to represent ‘no data’ in recent projects when interpolation or other means of smoothing out and covering up missing values was not an option. We feel that instances of ‘no data’ are nothing to hide from or ignore. In fact, in some cases, I’d argue that representing ‘no data’ can be a good thing and actually help to tell a more complete and truthful story about a mapped phenomenon that wouldn’t otherwise be seen.

 

Proportional Point Symbols

In the Jewish Life in America project for Adam Matthew Digital (project description), we mapped immigration, education, and population data at a number of countries, states, and cities over time to show how change took place. However, not every city has data available at every time slice. For those years when cities had no data, we mapped empty proportional point circles, sized according to the last year in which recorded data was available. For example, in the figures below the map shows that around 1890 Chicago had a Jewish population of 50,000. No data is available for St. Louis for this year, but in 1850–the last year in which data was recorded–we can see there was a Jewish population of 600 people.

Jewish population in Chicago, c1890

Jewish population in St. Louis is not available at c1890. The value at the last available time slice, c1850, is given instead.

Mapping hollow circles at years with no data can be helpful in a few different ways. First, it allows comparisons to be made between every city, albeit across years in some cases. Second, it reduces the distracting “pop-corn” effect of city points appearing and disappearing with each click of the timeline. Third, it shows the spatial distribution of all cities having some jewish population across time. Finally, and perhaps most simply, it makes for a less empty-looking and data-starved map.

 

Choropleth

For the Children’s Environmental Health Initiative Interactive Map Dashboard, we mapped a range of health, demographic and program data. In the figure below, late pre-term births at the census tract level in Durham, NC are shown. Features with ‘no data’ are represented by a gray fill color, a common technique found on choropleth maps. They can be hidden from the display via a checkbox in the user interface where the number of features without data is also shown.

Tracts with no data are represented using a gray fill color. An interface control counts and hides them.

The same map, but with ‘no data’ features hidden from display.

Places with ‘unstable rates’, although not exactly instances of ‘no data’, do not have big enough sample sizes to make meaningful inferences (as well as having some privacy concerns related to the small sample). Like features with no data, unstable rates can be hidden from the map display and ignored when necessary. However, unlike ‘no data’ these places are included in the map classification and are color-coded (i.e., not grayed-out). By treating each independently, users can refine how they want to display this more empty end of the data spectrum.

The same map, but with ‘unstable rates’ hidden from the display.

Assigning the color gray to ‘no data’ might seem like an obvious and easy choice, however, we’ve had to be somewhat careful in the past. Gray tends to recede and lie lower in the visual hierarchy than other colors on the map, and from a design perspective this can be advantageous in a number of ways. At the same time, this makes it especially important that the different meanings for “gray” are clear to the end user and that it be used consistently across the map and user interface.

While working on designs for the Illinois Public Health Community Map in collaboration with IDPH and IPRO, for example, we found that multiple uses for gray would be needed. In fact, a county on the map could be assigned one of three different gray values, and it was possible that counties representing each type could appear coincidentally. They could be gray 1) because a user zoomed in to a particular sub-region of the state, 2) because a user focused data around certain percentiles with the provided histogram control, and 3) because no data was available in the database. In addition, the health data we were mapping was calculated in several ways (e.g., “Rate of discharge” and “Deviation form Statewide Benchmark”), each requiring a different map color-scheme. In the mockup below of the Western IL health region, out-of-region counties are shown in light gray, out-of-focus counties in medium gray, and a single county with no data is shown in dark gray. To be safe, we chose sequential, diverging, and bivariate color schemes that didn’t include gray so as to avoid any potential confusion.

Mockup of the Western IL health region showing out-of-region counties in light gray, out-of-focus counties in medium gray, and a single county with no data in dark gray.

Basemap

One feature of the London Low Life Map we produced for Adam Matthew Digital (project description) involves the overlay of historical maps on a modern basemap of London so that both images can be seen together using an opacity control. However, not all of the historical maps were scanned at the same resolution, meaning the extent that zooming is possible can change from map to map. As a simple means of handling maps with ‘no data’ at the higher resolutions, we disable part of the zoom widget when the handle reaches a certain point. Zoom levels that are not available for a selected map are shown, but not clickable. This is similar to what Google Maps does when switching over to terrain from the roads map, although in that case the zoom widget is shortened instead of disabled.

In this map, the zoom track is disabled to represent the limits of available base map data.

Cantabrigian Namesakes

Andy’s made a great looking map of small-multiples showing the breakdown of how streets were named in Cambridge, MA. Those of you familiar with the area will have fun trying to recognize the highlighted streets. Everyone else can marvel at how useful the small-multiple technique is at making easy comparisons across a complex dataset.

Cantabrigian Namesakes

London Low Life

This week, we’re happy to begin a 30-day preview of one of our most distinctive interactive mapping projects: The London Low Life Map. This map was produced for Adam Matthew Digital, a digital publishing company based in the UK. Adam Matthew produces digitized archives of historic primary source documents, collected around a central theme, for higher education institutions. This map was built as part of their London Low Life collection that explores the seedy underbelly of Victorian London. It examines the documents of sex, drinking, gambling, and the institutions that sprang up to combat those very vices. As the map is integrated into Adam Matthew’s collection, we will only be able to grant access to our readers for 30-days. I encourage you to explore the map and enjoy Adam Matthew’s fantastic collection of historic maps and images. Since we’ve pulled the map out of the collection, I wanted to give you some context on what is included.

View the map >>

London Low Life-2-2

Historic Basemaps

The full London Lowlife project gives users access to a mountain of primary source documents from Victorian London, so it only makes sense that we start with maps made of greater London during this era. We’ve included some metadata with each of these maps (author, date, publisher) to give historical context and placed them on top of a custom Cloudmade basemap (with adjustable opacity) to give some modern context as well.

London Low Life-3-2

Taking these historical maps from raw image to geographically accurate overlay was an incredibly intricate procedure. While some maps existed as single, contiguous images, others were scanned in their current forms as pages, separated by fraying canvas. Before we could rubbersheet the maps to OpenStreetMap data (with the help of the UW Cart Lab), we had to manually remove the seams and align the resulting image fragments to one another. Furthermore, because these maps were at different sizes and scales, we had to build a system that would identify maps with limited resolutions and restrict the zoom levels available on the fly.

standford1884.tif-1-2

It’s fascinating to view the changes in the street maps over time, especially which streets were given primary status then and now.

Tallis Streetviews

In the mid-nineteenth century, John Tallis drew detailed views of the fronts and façades of buildings along Central London’s streets. Originally designed as a “visual yellow-pages” (businesses would pay to have their shops labeled), his 88 plates now survive as a first-person perspective into the streets of Victorian London.

London Low Life-4-2

We wanted to make these plates as immersive as possible. With the help of AMD’s editorial staff, we took Tallis’ original image and added some color to sharpen the images, shadows to depth, and a blue-sky background to increase the realism of the images. Finally, the images were run through Google Sketchup to create the perspective views that place you in Victorian London and allow you to look down either side of the street.

Be sure to click the “view original” button to see the original plates to view the intricate detail surrounding the street images.

Thematic Data

While the historic basemaps and Tallis Streetviews of the London Lowlife map attempt to provide insight into the qualitative aspects of Victorian London geography, we also wanted to explore the changing character of the population through quantitative thematic mapping. Simple demographic measures like population and density can provide a major insight into the nature of a city. However, we believe the most telling indicator of life in Victorian London, and certainly true to the name “low life” ascribed to this project, is the explosion in social services that sprung up throughout the city to deal with the new urban population.

London Low Life-5-2

By dragging the timeline to view an animation of the entire century, you can watch population increase in various sections of the city and then the services emerge to try and meet the need.

Victorian London

The final section of the map gives a taste of the larger London Lowlife project by placing a selection of the primary source documents on the map. It’s an engaging way to explore city by viewing some fantastic records of the landscape and people of Victorian London.

London Low Life-6-2

Mouse over a category point on the legend list to quickly highlight all corresponding points.

View the map >>

New typographic maps of Washington DC and New York

DC and NYC typographic maps

Earlier this month we launched our new store with two new typographic maps we had been working on since last autumn: Washington, DC and New York City (Manhattan). These 24×36 inch posters, along with the existing line of cities, are now done in super sharp detail as offset prints, and all are now found at the new store.

In addition to the new cities, we also released limited edition letterpress prints of San Francisco, which managed to sell out almost immediately. We’re now looking into future letterpress editions of this and other cities.

So if you haven’t checked it out yet, have a look at our typographic maps store and all five cities for sale:

As always, thanks to everyone for all the encouragement and support we’ve received for this project!

Video Demonstration: Illinois Public Health Map

We’re very happy to be able to show-off our collaboration with the Illinois Department of Public Health and IPRO. This map makes information about the quality of health in communities available to the public, highlighting socioeconomic disparities that may exist. When combined with our indiemapper platform as well as linked graphs and charts, the clinical data in the map can be used to examine the health needs of a community, county or region for better policy and planning.

Above is a quick demonstration video showing the basic functionality. After watching the video, check-out the map itself.

Collecting Data from Non-Mapmakers

A few months back, we partnered with the UW Cart Lab to build a map for the University of Wisconsin Arboretum. We wanted to create a map that was populated with content generated by users and experts, built on top of free existing web-services, easy to maintain and great-looking. The map itself is relatively accessible so I’ll let you explore it on your own, however, I did want to talk a little bit about a major piece of functionality that is completely transparent to the end-user. First, a little background…

The University of Wisconsin Arboretum is easily the fourth best thing about living in Madison, WI after the Memorial Union Terrace, The Farmer’s Market, and being able to bike to anywhere (coming in fifth: that bonkers taxidermy museum). It’s a relatively vast piece of natural land on the near-West side of town. In just a 5-minute bike ride from downtown, you can feel like you are in the middle of the wilderness. Residents and researchers alike use the Arboretum for everything from running and biking to invasive species research, from snow-shoeing and hiking to painting and nature writing. This piece of land is very meaningful in many different ways to many different people.

Credit: University of Wisconsin Arboretum

That diversity of experience was the main challenge we faced coming into this project. There were lots of voices that wanted to be heard and have their perspective on the Arboretum reflected on the map. How do we engage these researchers, volunteers and nature enthusiasts without having to train each of them on the minutiae of collecting and preparing geographic data?

After looking around for a service that was already doing something similar, we landed on Google My Maps (since it was Google, we didn’t have to look very far). We had already planned on using Flickr to allow users to place their own photos on the map so this didn’t seem like to far of a conceptual jump. My Maps is a simple way for users to edit maps, adding vector points, lines and polygons just by drawing on a Google Map. Best of all, it outputs to KML, the format of the data already included in the map.

After adding their feature and attribute data to My Maps, all the user would need to do is send the URL of the KML file to the map administrator and it would be added to the map. Done? Nope. This is where things get cool.

While the input methods for Google My Maps are fantastically easy and well done, the symbology needed some work to fit in with our map. We didn’t want to have to sacrifice our cartography just for ease of input. We wanted to have full control over the colors and the point icons used by this incoming data.

Changing point styles is relatively simple. We built the map to use a lengthy XML file that the map administrator at the Arboretum uses to configure the map. Through this file, the administrator has a large amount of control over the data included in the map and can change it to instantly meet the Arboretum’s needs. It allows the admin to specify:

  1. The location and title of each layer
  2. Where the layers appear within the categories of the map
  3. What control users have over the layers (which show up in the legend, which start visible, which remain on)
  4. The available basemaps for each category
  5. All text content in the map
  6. If a layer’s feature contains photos or a slideshow
  7. Which layers are grouped into map animations and their corresponding date

The last thing the admin can do, is override the default point style by defining the URL to a PNG stored on the server. This icon will replace the default Google pushpin. We’ve designed a few of the default icons currently shown but with a little Photoshop work, any image can be used as a point symbol.

arbMap_icons.jpg 1150×900 pixels

Changing the stroke and fill color of a line or area symbol was a little trickier. Google offers a choice of 70 different colors for use on My Maps. Not every single one of those colors is going to look good on our basemaps, displayed with the other layers. To solve this, we created a color compatibility chart. Every single color on the Google My Maps selection corresponds to a color deemed compatible with our map. When a My Maps KML is loaded into the map, it automatically adjusts the colors based on the chart below. It is not a 1:1 relationship, as we’ve had to limit our palette to less than 70 colors. However, it gives the user the expected control over color and makes the finished product more visually pleasing.

myMapsArbMapColors

 

This solution is not 100% perfect and there were some sacrifices that had to be made to get this compatibility. Firstly, the data-model we used for each feature was limited. Google allows just one name and one description per feature. This eliminated the possibility of doing quantitative mapping and classification on the fly. (For data created outside of Google My Maps, we enabled categorical mapping using standard KML styles and including the name of the category as the name of the style).

Secondly, KML is not known for its friendly file sizes and the data used in this map is HUGE. We’ve tried to optimize it as much as possible but have resorted to inserting loading screens with informational content about the Arboretum to make those download times seem much shorter.

Hopefully this gives you a clear picture of what’s going on behind the scenes of the Arboretum map. The flexibility we’ve given to the map administrator to configure the map as well as the power we’ve given to the stakeholders to add their own data was new for us at the time, but is something we’ve continued to add to our more recent projects, albeit to a lesser degree. The UW Arboretum map still feels young and in its infancy. The map is a “living document” of the UW Arboretum. As more Arboretum volunteers and researchers get involved and add their considerable expertise to the map, we’re looking forward to watching it grow and change in the future.

San Francisco Typographic Map

HOORAY! The San Francisco typographic map is finally finished and is ready for purchase today. I made a big push to get this map ready for the holidays (with some help from Andy and Ben) and we’re really happy with the way this turned out. More images.

I went a bit overboard and decided to map the *entire* city; The amount of fine detail in this map is pretty astonishing. To fit the entire city onto a poster, of course, means the type itself has to be much smaller to fit it all in. In fact, the street text is half the size of the Chicago map (6 pt surface streets versus 12 pt) so there’s lots of detail for your eyes to enjoy.

GO BIG: Given the crazy density of streets I strongly recommend you get one in poster size (23×34 or up) so you can best see all of the parks, water features, and twisty streets the city is famous for.

WHAT’S THIS ABOUT LETTERPRESS?! Great news, we’ll be offering limited edition, gorgeous letterpress prints on rich cotton paper in the first half of 2011. While we love Zazzle (their prints rock), many of you asked (and begged!) for us to do these as hand-made, limited edition art prints and we thought that was a great idea. Want to be the first to know when they go on sale? Go here.

WHAT’S NEXT? We have New York City (Andy) and Washington DC (Ben) coming up shortly. They look sweet.

Death’s Door Spirits: Mapping Wisconsin’s Finest Craft Distillery

I only have a few rules in life. One of them is when the makers of this gin offer you a straight-up trade–bottles for maps–you take it… and you don’t cut your partners in on the deal. That was the situation when a friend-of-a-friend approached me to build this simple locator Google maps mashup which I took on as a side-project away from my normal Axis Maps work.

fuck_me

Death’s Door Spirits is a craft distillery based out of Washington Island, WI and distilled in Madison, WI. They use locally-sourced ingredients for their gin, vodka, and whisky which they distill in small batches. While their small-scale makes their products excellent, it also makes them tricky to locate. The purpose of the map is to simply show where you can buy bottles or cocktails containing their spirits.

Since the map was so straightforward, it gave me the opportunity to experiment with a few new technologies I’ve been meaning to check out. Here’s what I thought…

Death_s Door Spirits Locator

Styled Google Maps: Death’s Door has a fantastic graphic identity thanks to some great work by Grip Design (who also contributed some designs to this map). I wanted the map to fit in with their existing style while stripping out a lot of the extra Google Maps data that would clutter up a map like this. Google Maps Styled Map API allowed me to do both. The styled map wizard was helpful for sketching out styles but mostly I was making whole groups of features invisible and going with stock colors for the roads and water. Not being able to input RGB values for these styles made the process harder than it should have been.

Amazon SimpleDB / CloudFusion: I’ve been a big fan of Amazon’s SimpleDB technology since we used at as the foundation for indiemapper user management. I’ve found it to be more reliable than MySQL and faster as well (but that could just be our budget hosting plan). It was a little unapproachable to me at first but the CloudFusion PHP library made it as easy–if not easier–to query the database and parse the results for the map. The biggest missing feature here is a nice front-end browser like PHPMyAdmin which would have allowed the client to edit their data directly. Instead, I had to build some rudimentary tools so they could manage their data themselves.

Google Font Directory: It was nice to have access to a wider variety of fonts than just the standard web-safe font-family sets. The Google Font Directory gave me access to a limited but FREE selection of a nice variety of fonts distributed across Google’s massive network. Most useful was Yanone Kaffeesatz which is a dead ringer for the Death’s Door title font. The fonts can be a lot to load at runtime so it was important to pare down only to the fonts I was using in the map.

Death_s Door Spirits Locator-1

jQuery Ajax / jQueryUI: Made it incredibly easy for someone with my level of programming skill (let’s call it “recreational” to be polite) to efficiently get the data into the map and build some nice UI effects like animation and the accordion component. I can’t recommend it highly enough so there’s going to be no italics section with the caveats in it.

You can view the full map here …and if you’ve got any good cocktail recipes, that’s what the comments are for.

Death’s Door Spirits Locator