Combining visualisations and text – What is possible?

As I mentioned yesterday I created OurWorldInData somewhat accidentally when I was doing research for a book on global development that I planned to write. I will still want to write this book. It will visually present the empirical evidence that I am showing on OurWorldInData but I want to add my narrative to this. The website is presenting the facts about the world the book is showing how I put these views together and what we can learn from this.
To achieve this I have to find a way of combing data visualisations with text. I have collected some example to learn from how others have done this. I came across some great work and I hope it can be an inspiration for others to create their own work. Also, I feel that there must be more out there. What am I missing?

Academic Journals – Columns to combine large and small visualizations

Journals often put a huge emphasis on visualizations. In fact publications in Science or Nature are often completely structured around a couple of very good visualizations that present the main finding.

The layout of these journals is mostly structured by 2 or even 3 columns. One advantage of this is that wide visualizations can be combined with smaller visualizations. The screenshot from a recent paper that shows that the global forest area is now increasing shows an example.

Screen Shot 2015-06-01 at 22.18.17
A screenshot of a paper in Nature Climate Change.

This is also this LaTeX template that creates this layout for you.

Tufte Style

Edward Tufte – widely respected as an authority in data visualisations – uses a similar layout in his books. He combines one wide main text column with visualizations that are either as wide as the entire page, or wide as the text column, or are small and fit next to the text. This also allows a combination of different sizes but I’m not convinced there is an advantage over the layout in academic journals.

Tufte photo0
An example of the layout used by Tufte. From: Edward R. Tufte – The Visual Display of Quantitative Information (2001)

There is also a LaTeX template for this and the physicist David McKay uses it for his absolutely fantastic (and free!) book on sustainable energy. So you can see for yourself if this layout convinces you.

Merging text and visuals

Some authors take visuals and make them part of the text flow.

A first example is Oliver Byrne’s classic edition of Euclid (freely available here).

euc-I-5A modern example are Randall Munroe’s cartoons.

Screen Shot 2015-06-01 at 22.47.02

Overlaying visuals with text

This style that is often used in infographics merges text and visuals by using the visual as a canvas on which text is highlighting and explaining some aspects.

thumb_IMG_3931_1024This example is from Sandra Rendgen’s very inspiring Understanding the World: The Atlas of Infographics.

Mixing text with interactivity

I’m pretty tired today because I spent way too much time with “Explorable Explanations” yesterday night..
These online documents allow you to manipulate visualisations which in turn manipulate the text. You have to go and see these if you haven’t. A great example is Brent Victor’s Ten Brighter Ideas, a text where every claim expressed in words is backed up by data that becomes visible on mouseover. He writes: “Digital documents aren’t subject to the constraints of paper. We should hold modern propaganda to a higher standard. By all means, be catchy, eloquent, passionate, and inspiring. But we must be able to dive through the pretty words to see the data and sources beneath.”

He also wrote “Explorable Explanations” with which he coined the term for this genre.

And one more by him: Scientific Communication As Sequential Art where he rewrote a paper on network theory published in Nature made it into an explorable explanation.
A list of many explorable explanations can be found at
Here is an explanation of OLS regression and here is an explorable explanation of how small differences in preferences lead to segregation.


Which beautiful and useful ways of combining text and visuals did you come across? Share it with a comment here.