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.

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.

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.

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:

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.

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.

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.

And here are all 39 species in the wild:

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.

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

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…

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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.

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.

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.

2012 conference

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.

2012 exercise at the Tomb of the former King of Navarra

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

Working in groups

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.

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

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!

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:

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:

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

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.

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:

Here is the video:

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

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.

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.

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.

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.

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

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.

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

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.

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

The iPhone 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:

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 :

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.

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.

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

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

… and the iPad version.

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:

iPhone:

Print (this was the opener for the story):

iPhone:

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:

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.

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.

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

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:

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

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:

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).

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.

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).

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.

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.

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.

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).

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.

A detail:

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.

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.

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.

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.

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.

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.

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.

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:

For our tablet editions, we rigged and animated our 3D model to overlay it on top of a beautiful ultra-high-speed camera recording of a cheetah run in this video. The experts had never seen such amazing detail and were thrilled.

There are fewer than 10,000 cheetahs surviving in the wild today. The world’s fastest runner is an amazing creature, elegantly built and evolved to produce thundering bursts of explosive speed, rather than for resistance. As told by writer Roff Smith in the article:

“Put a cheetah and a Lamborghini side to side on a freeway, and it will be an even-money bet which will smash the speed limit first. Both can do zero to 60 in under three seconds, but the cheetah can crack 45 miles an hour in the first couple of strides”.

 What adaptations make cheetahs such amazing runners? Jason wanted to create an illustrated infographic that would convey both the anatomical traits and the raw, dynamic power of a speeding cheetah.

From the beginning, we knew we wanted the sophisticated anatomy illustration of Bryan Christie’s studio, a frequent contributor of National Geographic. Bryan and his senior graphics editor/artist Joe Lertola (formerly of Time magazine) are two of the most respected names in graphics. Over the years, Bryan has developed a unique, truly beautiful and elegant style in anatomical 3D renderings of the human body, with transparent textures, amazing detail, beautiful poses and a unique mastery of light.

But in this case we were facing a big problem. Complete 3D models of the human body abound but no one had attempted to create an accurately modeled and articulated skeleton of a cheetah. In addition, we needed major muscle groups, organs and hair. It was obviously a massive undertaking. Jason decided we needed to find a Museum or institution that owned a real cheetah skeleton and seek their collaboration to CT scan every bone. Easy to say!

The first pencil and computer sketches (still showing a placeholder image, like the examples below) show the basic aim of the graphic. We wanted a big, dynamic and uncluttered rendering of the running cheetah highlighting the anatomical traits contribute to speed. Two simple charts would compare the fastest animals and show the phenomenal speed acceleration of cheetahs. With the small size of our magazine, it’s important not to overload graphics with too many secondary elements or too much text.

A few looks at white and black (below) backgrounds made clear they would look too clinical and lifeless, resembling an X-ray. See also the different attempts to find the right placement for the charts. We ended up making them narrower.

We decided a deep brown would look more inviting and more attuned to the earthy color palette of the photos in the story. The skeleton here was still a placeholder.

The project would have been impossible without the generous collaboration of the Smithsonian’s National Museum of Natural History. Kris Helgen and his team agreed to scan one of their 8 specimens, giving Bryan and Joe the detailed raw models they needed to render every bone. Needless to say, they were delighted to get such detailed 3D scans after we had even considered the possibility of asking Bryan to model the entire skeleton, something that would take many weeks.

Bryan’s intern Victoria assembled all the individual bone scans into a complete skeleton. She also gathered enough reference material on the musculature anatomy for the cheetah to be able to build muscles that attached to selected bones. As always, the sketches were sent to our experts/consultants to ensure accuracy at every step of the process.

Jason and Bryan went back and forth to create the most dynamic posture. This one had great motion but I thought the curvature of the back and the legs position made it look too much like a kangaroo!

Finally, we settled for this pose. Bryan and Joe kept working on the rendering of the different organs and muscles at the same time :

Here is the normal view of the skull:

This image shows the skull with the polygons flipped. That means we see into the skull as if the front face is completely clear and the back face is painted gray. You can see the amazingly detailed structure captured by the scans.

Bryan created a beautiful transparent texture for the bones. The grainy roughness and luminosity give it an other-wordly feel…

… and Joe worked on creating nicely detailed fur for the cheetah. The hair orientation was essential to convey speed.

I thought  Bryan and Joe made the organs, bones, muscle and fur overlap beautifully with a mix of detail and impressionism that really captures a snapshot of the animal running at mind-blowing speed. Motion blur effects were applied selectively. It’s full of energy. The color palette is sophisticated and as restrained as the spare use of text. Jason did a wonderful job handling the research, design and art direction.

Adding depth and intensity to the eye of the animal gave it personality and focus. The readers immediately connect with that determined, focused gaze. Even at full speed the head barely moves, always fix on the prey.

To produce the animation (see it at the beginning of the post), Bryan created the rig that he used to pose the cheetah. The synchronization with the video had to be seamless.

I would love to read you comments. If you are curious to look at the whole story in our iPad edition, it’s a great read with wonderful photography and video. Or of course you can always run to the newsstand and while you are at it, imagine what it would be like to accelerate like nature’s king of speed!