About by Juan Velasco

Art Director at National Geographic magazine

America strikes oil

Our March issue has just hit the newsstands and our subscribers in all platforms. The cover story this month is an important one: The U.S. is experiencing a big boom in oil and natural gas due to new technologies to extract hard-to-reach oil. The new “gold rush” is affecting with special intensity northwest North Dakota, bringing new fortunes, transforming the prairie landscape and also causing environmental concerns while boosting the U.S. fuel supply.

Senior Graphics Editor and cartographer Virginia Mason produced a spectacular tour de force in researching, conceptualizing and designing the map, graphic and video in the story, shown here (click on the graphics for the hi-res version). In a few weeks I’ll make a longer post about the step by step process of this project, which involved research on the field, advanced GIS and 3D work and acquiring new animation skills.

The map shows wells in the heart of the new oil boom region of North Dakota. Over 3,000 wells (all existing wells, including inactive ones are plotted) dot the map, each of them extending underground in gigantic 1 or 2-mile long pipes (the gray lines) along an oil-rich layer of oil called the Bakken formation. The pipes are used for the highly specialized process or hydraulic fracturing, or fracking, perhaps one the most essential new words you are starting to hear about in the news.

The stark, simple presentation of the map with the rural landscape along the Missouri River overwhelmed by the massive pattern of black dots amplifies the shocking nature of this transformation. Overall, there are about 8,000 wells in North Dakota, a number that is projected to grow to about 50,000.

High Plains map

The graphic (below) shows how fracking works. It was produced by Virginia along with Joe Lertola from Bryan Christie Design studio. Fracking is a process by which previously inaccessible oil embedded in rock can be extracted by injecting water, sand and chemicals at high pressure into a layer of shale. The fluid fractures the rock, releasing the oil, which flows back up the well to the surface along with it. The waste fluid from the process is then pumped back into the ground in disposal wells that are kept far from the groundwater layer, in theory preventing the contamination that has happened in other parts of the country.

The graphic shows a real well (Iverson 21-14 H) in the field, and every fracture (shown by the blue lines) along the 2-mile horizontal pipe was accurately plotted in three-dimensional space using seismic data.

High Plains graphic1

Finally, here is the video we produced for the iPad and iPhone edition, possibly the most ambitious undertaking in animation so far by our art department. We’ll do much more of it as we continue expanding our graphics and maps offering for the web and mobile platforms. I hope you think it was worth it after you watch and I’d be interesting in hearing your opinion. I’ll show you the step by step soon.

Judging the World’s Best-Designed™ Newspaper contest

worldbestsnd34final

Last week I had the honor of serving as one of the judges for the Society of News Design (SND) competition to choose the World’s Best-Designed™ Newspaper. Along with my colleagues (Steve Dorsey and Denise Reagan from the U.S., Paul Blickle from Germany and Alexandro Medrano from Mexico), we chose 5 newspapers. They are (click on each link to read our impressions on each of the newspapers):

Dagens Nyheter, Stockholm, Sweden

Die Zeit, Hamburg, Germany

The Grid, Toronto, Canada

Politiken, Copenhagen, Denmark

Welt am Sonntag, Berlin, Germany

Although I work for National Geographic magazine now, I love newspaper design and I spent 10 years working for daily newspapers (El Mundo in Spain and The New York Times). Judging the design of a newspaper is a tremendously difficult task, as the design is the expression of a newspapers voice shown through their use of photography, visual storytelling, headlines, graphics, combination of long and short format narratives, hierarchy of elements, editing and a myriad of nuances related to how they best try to serve their readers.

We took 4 days, often working 12 hours a day, to analyze close to 300 daily and non-daily newspapers. Each newspaper submits five issues, which must belong to different months and include weekend editions. Language and cultural barriers are obvious. Asian newspapers are entirely different from Western publication in their design approach. We had translation when needed but ultimately is nearly impossible to do justice to everyone. It’s also important to point out that we judge only those newspapers that decide to submit entries. There are a few (not many) of the best newspapers that didn’t enter the contest.

This is the overall statement released by the judges at the end of the competition:

“What distinguishes a World’s Best-Designed™ Newspaper? A culture of careful editing of all content that puts the reader first — through stringent attention to detail.

Too many designers are not driven by the content in front of them; they’re just moving elements around pages. In the best-designed publications, that connection jumps off the page.

Quite frankly, it was easy to weed out publications in the first round of judging. So many papers couldn’t nail the fundamentals of typography, grid, white space, hierarchy, etc. — the basics we’ve been talking about for 35 years as a Society.

That’s not to say that there weren’t many excellent entries. Everything that made it past the first round was solid, but it takes more than being solid. It requires diligent and nuanced execution — and tons of personality.

It’s disheartening to see so many American newspapers that, after decades of discussion and education, still pay little or no attention to inside pages. Publications that spend a great amount of time finessing their covers but treat their inside pages like vessels to fill with commodity news until they’re full to the top are missing the point and the opportunity to be relevant.

Another disturbing trend: the lack of illustration and especially information graphics in so many newspapers. These are the tools that newspapers can use to distinguish their content from the pack and add context and understanding to their report.

Several fascinating innovations popped up such as new micro format papers (Diario DF, Mexico City) and the use of technology like augmented reality to enhance printed pages (Reporte Indigo, Monterrey, Mexico). Many Asian papers are starting to use Western design methods but are still maturing (Qianjiang Evening News, Hangzhou, China). Latin American newspapers burst with energy but some lack focus. In the Middle East, the quality of printing and production is impressive; we look forward to the evolution of their individual personalities.

In the five publications we selected, details elevated them from their peers. In these papers, every page counts. These staffs perform an extra layer of editing to refine and strengthen the final product.

Ultimately, these winning newspapers have been brainstormed, edited and curated for readers. They add analysis and context and serve to connect readers to their larger community.

Paul Blickle 
Steve Dorsey
Alexandro Medrano
Denise M. Reagan
Juan Velasco

Congratulations to the winners. Multiple other newspapers reached the final stages (Público from Portugal, Gulf News from the UAE, Svenska Dagbladet from Sweden, The New York Times…). All of them and many others are terrific in many ways but I think we ended up being very much on agreement about the final selection.

Here is a slideshow with a few selected pages of each of the winners:

Please visit the SND website to learn more about this and about the SND Awards judging that took place at the same time as the competition I judged. SND is a non-for-profit international organization for news media professionals and visual communicators (thanks SND for the use of the images in this post).

Special thanks to Steve, Denise, Paul and Alexandro, my fellow judges for their friendship and insights!

Finally, here is a random sample of photos I took during the judging:

Castle

bus

Editing DieZeit GRID2 NYTIMES DidNotWin Winners photo-28 Mix Asian Election Titanic

Intheair

The quest to find all Birds of Paradise

TheOur December 2012 issue features the story of the truly amazing quest of Cornell ornithologist Edwing Scholes and biologist/photographer Tim Laman to find and photograph all 39 species of birds of paradise, perhaps the most spectacularly adorned family of birds in the world. Birds of paradise inhabit Papua New Guinea and parts of Australia. They are known for the flamboyant, sometimes bizarre and colorful plumage and other ornaments males use, along with some nice dance moves, to woo, entice and impress females in elaborate mating rituals. Many of the birds had never been photographed in the wild before.

Laman and Scholes made 18 expeditions over 8 years, visiting over 50 different sites to document the birds. And they succeeded.
It was clear we would need a graphic to explain how these creatures, which show wildly diverse morphological traits, were related to each other (often a bird is more closely related to one that looks entirely different from a similar-looking one). It was also important to document the range of each of the species, as they occupy very well defined niches at different elevation levels.
Senior Graphics Editor Fernando Baptista, Graphics Specialist Maggie Smith and freelance researcher Fanna Gebreyesus teamed up on this one to create this beautiful 3-page gatefold (click on any image in this post for a larger version):

Birds of Paradise_Final

The graphic show 15 birds illustrated by Fernando in the best tradition of natural history illustration. Each of them represents one of the 15 genera that groups birds of paradise. We show the family relationships, relative scale and a little chart gives additional information about the altitude range of each species in any given genus.

BP-Detail1

At the bottom, we mapped the elevation range of the different species  as well as all the expedition sites since the research started in 2004.

Detail2

Here is the opener spread for the story, nicely designed by our Design Director David Whitmore. With abundant food and no predators, birds of paradise’s male appearance has evolved to really fantastic levels.

Opener

And here are all 39 species in the wild:

Photos

Fernando’s initial sketches were created for a book that the Nat Geo Society was preparing, but we knew we would eventually produce a graphic with a similar format in the magazine too. Here we see a first attempt at organizing the birds in a rather random but aesthetically pleasing design.

1sketch

Fernando’s next sketch tries to bring more order by organizing the birds by size in a curved shape.

2skecth

But conversations with the scientists made clear it was important to document how the different species related to each other at the taxonomy level, as much of it it was new science. That information shouldn’t be limited to the tiny inset chart. In this version the connecting branches of the family tree are not real…

3sketch

Here they are real. Grouping the birds by size defeated the purpose of showing taxonomic relationships. The lines in this failed sketch show how the merely aesthetic decision would trump clear understanding.

4 sketch

Here we finally see a rough that approximates the final approach, including the map. Birds are grouped with their most closely related species. See the amazing size differences.

_RH Gate Template

Later on, we tried to use a chart to connect the map and the family tree by plotting the altitude range of each species. But it felt disconnected from both the map and the main graphic, creating a third layer of complexity rather than connecting the two existing components of the page.

In this version you can also see how Fernando played with the poses of the birds to avoid the stiff, field-guide feel of the previous sketch, where all of them were looking to the left in the same pose. This version is more fluid and natural. Fernando tweaked many of the poses, rotated heads and kept making changes through the entire process.

6 sketch

So Fernando decided to include the elevation chart below each one of the bird illustrations, indicating the elevation range of each of the birds. The mountain pictogram containing each chart added a bit of immediacy to the concept of elevation.

7 sketch

Here is some of the reference collected by Fernando to draw one of the birds. In most cases he had numerous photos by Tim Laman and additional reference. For those never photographed before, Tim’s photos were all the existing reference. We worked closely with Tim and Edwin, a reputed ornithologist, sending sketches back and forth.

reference art

Fernando’s process involves a relatively tight but light line pencil drawing (top left), a layer of watercolor with the main tones (top right), and finally a considerable amount of enhancements and shading done in Photoshop (bottom left). In this particular bird, Fernando changed the orientation of the head at the last-minute to create more dynamism.

process art2

Maggie started the map with a base map developed by the Maps Division of the Society (a group separate from the magazine’s cartographers) for the book. In most cases and since we need to deal with custom thematic layers of content directly from the sources, we develop our own custom maps in the magazine using software like ArcGIS, Natural Scene Designer and others. The Maps Division will generally use the cartographic database of the Society to develop products like the National Geographic Atlas.

Map1

Below are several iterations of the main map. The initial version was rotated in the page for a more horizontal shape, larger size and a better fit, but we would ultimately prefer to keep the true north orientation and we thought the more diagonal shape made it more active. We tried multiple ways of linking the altitude range levels in the map to the species illustrated on top, but attempts like the chart shown here with the blue bars was ultimately considered too complex. It would slow down the comprehension of the graphic rather than helping it.
The second version shows a combination of shaded relief and contour lines, but the different values of each color from the highlights/shadows in the shaded relief made it hard to relate colors in the key to colors on the map. The detail was also a bit noisy.
The final version had simplified relief included nice and gentle pencil-made touches by Fernando to give islands texture around the edges.

BirdsOfParadise_MainMap

The locator map went through several rounds of improvements as well.

BirdsOfParadise_Locators

iPAD The graphic was completely rethought for the iPad version of the magazine. Since we wanted the art and maps to shine at a good size in the screen, we would break the content of the graphics into different pieces. Graphics Specialist Daniela Santamariña did most of the hard production work on the project.

Once scaled for optimum legibility, text takes a  very large amount of real estate on the iPad. One of the things we tend to do with the larger text paragraph that serves as introduction for most maps and graphics is to use it on a cover page for the interactive, along with an illustration.

photo-12

We broke down the birds by taxonomic relationships as we did in print, but in smaller groups to enjoy the nice art. A miniature version of the entire tree serves as a key. As we did in the print version, the birds are always compared to the ghosted image of an American crow, a bird of well-known size that shares relatively recent common ancestors with birds of paradise.

photo-10

photo-11

The maps were rethought to add significant value by showing the extent and elevation range of each of the 39 species. The user can choose any of the birds in the photo grid below to enter a page with information about it.

photo-13

Each page also included a reference to the conservation status of each bird, and in most cases audio with its call.

photo-7

The photos in the story are really stunning. The iPad edition featured a video showing Tim’s preparation for the photo shoot.

photo-8

Watch it here:

On the IPhone edition, we decided only a simplified range map would have enough legibility on the tiny screen. We often create interactive versions of graphics for the iPhone with the Adobe Publishing Suite or After Effects but, as I explained in my previous post about our iPhone maps and graphics, sometimes we need to make hard editing choices for maximum simplicity.

iPhone

Scholes and Laman spent over 2,000 hours sitting in blinds, waiting and watching, to produce over 39,000 pictures and video. It was a pleasure for us to document their work. They hope their work will encourage conservation in New Guinea, where birds of paradise have been so far protected by the remoteness of the place.

They have also been working with the Cornell Lab of Ornithology (one of the major supporters of the Project) on a educational website about the Birds-of-Paradise Project.  The website is also incorporated into the National Geographic Education portal.  You can see both here:

Malofiej 21st Infographics World Summit announced

Malofief21

The 21st edition of the Malofiej Infographics World Summit and workshop has been announced and is now open for early registration. The Show Don’t Tell workshop will take place on March 10-13, 2013 and the conference will run from March 13 to March 15.

Malofiej is the oldest and most comprehensive gathering of information graphics professionals, academics and students in the world. The conference is organized by the School of Communications of the University of Navarra, Spain and the Spanish Chapter of SND (Society of News Design). It takes places in Pamplona, Spain. Not because I’m involved in co-teaching the workshop, but if there is one conference I recommend unreservedly to anyone interested in information graphics and in data visualization focused in storytelling, this is it. The ambience is phenomenal and it’s a fantastic opportunity to meet and discuss with people doing graphics all over the world, make new friends and get inspired.

Malofiej is divided in three parts: a general conference, a workshop and the Malofiej annual competition.

THE CONFERENCE

This year, the conference will feature an impressive array of speakers:

• Amanda Hobbs. ATH Creative (formerly at National Geographic), USA.
• Wilson Andrews. The Washington Post, USA.
• Nathan Yau. Flowing Data, USA.
• Jan Willem Tulp. Tulp Interactive, Holland.
• Stefanie Posavec, UK.
• Nicholas Felton. Feltron Report, USA.
• Fernanda Viegas. Google, USA.
• Frédérik Ruys, Vizualism, Holland.
• Fabricio Miranda. Superinteressante, Brazil.
• Jaime Serra. Director of Graphics and Illustration at La Vanguardia, Spain.
• Nikolai Romanov. The Infographics magazine, Russia.
• Graham Roberts. The New York Times, USA.
• Jen Christiansen. Scientific American Magazine, USA.

Check the Malofiej website soon for detailed bios and the complete program. The reduced fees for early registration end February 5th (February 20th for SND members). Students have big discounts.

Audience

2012 conference

School-Communication

School of Communication at the University of Navarra

THE WORKSHOP

This year I’ll be co-teaching the Show Don’t Tell workshop, as I have done for the last 12 years. I’m honored to have some of the most influential people in information graphics as co-instructors and friends:

John Grimwade, Graphics Director at Condé Nast Traveler.

- Alberto Cairo, Lecturer of Infographics and Data Visualization at the University of Miami, and author of The Functional Art: An Introduction to Information Graphics and Visualization.

- Geoff McGhee, Researcher on infographics and data visualization, 2010 John S. Knight Fellow in journalism at Stanford University. Ex-ABC, New York Times and Le Monde.

The conference is conducted in English with translation to Spanish for those who may need it. The exercises include visits to iconic places around beautiful Pamplona, where the participants will act as visual journalists gathering information to prepare graphics on multiple platforms. We focus on the process of conceptualizing, reporting, planning and sketching more than on the final product. And in finding the most adequate type of narrative for each story in print, online or mobile devices. Participants work in teams supervised by the instructors and give a presentation at the end of each hands-on exercise. Each instructor also gives a presentation during the workshop.

In recent years, we visited the Guggenheim Museum in Bilbao, the Marqués de Riscal winery in La Rioja (designed by Frank Gehry), The Chillida-leku Museum in San Sebastián, The Castle of Javier, the medieval walls of Pamplona…

Early registration for the Show Don’t Tell is available here.

Roncesvalles-King-Tumb

2012 exercise at the Tomb of the former King of Navarra

4-Group-photo

2011 Exercise at Marqués de Riscal winery, designed by Frank Gehry

SDT1

Working in groups

Students-and-instructors

Instructors and participants debate one of the exercises

THE COMPETITION

Parallel to the conference and workshop, the Malofiej annual competition recognizes the best infographics produced by newspapers, magazine, agencies, books, blogs and other online information distribution channels providing graphics. The Malofiej Awards have been called the Pulitzers of infographics, and I would agree with the definition.

All entries must have been published in 2012. Entries must be received by February 15th, 2013. Here is the link to the call for entries.

In the last edition, 1,513 entries from 148 media and 29 countries participated in the contest. See the some of the winners here, and the complete list.

Jury2

Nigel Holmes (in blue, of course!) and the rest of the 2012 Jury examine an entry

TableJury

The Jury in the fantastic setting at the Univesity of Pamplona

The winners of every year’s competition are featured in the annual book, a really comprehensive and inspiring collection of infographics that also contains good articles.

The Malofiej website also hosts a blog with good articles from relevant graphics professionals and news about the conference. Make sure to visit their Facebook page and Twitter account (@malofiej).

I hope I’ll see you in Pamplona!

Reinventing Nat Geo art, maps and graphics for the iPhone

natgeoiphone

Following the successful launch of National Geographic on the iPad (which won the National Magazine Award for best tablet magazine in 2012), last October we started the iPhone edition of the magazine. Available by subscription (which includes access to the iPhone, iPad and Kindle Fire versions), the iPhone edition posed a significant design challenge for our design team. According to Bill Marr, our Creative Director:

“You’d think that the size is the first hurdle. What we found was that the real challenge was organizing content. We had to re-think what we were doing on the iPad for this smaller format. We wanted it to be much easier to navigate and organize things simply—the table of contents is basically the guidepost to the whole app.”

The app features daily content, such as photos from readers, news and the daily Instagram feeds of our photographers as they work on the field.

Perhaps the biggest challenge was to adapt our content rich information graphics, maps and illustrations for the tiny screen. How did we go about it?

Although illustrations are easier to adapt than data rich graphics/charts and maps, which need to be broken down into small pieces, the small format doesn’t always make justice to the power and beauty of art pieces. On the flip side, we are now able to animate art. Our iPhone covers always have motion. As an example here is our January 2013 cover for print, followed by the animation we created for the iPhone. The great illustration by space artist Dana Berry comes alive, free of all the type we obviously need to run on the print edition. Click on any examples of the print graphics throughout the post to see large versions more similar to actual print size:

Space_cover

Here is the video:

The layout of the iPhone edition is clean and simple. All stories have been reorganized and broken down into three or four parts: Read (the text), Look (a gallery with the story photographs), Watch (videos, including graphics) and Listen (voice-narrated article). Bill Marr and Lisa Lytton, our Director of Digital Editions, worked with Joe Zeff Design studio to create a series of templates using Adobe Digital Publishing Suite (a set of tools that adds interactivity to layouts directly within Adobe InDesign).

The table of contents:

TC

Photos look stunning on the iPad screen, and I think they look really nice on the iPhone too despite the tiny size.

Photo gallery

The Listen menu takes us to a new feature where the user can choose to listen to the author reading the story. With more and more people getting their news on the go during their commutes, I think it will be a popular feature.

Audio

Many of the animated graphics are created in-house using After Effects, the Adobe motion graphics software that could be described as a timeline-based Photoshop. If you have used some Flash you’ll get comfortable using After Effect relatively quickly (and you won’t need Action Script).

The short video below added a new dimension to a map we created for the January issue to show the path and timing of human migration as we occupied the Earth’s land after coming out of Africa about 60,000 years ago. The speed of the arrow gives us a much better idea of the relative speed with which we moved into different continents. The expansion across the Americas was much faster than earlier phases of our collective journey.

This is the launching page:

RestlessGeneIntro

Here is the video:

The print version. Writing the dates on the map is not quite as effective.

Restless Gene

The toughest challenge by far is to adapt data intensive maps and graphics that were conceived as a unit editorially and visually. A good example is this October 2012 graphic showing the prevalence of elephant poaching in Africa as well as the Asian countries involved in the illegal international trade of Ivory, fueled by China’s new wealth.

Ivory

It was clear that some of the content would need to be dropped to create  a meaningful experience true to the nature of the device and the readership. The bandwidth limitations also requires more limited content.

We worked with Joe Zeff Design to design this simplified experience. In this case we chose to keep only the mapping of the decreasing elephant range in Africa (frist row below) the impact of poaching in different regions (second row) and a simple chart showing seizures of illegal ivory in five Asian countries.

Ivory dates 1    Ivory dates 2

Ivory Africa 1   Ivory Africa 2

Ivory chart

Another example of complete simplification. Maggie Smith’s beautiful map of the Mesoamerican Reef, published in October, had rich bathymetry (underwater relief features), and showed critical habitats in this fragile ecosystem: mangroves, sea grass, coral reefs, marine protected areas and fish spawning sites.

Mesoamerican Reef Map_MM7894

On the iPhone, we went with a minimalist locator (on the iPad, however, we preserved all the content and layered it to allow the reader to see different habitats individually).

Alex Tait from International Mapping has been helping us to adapt many of our maps for the iPhone screen. I was the most expedient solution but eventually we plan on going with a tiling map approach (where you would be able to zoom in on a map to reveal more detailed content, as you would do on Google Maps). People certainly expect that on their phones.

Mesoamerica_map

Illustrated information graphics posed the same problem. Fernando Baptista (graphic) and Martin Gamache (map) had created a beautiful piece about the Mustang caves of Nepal for our November issue (see Fernando’s amazing manual process to construct the cave here in an earlier entry of this blog). Here it is:

The finished graphic

The finished graphic

It was just not possible to reproduce the rich visual experience of the print artwork on an 4-inch screen. Everything was eliminated except for the locator map. They are always a necessity in our stories,  which often cover remote areas of the world.

NepalMap

But we did produce a video to be used on the iPad and iPhone.

Nepal video

Motion is definitely a big advantage for simple diagrams that depict process happening in time. Graphics Editor Lawson Parker created and animated this nifty piece on the formation of dunes using After Effects. In print we had to run a sequence of small images.

Winds1    Winds2

Winds3    Winds4

Winds5

Martin Gamache’s beautiful map of Cuba in the November issue was also simplified to the minimum expression.

New_Cuba

The iPhone map:

Cuba map

Large graphics can be shown as a whole on the iPad allowing readers to pinch and zoom through the static print version, but the experience is painful on the small screen and is not ideal for the iPad either as it doesn’t take advantage of the possibilities of the new medium to layer a break down complex content.

Last month I featured Fernando Baptista’s graphic on diving penguins:

19.Penguins_GraphicSpread2

The map, created by Maggie Smith, worked perfectly on the iPhone screen, and we run a teaser pointing readers to Fernando’s terrific interactive version for the tablet edition. While technically possible on the iPhone, the experience would be too complex on the iPhone to be enjoyable :

Penguins map    Penguins teaser

Here is what we did on the iPad:

Our Cheetahs November story was converted into a simple map of the cheetah range (known and historic) and a DPS interactive that allowed the reader to learn more about amazing anatomical adaptations of the fastest-running animal on Earth. But it was impossible to convey the amazing infographic created by Senior Graphics Editor Jason Treat and artist Bryan Christie.

CheetahsMap    Cheetas

Senior Graphics Editor Martin Gamache created a stunning spread on sequoias, the giant and magnificent trees growing on the western slope of the Sierra Nevada. The art was created by Bob Van Pelt.

Sequoias_C4

On the iPhone, we opted for a simplified map and a sequence of illustrations explaining the different parts of the tree.

YosemiteMap   President

Foliage_image    Foliage

Fernando Baptista and Maggie Smith’s gatefold on the Birds of Paradise of Australia and New Guinea …

BirdsOfParadise_ArtMapSpread_9.14.12

… and the iPad version.

BirdsParadise Map

Art doesn’t present the problem of dealing with complex layers of information, and we judge each piece individually to see if it will read well on the phone screen. Stephan Martiniere’s illustrations on the possibilities of reaching stars outside of our Solar System, published on our January 2013 issue, gave important information and striking visuals to a story with very few photographs, so they were deemed essential. They show well on the small screen. Tapping on the images reveals the caption.

Print:

stars

iPhone:

SpaceGatefold

Print (this was the opener for the story):

propulsionclosed

iPhone:

SpaceNo Caption    SpaceCaption

Finally, another example of interactivity using Adobe’s DPS. Lawson Parker’s graphic in the January 2013 issue looks at the thousand of bacteria species that inhabit the human body (outnumbering human cells by 10 to 1). Did you know there are 2,000 distinct types of bacteria behind your ears, and they are for the most part different species in each ear?

Lawson quantified the bacteria with a grid of dots following their location in the body:

Microbes

The dots would not work on the tiny screen. A very simple presentation gives the reader the chance to click on different body locations to see how many kinds of bacteria we host in each of them. Minimalist and effective.

Microbes2

Microbes3    Microbes4

All the December and January graphics were adapted in-house by Lisa Lytton’s talented team (Kevin DiCesare, Susan Lee, and Stewart Bean).

We spend months researching for information graphics, art and maps and it’s always a bit painful to eliminate really interesting content, but the reader collecting our print edition has completely different habits compared to the (probably younger) reader who is looking for information on the go. Nearly everyone carries a smartphone on the pocket or purse. We obviously plan to be on the Android platform as well. Adapting our rich content for an evolving readership it’s a really fascinating challenge as we enter our 125th anniversary year.

Data visualization at Nat Geo, circa 1900

On January 13, 1888, a group of 33 gentlemen founded the National Geographic Society in the Cosmos Club, a select private club in Washington, DC. The group included members of the city’s scientific and intellectual circles and a few prominent explorers. The gathering was vividly portrayed, years later, in a painting by Stanley Meltzoff (below). The round mahogany table can still be found in our headquarters. The central characters in the scene are Major John Wesley Powell, hero of the battle of Shiloh and explorer of the Grand Canyon, and Gardiner G. Hubbard, a prominent Boston lawyer with an aristocratic white beard. Hubbard would become the Society’s first President and his son-in-law, Alexander Graham Bell (better known as the inventor of the telephone) would succeed him in 1897 after his death.

Click on any image in the post for an enlarged view.

The first issue presented no photographs and had a featureless terracotta cover (below). The iconic yellow frame would not arrive until 1910. The magazine was published at irregular intervals and was edited by four volunteer Vice Presidents, each responsible for Air, Land, Sea and Art. By the end of the year 207 gentlemen and two ladies were receiving, as Society members, a magazine that would become famous around the world.

Graphics and maps at National Geographic go back to that very first issue. With the concept of “data visualization” becoming a trendy one in recent years, sometimes it’s good to remember that not only the concept is centuries old (going all the way back to Scottish engineer and economist William Playfair, who invented the pie, bar and fever line charts in the late 1700’s). For one thing, “data visualization” in the early days had something that is so often lacking today: clear, simple, intelligible storytelling.

Five color maps illustrated an article entitled “The Great Storm of March 11-14, 1888″. Following them, a remarkably elegant chart shows the changes in atmospheric pressure registered by different vessels and land stations over the duration of the three-day storm, and compares them with the normal value. Technical but still a good chart even by today’s standards:

01.1888_Barometer_Chart**

The maps show pressure, temperature and wind at different moments during the storm:

02.1888_Storm_map**

In addition to numerous maps (which will be featured in future posts) black and white charts continued to appear in National Geographic at the turn of the century. A March 1893 article entitled “The movements of our population”, by then editor Henry Gannet, marks the first extensive use of charts in the magazine. It was not uncommon for an article to take the entire issue of the magazine, as shown in this restrained cover:

04.March1893 Cover

The story featured multiple charts and choropleth maps, starting with this comparison of urban and rural population at each census since the first American census, which took place in 1790 (the country’s population was then enumerated to be 3,929,214).

04. March1893Page23

This very original graph shows the evolution of the U.S. population and its ethnic breakdown from the first census to the latest at the time (1890). While “native” and “colored” population increases steadily, immigrant numbers grow exponentially, with a clear majority of German and Irish newcomers. It’s a beautiful, clean design.

04.1893_Population_chart**

Another graph shows a breakdown of the population of large cities, this time less successfully. The heavy, dense grid and the patterns chosen make the chart appear to move from right to left. The perversely literal gradient moves from “white – native-born of native parents” (in white) to “white – native-born of foreign parents”, then “white – foreign-born” and finally “colored” (in black).

04.March1893Page40

The next chart (below) looks at the rate of increase of white and colored populations, a smart analysis and the best way to compare the growth or decrease of variables with very different absolute numbers. Quite remarkable for something done in 1893. I would have done the same thing today.

The sharp decrease of both groups in the 1860-1870 is no doubt consequence of the terrible losses during the Civil War.

The choropleth map at the bottom show the proportion of African-Americans to the total population, by state.

04.March1893pg32

Another chart in the same story (below) offers an interesting comparison, paired with a graph showing immigration in each decade. Despite the up and downs, even the lowest data point signals a 10 percent increase over the previous decade, as the United States continued to attract immigrants.

Overall, the entire story is a great demographic analysis by Henry Gannet (1846-1914), an American geographer and founding member of the National Geographic Society and the United States Geological Survey. Gannet has been described as the “Father of the Quadrangle”, which is the basis for topographical maps in the United States.

04.1893

The chart below appears in the May, 1898 issue. Population increase is plotted against different measures of progress. Using both wealth and wealth per capita, and area versus population are indicative of the editors’ efforts to provide good context to the story of population growth. However, the methodology or type of units in the y-axis are not explained. The series appears to have been indexed to show the percentage change since the first data point (the only way such different variables could be compared) but it’s unclear how it all is supposed to work since the different lines don’t always start at the same baseline.

04b.Sept1898Page381

Another interesting chart appears in a May 1900 article about the most recent Cuban census data. The first chart is a nice percent bar. Some of the other follow an odd spacial distribution (which doesn’t make them wrong).

04c.May1900_page205

The wavy chart below is my favorite from the early days of National Geographic. A January, 1905 article on immigration included this beautiful work showing the immigrants coming to the United Stated every year from 1820 to 1904, by country of origin. Over a thousand data points are represented visually, and all numbers are included as well. The work is credited to F. P. Sargent, the Commissioner General of Immigration, but unfortunately the draftsman producing the chart is not mentioned.

05.1905_Jan_Immig**

A detail:

05.1905_Jan_ImmigDETAIL

Looking at old Nat Geo issues is always a source of inspiration. We had the immigration graph in mind when we used the same visual approach for this 2007 chart showing sales of different music recording formats over time.

reduxforjonathan

I think our immigration chart was very likely inspired by the work of Francis Amasa Walker (1840-1897) who was the Chief of the Bureau of Statistic in the 1870’s and created the Statistical Atlas of the United States (1874), a remarkable visual work based on that census. The statistician used beautiful, elegant charts. The one in the middle in the example below will surely remind you of ours.

walker-chart-nationaldebt

Another story in the same issue, entitled “The character of our immigration” by Z. F. McSweeny, shows the characteristic heavy grid of most charts at the turn of the century. It’s a pity because they are otherwise beautiful, elegant and clear.

05.Jan1905page6

The story ends with this little oddity about inmates of different ethnic origins. I love the hand-lettering and the curious grouping of racial divisions.

Jan1905Inmates

The samples above are just a quick, random sampling from the early 1900’s and even earlier. Today, our access to new technology and formidable amounts of information has spurred the many forms of the too prolific “data viz” field. It’s good that such experimentation continues. But do a quick Google Images search for “data visualization” and you’ll quickly see the state of affairs. Clarity in the transmission of information, which is the essential mandate in journalism, is not a priority for so many of today’s data visualization designers. A simple bar chart is just not cool enough. But if you think of it, since William Playfair first plotted values on two axis with ink and paper there is really not a lot that has been invented in terms of accurately displaying numerical information with precision, clarity and familiarity (which breeds understanding) for readers.

Emperor penguins hit the gas

Awkward on land, Antarctica’s emperor penguins reach high speeds as they soar through the sea. To clear several feet of ice and to avoid the threat of leopard seals lurking at the ice edge, these amazing creatures rocket through the water leaving a trail of bubbles in their wakes and perform their famous jumps out of the water onto the safe surface. Now, scientists have discovered the secret to the penguins’ speed: they use air stored under their feathers as a lubricant to cut drag and increase speed.

As soon as Senior Graphics Editor Fernando Baptista learned about the story, he wanted to create a graphic explaining the science behind the penguins’ fabulous acceleration. Our November issue features the story with wonderful photos and video by Paul Nicklen and Fernando’s graphic, which has a unique look. Take a look (click a couple of times for the higher resolution version):

Fernando hired freelance researcher Tony Schick, who did an amazing job to get information on new science that had never been shown before. The early sketches put most of the emphasis on the animal and its speed, rather than on a detailed explanation of the physics behind it, which would become more interesting as we continued to learn about them. The version below was used to pitch the story and graphic to our Editor in Chief, Chris Johns:

To familiarize himself with emperor penguins and the unique nature of their feathers, Fernando spent a day at the Smithsonian Institution near our headquarters in Washington DC. Christopher Milensky, Fernando’s contact in the Bird Division, opened drawer after drawer of their fabulous collection of birds until they pulled out the stuffed dead penguin in the photo below. This specimen was alive in the 1950’s but it’s beautifully preserved with intact plumage.

Emperor penguins have the extremely dense, insulating feather cover you would expect in very cold climates. The unique adaptation that helps the penguins speed under water is the ability to store a large quantity of air inside their feather cover.

Each feather has a thick, rigid shaft, thin filaments on both sides and an abundance of microscopic downy feathers in between, small enough to trap tiny bubbles of air. After much insistence, Fernando convinced Mr. Milensky to take three feathers with him back to the office.

A new sketch (below) was more focused on the dive of the penguin and the acceleration provided by releasing the tiny bubbles of air. A small chart shows the decreasing thickness of the air layer as the penguins rocket upwards, but the graphic was still not explaining the details of how it all happened.

The next version adds more detailed diagrams of the feather structure. Muscles attached to a flexible membrane allow the penguins to change the position of their feathers to release air.

At this point, Fernando changed his technique approach. Having an actual feather in hand, he thought he should photograph it as an object on top of a textured background, with other elements becoming three-dimensional as well. In this version he was already trying to see what the skin cross-section would look like made of cardboard pieces. The background became a dark blue that was a better match to the blue tones of the underwater photos in the story.

Fernando painted a blue background with acrylics on top of piece of cardboard and distressed it with scratches and sand paper for that textured look he loves. At this point the feathers were plastic filaments that he made more pointy at the endpoint. The thinnest filaments were done with fibers from a nylon piece of rope.

His next version reveals the evolving focus of the graphic as we were digging deeper into the research. The graphic would be centered on how the penguin’s feathers work to trap air and later release it. The trajectory, depth and speed of the dive would be represented in a schematic diagram on top that would not compete with the main diagram.

At the end, we used a block of plasticine to represent the skin layers, with the actual feathers attached to it.

Really late in the process we realized the feathers were oriented in the wrong direction, at least if we were to continue with the logic of the left-to-right movement show in the diagram on top. We flipped them.

iPAD VERSION Fernando wanted to use traditional techniques and Photoshop, rather than After Effects or any other animation software, to create a stop-motion animation of the penguin diving and the feathers at work. First of all, we wanted to keep the beautiful look of the printed piece. In a time where most content is digitally generated, hand-made marks stand out and look so special.

To animate the leopard seal that would be lurking under the ice waiting to capture the penguin, Fernando did a really quick small-size plasticine model that he would photograph in different positions and texture in Photoshop. The model gives him volume and lightning.

And here is our penguin in diving position, ready to enter the digital world.

The textured blues and Fernando’s unique sense of lightning made for a beautiful look. The texture in the ice was extracted from a medical radiography. White pencil lines added interest to the feather.

Our design intern Louisa Cannell patiently created the scene with over 150 frames showing both the penguin and the leopard seal moving, rotating and flapping their fins. Bubbles were added in layers as well.

Below is the final print graphic in the context of the layout spread. In addition to the Smithsonian help, we worked with experts at the University of Alaska and the University College of Cork, in Ireland, to carefully review each phase of the graphic development.

Our Graphics Specialist Maggie Smith created a terrific map showing the size of emperor penguin colonies in Antarctica. The data were extracted by scientists with an original analysis of satellite imagery showing guano (bird excrement) deposits in different locations. We usually use flat vector color for very small maps, but this time we added the same texture used in the graphic for a much better integration.

The iPad feature works almost like a game. Moving the finger across a slider, the reader can control the movement and speed of the penguin as it dives, releases the air to accelerate and narrowly escapes the attack of the leopard seal. See it at work in the video below.

Death of Ötzi the Iceman: A graphic novel in National Geographic

One of the biggest pleasures (and challenges) of working at National Geographic’s graphics department is to be able to art direct amazing artists from all over the world. Data-driven graphics, cartography and diagrams share the space of the magazine with paintings of historical events and depictions of the natural world. A long tradition carried over for 124 years that has showcased masters like N. C. Wyeth, Louis Agassiz Fuertes, Charles Knight, Ned Seidler, James Gurney, Bruce Morser, Jon Foster and so many others.

Most of our contributors specialize in scientifically accurate and detailed illustrations of paleontology, archeology, geology, technology, natural science and so on. Each of these fields has its own specialists.

But sometimes we need a special edge to keep us fresh and even surprising, taking a leap of faith to try out artists that haven’t done scientific illustration but whose skills are unique. One such case is Alex Maleev, a Bulgarian comic book artist well known for Marvel series such as Daredevil and Spider-Woman. For our November 2011 issue we decided to make a new story on Ötzi the Iceman and the new hypothesis about his death based on a recent thawing and autopsy. We knew we could approach the art as a true “noir” graphic novel: What happened during the last few minutes of Ötzi’s life 5,300 years ago, 10,500 feet high in the remote Italian Alps? Who murdered him, and how?

Here is the finished piece (click a couple of times for a hi-res version). The version with text is at the end of the post. Unusual for National Geographic to say the least! But still informed by the advice of multiple experts regarding the clothes, weaponry and landscape:

My brother Martín, an avid comic book collector in Spain, had alerted me about Alex Maleev’s cinematic and realistic compositions, his mastery of human figure, and the edgy, dark, textured scenes. His paneled scenes and rhythmic composition create the motion and drama we were looking for. See some of his Marvel work (copyright by Marvel):

Like everyone else, we had covered the Iceman before, most recently about 6 years ago when it was discovered that Ötzi was killed by an arrow to the back. In that occasion, we used the more traditional illustration style of Kazuhiko Sano, the Japanese master that created so many iconic illustrations for National Geographic in the 1990’s and early 2000’s.

But this time we were looking for a true paneled graphic novel approach. The following images show a bit of the process of working with an artist in the magazine.

The fist rough sketch (below) had 4 panels with a nice variation of camera angles showing the basic premise: At some point during his climb, Ötzi had probably stopped for a quick meal (we know he was killed very shortly after eating based on the undigested food found in his stomach). There, the new theory goes, he was ambushed by an individual or a group that not only shoot the most famous arrow in history at him, but also hit him in the head with a blunt object. The perpetrator/s fled the scene without taking any of Otzi’s possessions, and after retrieving the shaft of the arrow (locals would have known other people’s highly prized and personalized items, revealing the murderer).

The panels are nice, but the identically sized boxes seem static and don’t work together. We needed more rhythm and variety of sizes, and maybe having something go across the gutter to integrate both pages more fluidly.

A second sketch moved nicely in that direction, but still a bit timidly. You can see more energy and motion:

The next iteration, however, started to look confusing, with all images blending into each other. At this exploratory phase, we are happy to see really quick roughs to set the composition.

Forthe next version, I asked Alex for a more organized layout that would place the second step of the sequence (Ötzi being hit by the arrow) in the second page for a more integrated spread. A closeup of the arrow would add drama and pace:

But I still knew something was missing. Our A-HA moment came when Design Director David Whitmore and I went through the layout David was creating. The well-defined blue and gray color palette of the photos took us back to some of the samples we had seen of Alex work. The image below was not only an example of a color scheme that would be ideal for the story. It also made us realize the entire layout was in itself very cinematic.

The bold photographs (some examples below) follow each other with dramatic zooming-in and out, black panels and short text call-outs that follow each other throughout the pages, sequencing the images like a comic book.

So we suggested Alex to go for well structured rectangular panels on a black background and a blue-gray color palette. When we saw the next sketch, we knew it was the way to go:

Alex developed the panels further but I thought the panels sizes, relatively similar to each other, made it still a bit static. In a quick Photoshop rough, I played with the panels and indicated Alex areas where each panel could expand to have a variety of more vertical, more horizontal and larger/smaller images.

Here is the finished page (see the nice hi-res, color corrected at the beginning of the post):

Alex is a fantastic artist and easy to work with. Below is another illustration he recently finished for us: this time a full spread opener scene for a story on the rising sea levels of Northern Europe thousands of years ago, for our December 2012 issue.

Charting weather disasters

Sandy was a painful reminder of extreme weather events becoming more frequent all over the world. Our September issue featured a story on the topic with this original chart by Senior Graphics Editor John Tomanio (click on it for a detailed view):

The chart shows all weather events since 1980 that caused at least one billion dollars in damages. We chose to measure all events in terms of economic damage to have comparable data for very different events, which are color coded by type (drought, flood, etc). The events are represented by half circles, an unusual chart type seen more often in election charts. I anticipate professor Alberto Cairo (see his terrific blog The Functional Art here) may not be thrilled with it!. As he explains, readers are used to compare visual differences with charts that grow in one dimension only (as a bar chart) rather than two (as any area chart like a pie chart or this one). I fully agree with that but in this case the overall pattern of distribution over time is more important than the individual values: We are seeing more extreme events, and more intense, in recent years. That is apparent in a quick look and the quick take-away message the chart tries to convey. Area charts tend to visually de-emphasize the differences between different values, and that was helpful in a graphic that needed to concentrate so many data points in a small space.

The half circle format provides a common baseline to all events in each year, a terrific idea John had when full circles proved to look too disorganized in the page.

EARLIER VERSIONS: John’s analysis of the 32 years of $1 billion weather disasters
from NOAA led to this first approach: the first 16 years of data (from 1980 to 1995) showed 46 weather events, while the next 16 year period (1996 to 2011) showed 87 events. John roughly plotted the events on two maps, each representing the two time periods. Although subsequent visual approaches would vary quite a bit, this original analysis informed the structure of all versions, comparing the two
time periods. (The “Why is weather extreme?” panel eventually moved to
another part of the story.)

This rough is a bolder, more graphic approach that still geo-locates the weather events on the small maps at bottom. While this proved to be the quickest read of all the versions, John wanted to explore another idea that added a time element to the weather events.

Below is the first attempt of roughly plotting all the weather events by the month and year which they occurred. We liked to see how the frequency of events builds over time, but while the center of each circle corresponds to the month and year of the event, the range of circle sizes made it hard to see that. It needed more order.

By using semi-circles, the final version (first image in this post) makes much clearer to see how the weather events build year-over-year. We called out the ten most expensive events, and added a bit of analysis. The graphic proved popular with the readers, and John keeps receiving requests for copies. A detail is shown below.

John added the exquisite sense of typographic design, color balance and superb editing that is typical of his data graphics. The clear structure of the graphic, comparing two consecutive time periods, is the basis for its success.

IPAD: Our iPad version (see screen grab below), took full advantage of the device’s ability to expand on any given data set. Readers can touch each of the vertical columns and a full scrollable list of all the events that happened that year appears on the left side of the screen:

Artist profile: The incredible Kennis brothers

Few people, if any, have impressed me more during my career than the Dutch twin brothers Alfons and Adrie Kennis, also known as Kennis & Kennis. Specialized in meticulous, extremely accurate and awe-inspiring beautiful paleontological reconstructions and paintings, the talent of the Kennis brothers is as amazing as their personalities.

Adrie Kennis, Wilma, and Alfons Kennis

Alfons and Adrie started publishing in the magazine in the early 2000’s, brought in by former Art Director Chris Sloan (see Chris’ new company here). I remember vividly the lasting impression their series of paintings of extinct mammals of the Jurassic left in me, a couple of years before I started working for National Geographic. I wanted to meet them right away!

Adrie and Alfons work simultaneously in all their paintings in an organic process where it’s impossible to know which one of them worked in the different phases or areas of a canvas. Their feature textured white backgrounds are beautiful and the exquisitely lightning and sculptural feel of their figures reveals their technique: they first build every animal they paint as a three dimensional, small-size, clay model for reference of volume and lightning.

As it turns out the Kennis brothers are terrific sculptors and their anatomical knowledge is sought by natural history museums all over the world.

Most paleo-reconstructions of extinct hominids feel stiff and lifeless to me, but not theirs. The emotion and expression of their figures is unique. As examples, see their “Lucy’s baby” below. The playful 3 year old Australopithecus afarensis was our cover in November, 2006. Below it, the weathered face of a Neanderthal male:

I was fortunate to work directly with the Kennis brothers in the reconstruction of a female Neanderthal we created for our October 2008 cover. The story had it all. Terrific science (the neanderthal genome was being decoded, offering new clues), picturesque fossils sites in Siberia and Spain and the unfolding drama of a species being cornered into extinction in Europe as homo sapiens quickly occupied their former range in Europe.

Alfons and Adrie worked for 6 month on our female Neaderthal, in a meticulous process that started with the reconstruction of an entire skeleton based on the existing fossils of different specimens scattered around the world. I art directed from Washington, and visited in their amazing studio-warehouse near Amsterdam during the process.

Since the best existing reference for the thorax was a male specimen, Adrie and Alfons painstakingly disassembled a model of the thorax, shaved off a few millimeters off each rib and each vertebra and put it back together to obtain an appropriately sized smaller female thorax.

We worked closely with scientists at Duke University, the University of Washington in St. Louis and the Natural History Museum of London for accuracy. Despite the enormous amount of work involved in creating a life-size, articulated and scientifically accurate skeleton, at the end it would not be visible. The purpose was to serve as a base for the external layers of the body, knowing that the proportions given by the bones were right. The next step was to add all the muscles and skin, in layers of plasticine clay:

And this is the external appearance of the clay model before casting it into the final silicone figure:

The finished model incorporated real red hair of Scottish Highland cattle (DNA evidence pointed to many neanderthals being red-haired) and a carefully crafted outer layer of skin that included wrinkles and pores the Kennis brothers obtained by transferring skin impressions of their own faces into the model. Alfons and Adrie finally added black pock marks, a tan face tonality and reddened cheeks after studying the faces of Mongolian nomads and other populations that spend a lot of time outdoors in climates as cold as Europe was when it was inhabited by Neanderthals.

Being National Geographic, we couldn’t just photograph Wilma (our reconstruction’s nickname) in a studio. The Kennis brothers took her all the way to Spain in the back of their truck, and I joined them there along with photographer Joe McNally and our Creative Director to do a photo shoot next to the cave where some of the evidence was found.

The adventures of the photo shoot were best narrated by then Design Editor Oliver Uberti in his former blog. Among other things, we were evicted from a National Park by guards for conspicuously carrying a large naked female figure without permission to do so, and chased by a wild bull on the way to the cave!

And all of that just to show a cover and two other pictures in the magazine, plus the accompanying graphic I did with artist Bruce Morser. You must think we are crazy, and we do feel that way sometimes!

In case you are curious, here are three of the many sketches the Kennis brothers did at the beginning of the process. The first takes were too feminized and idyllic to my taste. We wanted a neanderthal female that was defiant and strong, as some of the new scientific evidence pointed to the fact neanderthal may have participated in hunting along with males, unlike homo sapiens.

I’ll finish with another painting by Alfons and Adrie for a more recent stories on extinct Australian megafauna. As in any art direction project involving this odd pair of geniuses, there were some heated arguments about the direction of the project, with me and former Graphics Editor Hiram Henriquez working on it from Nat Geo’s side. It’s not unusual for them to refuse ANY changes to their artwork but I see that as an expression of how deeply they care about the integrity of their artwork and the scientific accuracy behind, and we always ended up agreeing. Can’t wait to do it again!

Check the Kennis brothers’ website here, I hope you’ll love their work. Also, here is a video where they narrate their process for a reconstruction of Otzi the Iceman. This one was not commissioned by National Geographic, be we used a picture of the model in our November 2011 issue.