ArcGIS maps in Illustrator and Photoshop

Design and communication professionals should be really excited about a recent development in mapping: ArcGIS maps for the Adobe Creative Cloud.

GIS (Geographic Information System) software links location information in the form of databases with latitude and longitude coordinates to different types of information: demographic data to census tracts or divisions, election results to states, land use to natural or urban areas, etc. The user decides what layers (which may come from government or private sources) are going to be combined in order to visualize, analyze, and interpret the data to show relationships, patterns, and trends. As I mentioned in a previous post, GIS packages such as ESRI’s ArcGIS are rarely used by designers or news infographics departments as they are expensive, difficult to learn specialized tools normally used by GIS analysts and cartographers. With very, very few exceptions, those designers and graphics editors limit themselves to fairly basic mapping techniques that don’t take advantage of the power of GIS to uncover patterns through spatial analysis of large datasets.

The partnership between ESRI and Adobe offers ArcGIS functions within Adobe Illustrator and Photoshop via an extension or plugin. Designers can access thousands of data-driven map layers inside the Adobe programs as vectors or raster files, and play with colors, layers and styles to customize the maps using the familiar tools of Illustrator and Photoshop.

Creating maps with the extension is fairly straightforward. Without leaving Illustrator and Photoshop you define the area extent, size and scale of the base map, then search for data map layers (street maps, political boundaries, terrain, satellite images, election data, demographic information, economic indicators, environmental, etc), and finally you add/download the map to your Adobe workspace. It’s then already arranged in layers and ready to edit and polish by manipulating colors, appearance and fonts with the usual Illustrator and Photoshop tools.

You can get the beta version here. It has been available for a while, and the first full version is slated for release in the second Quarter of 2017, with no specific date yet (it’s been delayed before). Some of the functions are clunky and/or slow, but it is definitely great news and I can imagine how in few years this may become an essential tool for infographics designers to create and publish advanced data maps. You do require a subscription to ArcGIS Online (pricing info here) to be able to sign in but there is a trial version available.

Here is an introduction showing the capabilities of the plugin and how it works, and a longer, more recent video with added detail:

All images by ESRI

 

 

 

 

Latest D3 Work

C0NIeg-XcAQtL6C.jpg-large.jpeg

When it comes to create data-driven interactive infographics, charts and maps for the web our tool of choice is D3. This JavaScript library can connect data to graphic elements in the page and create data-driven, dynamic transformations for them. The possibilities are enormous. D3 was created by Mike Bostock, a computer scientist at Stanford University. Until 2015 he was also working at The New York Times creating some of the best interactive graphics out there. According to Martin Velasco, our Director of Web Development, “D3 is possibly the most powerful and flexible tool out there for creating sleek and precise data visualizations for the web. We really enjoy working with it”.

During the last few months we had the opportunity to experience once again the power of D3 while developing several  graphics for Urban Institute, a think tank in Washington D.C. that do research on economics and social policy. One of the more interesting is this data-intensive electoral map that connects the recent election of Donald Trump to several social indicators of financial insecurity. It is truly remarkable how D3 allows you to work with massive amounts of data (about 50,000 in this case) and transform them into beautiful rich, smooth-moving graphics. We are looking forward to more D3 work.

The power of cartograms and creating them easily

tilegrams_homepage

We love the power of cartograms to show thematic data maps because they overcome some of the problems of classic choropleth maps. And they can be beautiful. So it’s exciting to see a promising new tool to create nice cartogram hexmaps automatically. It’s called Tilegrams (for “tiled cartograms”) and it has been developed by Pitch Interactive in collaboration with Google News Labs. But let’s back up a little bit, since many people are not familiar with cartograms in the first place!

A cartogram is a map that actually functions as a chart by distorting the size of geographic areas (such as countries or states) in proportion to numerical values they represent. Here are two nice examples by John Tomanio, Director of Graphics at National Geographic. In the first map, each dot represents a specific number of people—2 million— living in a country. In the second map, each dot represents $20 billion in GDP for that country, as a proxy for consumption. The dramatic, yet entirely accurate data representation allows two different stories to emerge nicely as we see the relative weight of each country for that particular dataset. That’s the power of cartograms (the black circles here represent the same variables a few decades back, for a nice representation of growth over time).

untitled

You may say “ok, these look a little weird, why not represent these data in a choropleth map, or in other words using different shades of color in a “normal” map?”. Like the example below. Choroplet maps are ubiquitous and, while they are not incorrect, they are seen by many as misleading. They overrepresent the importance or large areas, and diminish the importance of small ones, just by virtue of their size in the page. If I plot GDP for different countries, for example, a large country with a medium value (say Brazil) “lights up” much more prominently than a country with a higher value such as Singapore, simply because Singapore is tiny and hard to see in the map. See a nice video from Vox here explaining the problem with choropleth maps.

Physician_practice_landscape_Final

One solution is to give all entities equal area and then use the choropleth technique (different shades of color represent different values). That’s more fair. But we can only show a few classes or “buckets” of data ranges, rather than precise values in each area.

equalarea

So it may be interesting to resize each area according to the number we want to represent. Some cartograms can be fairly abstract. Instead of using the approximate shapes of countries or states, they use squares, circles or other geometric shapes to represent quantities in highly stylized maps. See this map we did for Fortune, with the number of millionaire households by state in the U.S. (color here represents a second variable, the median household income).

5w-sample-054-america-millionaires1x2

I love this type of cartogram. Here is another one by John Tomanio, a few years ago, for Fortune.

tomanio

Cartograms can be really striking and powerful. Lately we have seen a comeback, and they were often used by different news organizations in the UK in the recent election cycles. A cartogram of the U.S. can be a nice way to represent that a small state in the East Coast may have many more electoral votes in the general election than a sparsely populated but large Midwest state. Here is the tilegram showing how much each state actually matters (how many electoral votes it holds) in the U.S. Much more telling than showing actual size in the context of election stories! Don’t be misled by how much blue or red you see in typical election maps.

electoralvotes

Complex cartograms have been done manually forever, for example in Adobe Illustrator, as in the case of the National Geographic maps. It’s a painstaking process, but human judgement is critical to make sure the composites of little shapes will still resemble the actual map of the area, which is entirely the point if we want to avoid confusion. You have to put them together as a jigsaw puzzle.

We have seen tools that create cartograms working in conjunction with other GIS software tools, but if you ask me, they produce grotesquely deformed maps that are a hard to decipher mess (with that strange fisheye lens effect. You have probably seen them around). I think these are useless:

cartogram_lens

Tilegrams is a really nice concept, still evolving. It plots U.S. maps using hexagon shapes, which are more versatile than squares to assemble them together in adjoining shapes with different configurations. You can use some preloaded maps (electoral votes, population, etc) or load your own data. Tilegrams allows you to show different levels of resolution. For example, the first map below shows U.S. population with 4 million people represented in each tile. The one below shows 300,000 people per tile. As you would expect, the higher resolution allows us to resemble the shape of the U.S. better (but remember states are meant to be oversized or undersized to represent the values, so the unusual proportions are to be expected.

lowres_hires

If the map starts looking a bit too weird you can drag hexagons to move them around. The tool tells the user about the statistical accuracy of each region’s surface area, as it tries to be both accurate and resemble the actual map in a difficult trade-off. You can export the map as a TopoJSON or as a SVG file, a wonderful option since it’s fully editable in Illustrator!

Pitch Interactive explains the tool here, and it continues to develop it. The company is now working on a U.S. county map. It sounds like a daunting task (there are over 3,000 counties in the U.S.). And hopefully one day we can show any country and their divisions in this simple way. I can’t wait to see what they come up with!

 

 

 

 

The new Atlas of Design

img_3766

The latest edition (Volume III) of the Atlas of Design is available for pre-order! The Atlas is an amazing compilation of cartographic design, selected in a worldwide competition by a panel of experts. The range of creative approaches in the 32 maps that make the book presents a wonderful picture of the broad scope of mapmaking styles as well as its challenges. Each map is accompanied by comments from the author, giving us insight about the conception and the ideas behind its creation.

img_3761

img_3767

The book is published every two years by the North American Cartographic Information Society (NACIS) a not-for-profit professional organization for mapmakers. In their words:

The Atlas aims to inspire readers both within the field of cartography and without toward new understandings of design, and of the power that a well-crafted map can have. In an age when more and more mapping tasks are being turned over to computers, the Atlas provides one more answer to the question: What do cartographers do?

I was honored to be asked to write an introductory essay for the book, which I ended noting: “This book is a formidable compilation of beautiful and informative cartography, from classically designed to bold and daring; from hand-drawn gems to multilayered interactive presentations. It is a collection of short stories about the world we live in, each as fascinating and unique as the cartographers who made them”.

When I was Art Director at National Geographic I was lucky to work with some of the best mapmakers in the world (including Ginny Mason, an active force behind the publication of this book), and I was in awe of their skill to achieve beautifully crafted and precise pieces of journalistic storytelling. The work in this compilation speaks to that great skill.

You can preorder the book here. And take a look at some of the work in the previous Volume I and Volume II.

img_3765

img_3760

Form left to right: Co-editors Marty Elmer and Sam Matthews, and assistant editor Ginny Mason

 

The fantasy maps of Martin Vargic

Literature 2.pngMartin Vargic is an 18-year-old graphic artist from Slovakia that has created some of the most interesting, intricate and beautiful fantasy maps we have seen lately. Martin focuses on cultural and popular issues and represents them as very complex maps, using all the graphical and typographical resources of traditional cartography. The results are as beautiful as they are entertaining. Take for example his Map of Literature. In his website Martin says:

“The Map of Literature is a graphical visualization of how the world’s literature evolved from the ancient era to the present day. Different periods and genres of literature are represented by distinct entities (‘countries’) on the map, that unfold from the centre and show the gradual evolution of the various genres. The map is divided into four distinct continents that symbolize the different literary forms: drama, poetry, prose fiction, and prose nonfiction”.

Literature.pngLiterature 1.png

The amount of data crammed into this map is staggering, and the necessary research very extensive, and yet it took Martin only three weeks to finish it (“however I often worked more than 15 hours a day on it.”).

Equally fascinating are his Map of Stereotypes, his Map of the Internet, and many others. Martin’s website, Halcyon Maps, has a great gallery with all his maps. You can even buy prints there.

From the Map of Stereotypes:Stereotypes2.jpgStereotypes3.png
From the Map of the Internet:Internet2.jpgInternet4.jpg

Martin has published a book with his maps called Vargic’s Miscellany of Curious Maps: Mapping out the Modern World, and he is working on a new book of infographics about astronomy and space exploration.