Azavea Atlas

Maps, geography and the web

The Geographic Context of #MediaInContext

Closing ceremony of the inaugural Canvas hackathon. Photo credit Al Jazeera PR.

Closing ceremony of the inaugural Canvas hackathon. Photo credit Al Jazeera PR.

If you don’t know me personally, you probably don’t know that Azavea and I were involved in the planning for the recent Canvas media innovation hackathon convened this November by Al Jazeera in Doha, Qatar, themed around “Media in Context.” The organizing credit is due to Al Jazeera Innovation and Research – a new group that began this year at Al Jazeera that is focusing on media and technology innovation – which is why we’ve been quiet about the event ourselves. Al Jazeera brought on SecondMuse, our partner, for operational support and we have been collaborating together on the event since this summer.

At the end of the day, Azavea is a geospatial civic software development firm, not an international news agency like Al Jazeera or a collaboration strategy and hackathon organizing company like SecondMuse. Still, civic hackathons are useful and complementary to our technology work and community-building efforts in the civic tech field, so we’ve developed some experience in running them over the past few years – often in parallel with SecondMuse. They were one of the sponsors for Hacks for Democracy, one of Azavea’s first large public hackathons. Also, SecondMuse and Azavea sat side-by-side in organizing the Philadelphia-local (us) and global (them) components of last year’s International Space Apps Challenge. Until now though, our firms had never worked as full partners on an event, despite each of us having a major presence in Philadelphia and similar focuses in civic and social impact technology. So I was glad to contribute some of Azavea’s expertise to this effort as a partner.

Though many have lauded #MediaInContext as a successful event now that it’s complete, including our nearly 100 participants, mentors, and judges, the fact is the organizing team pulled the bulk of this large event off in just a hair under 3 months! This level of success was not a foregone conclusion back when we started in September.

Lots and lots of participants and many other commentators have already written about most of the solutions that were developed at Canvas and other aspects of the event. SecondMuse has also written its own blog about the event. We’re geography nerds at Azavea though, so for my “reporting” I wanted to dive deeper into the geographic context of Al Jazeera’s Media in Context hackathon!

Hackers of Arabia

2013 International Space Apps Challenge locations map

2013 International Space Apps Challenge locations map

It’s hard to believe how far the humble “civic hackathon” has come in the past few years. In 2011, when I was writing my undergraduate thesis on the open government movement and decided to include a chapter on civic hackathons, it was hard to even find solid examples and sources for my research. Only 3 years later, Azavea’s been concretely involved in more civic hackathons just around Philadelphia than I could have found proof of existence of anywhere in the country back then.

However, the rise of our civic hacking community in these years has not been universal, geographically speaking. North America, South America, Europe, and even pockets of Asia and Africa each have solid communities of civic technologists, but as evidenced by the map above of the 2013 Space Apps hackathon locations, there are large swathes of the world where the civic hacking wave has yet to crest. The Middle East and North Africa region (MENA) is one such area, which made this Al Jazeera hackathon all the more exciting. Journalism and civic hacking can both help promote participatory democracies and engaged communities – it would be thrilling to see more of each of these things in every part of the world.

Around the World in 80 Hacks

The Media in Context hackathon was unique not only because it was happening in a part of the world where hackathons are uncommon, but also because we were bringing the world to the hackathon. The application process was global, and we received over 1,400 applications from talented journalists, data storytellers, and civic hackers all over the world. Our final set of 85 participants that were selected and were able to attend the event represented 37 countries and traveled from every inhabited continent on Earth.

This also may be one of the only hackathons where substantial jetlag may have impacted each team’s competitive advantage. Our furthest-traveled participants flew to Qatar all the way from Mexico City, over 14,000 kilometers!

(999 Less Than) 1001 Arabian Nights of Hacking

Within the span of a few hours on Saturday morning, November 29th, these 85 participants debated, discussed, and whiteboarded their way through 12 example challenges as well as a 13th participant-submitted challenge, finally coalescing into 19 hackathon teams ranging from 3-7 people. Coming from Azavea, one of my personal favorite challenges was #4: Mapping an Understanding. Many news outlets already employ web maps in their reporting, but the use of GIS and spatial analysis tools to tell journalism stories has tremendous potential that has yet to be fully explored in my opinion. So I was excited to see what teams came up with in response to this challenge.

Two teams took on this challenge, MapCake and MapFour, and came up with completely different tools. Approaching from the “Consumption” phase of media, MapFour sought to make it easier for media consumers to browse the news geographically. MapFour sifts through the Al Jazeera and New York Times APIs for locations in articles, and plots them on a map the user can browse. The team also incorporated a time-slider, for viewing different stories that erupt in the same places over time.

MapCake app showing stories related to "Michael Brown" near Ferguson, MO.

MapCake app showing stories related to “Michael Brown” near Ferguson, MO.

MapCake, on the other hand, took a “Production” angle on the challenge. Understanding it can be extra work for journalists to create web maps for their stories, MapCake employs an intuitive “highlight-and-geocode” workflow enabling the mapping and tagging of locations straight from an article’s text. The geocoding is pretty accurate even without much additional context than just a city name, too.

I was really surprised with teams that addressed totally different challenges like “Looking at the Numbers” and “Fully Immersed in Media” and “Media on the Move”, yet also incorporated maps and geospatial thinking into their projects.

Narrata embedded in an Al Jazeera story

Narrata embedded in an Al Jazeera story

 

I was amazed with the Narrata team’s easy uploader that effortlessly blends a story narrative and temporal geodata. The result from just two CSVs is an embeddable interactive map and chart allowing media consumers to dive into time-series geodata to explore weekly or monthly trends, as in their South African protests example. Narrata saves time for journalists, who don’t need to code-up a new visualization for every article with time and place data, and provides an immersive interactive for consumers – in a way addressing both the “production” and “consumption” phases of media in one app!

Street Stories Ferguson example

Street Stories Ferguson example

Street stories is another team that created both a compelling example and a great framework that’s already being re-used by other media organizations. The project turns Google Streetview into a storytelling tool, by embedding tweets, YouTube videos, narratives, and even background sounds directly into the streetview “sphere”. What emerges is an immersive experience that allows one to imagine themselves – visually and audibly – at the real site of an event as it’s happening.

Other projects like Context, TinyFM, and Near, while not map based, still have geographic implications for contextual media access in our cities and while we’re in transit.

I’ve been to and organized a lot of hackathons but the Canvas Media in Context hackathon was truly awe-inspiring. Tremendous credit is due to Al Jazeera Innovation and Research for coming up with the vision for the event and having the leadership to make it all happen. The projects that emerged and the exotic venue in Qatar were also magical. But by far the part I’m missing most two weeks later is the people. Our 100 participants and mentors were grinning the entire way through despite the jetlaggy, intense environment. The fact that the #mediaincontext hashtag is still going and some projects have already been re-used tells me this passionate journalism and technology community is just getting started. Even if you weren’t there with us for the inception, sign up for the Canvas newsletter, vote for your favorite projects by January 15th to win the People’s Choice Award, and stay tuned – much of the story has yet to be written!

Announcing: Winners of OpenDataPhilly Visualization Contest

Azavea and OpenDataPhilly are pleased to announce the winners of the OpenDataPhilly Visualization Contest.  Visualizations that represent creative and visually impactful uses of Philadelphia’s Open data were selected to be featured on the new OpenDataPhilly website (soon to be launched).  OpenDataPhilly.org has undergone a redesign thanks in part to grant funding from the Knight Foundation.  In anticipation of the relaunch of Philadelphia’s newly designed data portal, Azavea invited submissions of visualizations of Philadelphia’s open data.  The OpenDataPhilly Visualization Contest collected submissions from designers, data scientists, developers and anyone who enjoys exploring and visualizing open data. Submitted data visualizations utilized data sets shared on OpenDataPhilly.org and were both static and interactive including maps, infographics, charts and more. Prizes included $500 in Amazon gift cards divided among winners.

Winners include:

Name: Chris Alfano and Lauren Ancona
Project: School District of Philadelphia Budget

Visualization by C.Alfano

Name: Gregory Kaminski
Project: Bike Thefts in Philadelphia

Visualization by G.Kaminsky

Name:  Ken Steif
Project: Visualizing Philadelphia’s neighborhood change process

Visualization by K.Steif

Name: Wayne Dunn
Project: History of Philadelphia Police Citizen Complaints 2009-12

Visualisation by W.Dunn

Name: Rachel Weeden
Project: Mapping Residential Burglaries in Philadelphia

Visualization by R.Weeden

Name: Joseph Calamia
Project: CenterCityScience –Visualizing Scientific Scale from a Philadelphia Perspective

Visualization by J.Calamia

Name: Kenneth Elder
Project: Energy Consumption in Philadelphia

Visualization by K.Elder

Name: Angela Minster
Project: Roof Deck Permits as a Gauge of Neighborhood Development

Visualization by A.Minster

Name: Chris Whong
Project: Visualizing Philly’s 2012 Budget by Department and Category

Visualization by C.Whong

A New Vision for Accessible Maps

At the recent 2014 Geo Open Source Conference in Philadelphia hosted by GeoPhilly and LocationTech, James Tyack gave an excellent presentation on building applications for accessibility.  He demonstrated UnlockPhilly, an app that identifies accessible transit stops and the businesses near by. You can hear James’ full talk here.

Unlock Philly Website for Mapping Accessibility

Unlock Philly Website for Mapping Accessibility

This momentum around accessibility got me thinking more about how we, as mapmakers, can keep in mind individuals with visual impairment including low vision and color blindness. I first wanted to explore some of the current solutions available.

Mapping for the Blind: Printed Materials

The first time I came across a tactile map was in a Patco Transit Station. This thoughtful map has unique textured features for routes and braille text for each stop name.  According to Patco’s Twitter account, this particular map was created by Visual Marketing System, Inc. I was impressed with how legible it was and how simply it communicated the different routes and stop types (both with color and tactile symbols).

Patco's Textile Map with Braille station names and textured routes

Patco’s Textile Map with Braille station names and textured routes

For geographic locations that do not yet have tactile maps available, LightHouse, an organization based in San Francisco, provides a service to create tactile maps of parks, transit systems and street maps. The raised features and simplified enlarged text can be suitable for individuals who are blind or have low vision. The technology used in printing is known as Tactile Map Automated Production (TMAP) and was developed by Dr. Joshua A. Miele, a scientist at the Smith Kettlewell Eye Research Institute.

Navigation for the Blind

Screen readers allow individuals with visual impairment to interact with websites on desktop or mobile devices.  These do not normally work well with maps.  OSM (OpenStreetMap) for the Blind has assembled many resources for individuals needing different methods to interact with web maps including Look and Listen Map, an interactive audio book atlas.

Additionally, Blindmaps is prototyping a device that integrates with white canes for navigation and spatial awareness. It also integrates technology from Blindsquare, a popular iphone app that provides audio context based on GPS coordinates and integrates with FourSquare for points of interest and OpenStreetMap for navigation.

Accessibility for Color Selection

As mapmakers, we might not have the tools to develop innovative solutions like the ones described above.  But one thing we can do to make web and print maps more accessible is to make more thoughtful palette choices to accommodate people with color blindness. I started this conversation when recommending cartography design for accessibility as one of the 4 Color Cartography Tips Hue Should Know.  I’d invite you to explore a fantastic blog post written by John Nelson on the subject called Charting for Understanding, about the color spectrum and important considerations when communicating with color.  He makes uses of a chart as an example and recommends using additional techniques to help show variations in data.  He also mentions reconsidering how the data is displayed, in his example, he rotates the chart and aligns the point of neutrality of each country survey to make the variation more clear.  John also mentioned Vischeck, a tool that can be used online or on a desktop computer to verify sufficient color differentiation for vision impairment. Below you can see how this tool identifies color disambiguation.

Before:

RedGreenChartOriginalVischeck

From John Nelson’s Blog: Chart and Vischeck before Color Improvements were made.

After:

RedGreenChartColorcorrectedVischeck

From John Nelson’s Blog: Chart and Vischeck after Color Improvements were made.

As you can see, in the first image the tool identified the ambiguity in colors for individuals with color blindness.  The chart in the second version is corrected and the colors can now be differentiated.

How can these recommendations be tailored for map design?

When symbolizing diverging data, use ColorBrewer’s color palettes that are defined as color blindness safe which can ensure these are appropriate for all users. Colorbrewer helps you avoid selecting color schemes with too little variation or two many conflicting colors that can be confusing.

ColorBrewer Screenshot Color Blind Safe

Color Brewer identifies a subset of palettes that are Color blind safe.

When selecting color for background features on your map, keep variation and contrast minimal. This will help guarantee that the features on your map will be the focus of your design.  Keep in mind there are many types of color blindness and vision impairment.  It is always helpful to use Vischeck to validate your map because even if you use a safe palette, other colors in your design might interfere with communication.    When all else fails, especially for print, consider a single color ramp or black to white ramp. Remember that communication is more than just color:  consider using simple textures or  recognizable symbols to increase readability.

When selecting fonts for an accessible map, keep it simple: avoid serifs (fonts with curly text), decorative or italic fonts which can be difficult to discern even among people with perfect vision. For more fantastic tips on accessible map design, consult Apollo Mapping’s excellent two part blog on color blindness.

Pretty cartography is not always accessible cartography. Keep it simple, and always run a draft of your print map (or a screenshot of your web map) through a color validator to ensure accessibility, or if possible, consult someone with vision impairments on the legibility of your map before it’s put into production.

A Bird On a Map is Worth Two in the Bush

In the spirit of Thanksgiving turkey, I was interested in how many birds are consumed globally, and not just here in the US. Luckily, the USDA Foreign Agriculture Service (FAS) keeps track of all sorts of data about world-wide food production, consumption, exports and imports. Let’s take a look at the source of the data, how I processed it, and what poultry consumption looks like around the world.

Duck Hunt

Ducks being hunted.

Ducks being hunted.

Poultry includes chickens, ducks, turkeys, and a number of other birds commonly consumed by people (according to the USDA). I downloaded a poultry data file from the FAS and got to work. I filtered the table to only display consumption records around the world from 1960 to 2014. There are large gaps in the data for many countries and the FAS seems to have stopped keeping track of Europe in 1996 (what are they hiding?!), and most countries in Africa have no data at all.

I decided to use per capita measures of poultry consumption, not only because it’s a more relatable measure than thousands of metric tons,  but it also controls for population growth. In order to process the data further I needed global population data, which I downloaded from the World Bank. I uploaded both the poultry and population tables to CartoDB and joined them based on a common key, country name. CartoDB also went an extra step and geocoded the data to national outlines automatically. I then exported the data as a shapefile and opened it up in ArcGIS for processing.

I decided to look at two time periods: 1996 (the year before the feather curtain fell across Europe) and the most recent full year of data, 2013. I used SQL in ArcMap to select only those records where both the population and consumption were greater than zero to filter out missing data. I used the field calculator to convert the metric tons to US pounds, and then divided the result by the population. I did this for each of the years I was interested in. To verify my results, I checked the per capita consumption against the  the US Poultry and Egg association’s data, and they had an eggcellent match.

 

Angry Birds

First, I assessed global poultry consumption in 1996, the last year for which the FAS had data on western Europe. It appears that the Dutch appear to love poultry almost as much as the US, and it’s a popular food in France as well. Central and South America also eat quite a bit of poultry, and large oil producers in the Middle east also have high consumption rates:

Oman, Kuwait to Eat Some Chicken

Next, let’s look at global poultry consumption in 2013: Europe goes dark and we see the rise of Gulf countries in the Middle-East (Thanks, KFC?). Per capita consumption in the US has increased by ten pounds since 1996 and Brazil more than doubled its consumption from 27 to 70 pounds, and now rules the global roost.

 

Bird’s Eye View

For the final map let’s take a look at how per capita consumption has changed from 2010 to 2013. I used more recent years because many of the countries with available data changed from 1996 to 2013, but 2010-2013 did not add or remove any data. I used CartoCSS to break down the map classification into only two categories: gains and losses. It seems that even while Brazil’s consumption slowed from 2010 to 2013, it was still greater than the US. Per-capita consumption rose broadly across most of Eastern Europe, Asia, and the Middle East. The biggest losers were Kuwait, Jamaica, and Hong Kong (in that order), and the biggest increases go to Belarus, Saudi Arabia, and Argentina (respectively).

A Few Final Birds

While this is interesting to look at, there are some large limitations in the data. Many countries are missing information, and per capita consumption is an imperfect measure. Consumption of poultry varies drastically across individuals, regions, religions, countries, and cultures. How do various nations record and report how much poultry people eat? And where did Europe go?

Finally, for those wondering about the “A Bird in Hand” saying, you can learn about it here. Coincidentally there is a village in Pennsylvania called Bird-in-Hand.

Teaching a New Map Old Tricks: Using Archival Color

Despite my academic training as a geographer, I’ve found it difficult to incorporate traditional cartography into my day to day work.  While I truly appreciate the aesthetic of archival maps (I have many hanging on my walls, including an 1860’s Johnson and Ward), the focus of my work remains interpretation of data, analysis and visualization for print and web.

From The Atlas Nova Totivs Terrarvm Orbis Geographica Ac Hydrographica Tabula. Published By Hondius, Henricus In 1633.

From The Atlas Nova Totivs Terrarvm Orbis Geographica Ac Hydrographica Tabula. Published By Hondius, Henricus In 1633.

So, after attending NACIS and exploring some best practices for color in modern cartography in a previous blog post and even blending colors on the fly, I set my sights on exploring some of the beautiful and classic color palettes of archival maps. Though I don’t have the opportunity to do classical cartographic work like digital recreation or archiving, I can find significant inspiration from the muted and sometimes striking color palettes of these maps.

With our instantaneous digital (or print) access to every color on the visible spectrum, it’s fun to imagine the limitation (or inspiration) cartographers once faced in selecting from a finite number of inks and dyes derived from natural materials that were both scarce and expensive to produce.

The below images represent a short selection of some of the most colorful and enchanting archival maps and their corresponding color palettes.

TimeTravel

London Travel Time Map, 1914 Source: Reddit/r/mapporn

 

Geological

Carte Geologique De L’Europe. Andrew Dumont, 1875. Source davidrumsey.com

 

ColoradoMap

Rand, McNally & Co.’s New Geological Map of Colorado. 1879. Source davidrumsey.com

 

Constellation

Plate 1: Ursa Major, Ursa Minor, Perseus, and other constellations, 1693. Source: davidrumsey.com

You can find an entire selection of these mappy color palettes on my ColourLovers account.  Each palette includes a link to the corresponding map that inspired the palette.  I hope these will ignite your imagination and inspire some archival charm in your modern map making.

Palettes inspired by Archival Maps. Colourlovers Account: Mapadelphia

Palettes inspired by Archival Maps. Colourlovers Account: Mapadelphia