New tools: Data Illustrator and Charticulator

Anyone interested in creating their own data visualizations should be giddy with delight with the quickly growing number of tools available to create them without any need for programming skills, and in most cases for free: Tableau, Flourish, Datawrapper, RawGraphs, Chartbuilder or QGIS (for mapping) are some of the best, and the list goes on and on. I’m convinced in a relatively short time drag and drop tools with be as powerful and flexible as D3.js and other developer tools, making data visualization accesible to everyone.

The exciting news is seeing two software giants entering the field with new web-based tools: Adobe launched Data Illustrator a few months ago in a collaboration with the Georgia Institute of Technology, and Microsoft Research is behind the just released Charticulator. Both work very intuitively, allowing the author to bind multiple attributes of data to graphical elements. They are indeed powered by D3.js, among other libraries.

Both offer introduction videos in their hope pages. Here is Data Illustrator:

And here is Charticulator:

 

The tools offer tutorial sections and multiple step-by-step videos in their galleries; and they link to the research papers describing the tools, which are worth reading (Data Illustrator, Charticulator).

Creating complex visualizations like the chord diagram below seems ridiculously simple in Charticulator, and the same can be said of Data Illustrator’s visualizations. See the video:

This is not a review as I have just started playing with them, but on first look both tools are impressive. It’s still really early in their development, but if Adobe and Microsoft throw their mighty resources to support and improve them, we can expect great things in the near future. Perhaps one day Data Illustrator could be embedded within Adobe Illustrator, allowing designers to work fluidly and easily between D3 and Illustrator without leaving the graphical interface. And Charticulator could integrate into PowerPoint. Stay tuned!

 

 

The Forbidden City: infographics by The South China Morning Post

The always amazing graphics department of the South China Morning Post has been publishing a series of stories about the Forbidden City of Beijing. It’s one of my favorite project this year. The whole package by the Hong Kong newspaper is a great combination of art, simple and elegant explanatory graphics, and engaging, well researched storytelling. It paints a vivid portrait of life inside the palace complex where 24 emperors of the Ming and Qin dynasties ruled China for nearly 500 years (early 15th century to early 20th century). The combination of rich details in the graphics, a loose hand-made illustration style, and the unusual bold color choices in a historical feature make it a visual feast. Here are a few samples. Click for larger images (˙© The South China Morning Post):

The Illustrated opened are really nice as well

The series was created by Marcelo Duhalde and Marco Hernández, in collaboration with Pablo Robles, Alice Tse, Darren Long, and Tom Eves. It has two main chapters with their own illustrated sub-sections:

  1. The Forbidden City’s Unique Architecture

2. Life inside the Forbidden City

It’s a good example of a well integrated package entirely created within a graphics department. The few interactive or animated elements are used judiciously, only when needed.

I’m hoping the series continues with new chapters, and I would bet the authors have thought of compiling the whole package in a book since the design and topic naturally lend to it.

The Forbidden City has always been a favorite topic ever since I created a National Geographic poster on the topic back in 2008, including researching in situ in Beijing. I researched, designed and wrote it, and the illustrations are by the great Bruce Morser, the most precise pencil illustrator I’ve ever worked with.

Here is a page that compiles many of the best online infographics of the South China Morning Post, and this a remarkable compilation of graphics as they were published in print.

Updated samples in our website

In the last few days we have been busy updating the gallery section of our website with lots of additional samples. It had not been updated in a long time. The new images are a mix of recent and older graphics, including some of the graphics done during my years at National Geographic magazine (For those Nat Geo graphics, sometimes including collaboration with other researchers and artists).

Feel free to navigate to see a range of different types of graphics including charts, diagrams and maps. You can also look by subject or technique, and see examples of branding and graphics style guides from our consulting side. Here are some of the newly uploaded samples, in no particular order (here and on the website, click on any image for a larger version):

We are working on more extensive changes to our website, with a fully responsive and redesigned site coming up before the end of the year. It will include examples of interactive graphics and animations, and this blog will be part of the main site. In the meantime, if you are interested in additional samples or want to get in touch, drop us an email to contact@5wgraphics.com.

How America Uses Its Land

We just came across a really engaging graphics feature by Bloomberg.com. How America Uses Its Land, by Dave Merrill and Lauren Leatherby. It’s well sourced and nicely designed. As the intro states, “The 48 contiguous states alone are a 1.9 billion-acre jigsaw puzzle of cities, farms, forests and pastures that Americans use to feed themselves, power their economy and extract value for business and pleasure.” There are quite a few surprises for the reader, such as the massive amount of land used as cow pasture/range (see map above). 41 percent of U.S. land in the contiguous states is used as pasture or cropland used to produce feed.

Here is the overall distribution of land uses:

Forest and timberland take another large chuck of the space. Did you know a company called Weyerhauser Co. owns or controls an area of timberland equivalent to the size of West Virginia?

 

 

Maarten Lambrechts’ list of 2017 visualization lists

Here is an extremely useful resource for anyone interested in graphics and data visualization. Maarten Lambrechts is a data journalist, designer and visualization consultant from Belgium. He creates great visualizations and is a speaker and instructor (check out his free data journalism training videos in Learno.net).

He has compiled a List of 2017 data visualization lists, which links to the best work created in 2017 by many of the newspapers and organizations that are doing the best graphics. It’s great to see the work of the NY Times, Washington Post, Wall Street Journal, NPR, Reuters, The Guardian, The South China Morning Post, and many others in one place. Luckily, more and more news organizations are presenting these compilations at the end of each year. They involve a lot of effort and quality journalism, and its great to discover those we missed when they were first published.

The list also includes examples made with tools like Tableau and Carto, charts from the World Bank, satellite imagery and a wonderful compilation of the best illustration published by The New York Times in 2017.

Thank you Marteen. Make sure to visit his site!

 

Latest D3 Work

C0NIeg-XcAQtL6C.jpg-large.jpeg

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

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

The New Tableau 10

exoplanets

Our Infographics and Data Visualization workshops always include spending a few hours using the free Tableau Public software to create interactive data visualizations with charts and maps on the web. Tableau is a great first step for those interested in data visualization online since it’s fairly easy to learn. The newest version (Tableau 10) was released three months ago and has really nice improvements including a long overdue addition of device responsiveness to visualize data across multiple devices.

We use Tableau during the workshop because it doesn’t require the coding skills necessary to use sophisticated tools such as D3.js, the tool behind many of those amazing interactives of The New York Times and others (although today you can code a nice data visualization in R, for example, with just a few lines of code). Tableau is a great exploratory tool that lets you quickly evaluate different options to visualize you data. We actually use it for print graphics as well after saving files as PDFs.

Tableau is a powerful tool but also a great way of starting to think about key concepts in interactivity: about how to use filters, buttons, navigation tool tips or exploratory dashboards to let readers dive deep in your content. It’s used by thousands of corporations as a Business Intelligence/Analytics tool to visualize their data. The free version is a useful tool for individuals and organizations interested in making data public (remember that with Tableau Public you can’t save files locally, they are all saved to Tableau server and available for anyone to see and to download, including the datasets used. You may prefer the Tableau Desktop version but it’s not cheap).

Some of the new features in Tableau 10 include:

  • Device responsiveness. You can now generate visualizations optimized for desktop, tablet, and mobile phones. Although far from perfect, it’s a big step forward in Tableau.
  • Ability to connect to data stored in Google Sheets. You can set to your visualization to refresh automatically every day, if the underlying data in your Google Sheets file changes.
  • A “highlighter” feature gives users added possibilities to sort, find and highlight specific data for ad hoc views and comparisons.
  • Cross-database joins: you can join different data sources within the program.
  • Custom Territories: Create custom areas in maps using the data built into the geocoding database.
  • And finally, a cleaner interface with new iconography, fonts and colors, sporting a cleaner, less cluttered look that I find much nicer.

In addition, the just released Tableau 10.1 includes:

  • JSON support. JSON is common file format for web based data, widely used for API-returned data. This means you can download web-based JSON files and start to visualize them right away.
  • Automatic clustering is very interesting. Tableau helps identifying interesting patterns from the data by automatically generating clusters based of the groupings/categories specified by the user.
clusterinvestigate

Clustering feature. GIF from Tableau Public website

Tableau’s website include great learning resources. If you are looking for a good book to learn it, here is the one I found most useful.

Crime in Milwaukee 3