The Design of Information

Information Design

Posts in the ‘Interactive’ Category

Baby Name Voyager

We appear to be past the point of needing to name new babies in our family, but I still like the interactivity of the Baby Name Voyager. You could consider this a more specialized cousin to the Google Ngram Viewer. In fact, it’s interesting to compare results from the two. You would expect the increased usage of a name to correspond to an increase in print, perhaps with a time lag to give the babies time to grow up before they become newsworthy. Does it play out?

It appears that I had a good run in the 70’s and 80’s but have dropped sharply since then. Those were good years for me – hmm…Baby Name Voyager "Erik"


Ballistical Analyisis

I came across this visually arresting depiction of gun murders today, thanks to a tip from my friend, Kimball. It was created by the folks at Periscopic, whose mission is to “do good with data”. The animation packs a punch, and when it’s finished, you have a number of options for diving into the data, including getting a sense of the individuals affected.

The arcs in the graphic show how long the murdered person might have lived, trying to give a sense of “stolen years”. I was a bit skeptical when I saw some of the lines showing a life expectancy in the 90s, but reading the notes on methods and sources, I see that each individual line is based on a the age distribution of deaths (not the average life expectancy). Meaning that there would logically be a few people that would make it into their 90s (and some that would die at 50).

I know this is a topic on a lot of minds right now. Not sure where I come down on gun control, but I do find that this exploration raises a lot of questions in my mind. Like a good data visualization should. Find out what to include in a resume if you’re looking to apply for jobs.

Gun Murder - Periscopic

In an interesting coincidence, the original dataset was researched by Jerome Cukier, who is helping me with a project right now.

Better Life Index

Here’s a nice interactive example of making data friendly to the average human. What country would you like to live in? With the OECD Better Life Initiative, you can pick what you care about (Environment, Work-Life Balance, Health, etc.) and see which countries rise above the rest. Another interactive wonder from the brain of Moritz Stefaner. He’s the same designer who created the Notabilia Wikipedia project that I posted about a while back. Looks like it’s time for me to move to Australia.

OECD Better Life Index

Bubble Bandwidth

Palo Alto Networks launched the data visualization that we created yesterday with the release of their Application Usage & Threat Report. It’s a depiction of network traffic collected from 3,000+ organizations. The visualization gives you a sense of the applications that eat up the most bandwidth and represent the greatest risk. There are many ways to slice and filter the data, facilitated by the capabilities of the d3.js library. Many thanks to Jérôme Cukier for his coding expertise to bring the concept to life.

Palo Alto Networks data visualization

Palo Alto Networks data visualization categories

Another piece of the project was to create this related infographic.

Palo Alto Networks App and Threat infographic

I very much enjoyed delving into the world of moving spheres. What is it about us that is drawn toward playing with bubbles? Looking forward to more projects like this.

Budget Bubbles

Came across this fascinating interaction from the New York Times, doing research for a client project. It was interesting just as a static image with a few rollovers, but then I clicked some of the links up top (types of spending, changes) and things started flying.

2013 budget bubbles

I like how it invites interaction. The playfulness of the motion may be a little distracting from the data, but I think it does make it more “sticky”. Try clicking back to the “all spending” tab after exploring the others – interesting to see that the individual bubbles don’t exactly fall back into their original places. I guess the budgeting process is messy like that.

Thanks to Jim Vallandingham for the link.

Current Visualization

Fast Company magazine recently featured this beautiful rendition of the ocean’s currents on their blog. It was put together by the visualization geniuses at NASA’s Scientific Visualization Studio and can be viewed in a variety of formats (including an iPad app).

It’s worth downloading one of the high resolution video formats from the NASA site.

Datasets changing mindsets

Hans Rosling is an entertaining and compelling presenter. He uses the now-Google-owned Public Data Explorer technology (developed by his organization Gapminder), to take you on a journey testing your concept of the developing world.

I recommend watching him in this TED talk delivered to the U.S. Department of State:

Examining Darwin examining “On the Origin of Species”

Stumbled across this interesting interactive work of Ben Fry’s – a great example of visualizing large amounts of data in a cohesive way. He has visually shown all the changes made by Charles Darwin to his classic On the Origin of Species over six different editions. The book went from 150,000 words to 190,000 by the sixth edition, with some interesting edits along the way (including a significant addition to the closing paragraph).

Ben Fry Origin of Species

I think what I like most about it is the clear illustration of how the scientific process can lead to continual learning and refinement of ideas. Keep your mind open. Take a look.


Fishing for Understanding

I don’t think I’ve ever found a reasonable use for a coxcomb chart, until now. It seemed to fit the bill for a recent project for The Foundation Center. With funding from the Rockefeller Foundation, they recently published a synthesis of success factors for small-scale coastal fisheries management in developing countries. The Foundation Center hired us to create an interactive visual representation of their findings.

It appears that fisheries have to balance a number (twenty, to be precise) of factors on different levels to be successful. We ended up using a coxcomb chart (or polar area diagram or rose diagram) as the base for an interactive presentation built on raphael.js. The interaction allows you to visualize how different stakeholders might prioritize the twenty factors, as well as drill down to get more detail about each of the factors.

The coxcomb overlays do a particularly nice job (I think) of showing where there might be gaps in perspective that would encourage you to bring another stakeholder to the table. Overall, I think the impression is that there is a lot to keep tabs on if you are managing a fishery.

Fisheries viz

Game On continues to push the envelope on incorporating information graphics in a multi-faceted online experience. Baseball is probably more stats-driven than any other sport out there, and MLB’s Gameday capitalizes on that with more ways of looking at a game than you can shake a (Candle)stick at. They’ve done a fine job of incorporating color, motion, tables and graphs, along with images of the field that make you feel like a part of it all.

A stat new to me is the “nasty factor” for pitching.  According to the website, it takes into account velocity, pitch sequence, location, and movement, while adjusting for the pitcher’s specific experience with the current batter. And that’s just one of many stats you can explore during a game.

I wonder if the teams are using this to help them win games. Go Giants!


In-Game Infographic from Major League Baseball


Google’s Ngram Viewer

I met someone recently who pointed me to an interesting tool – apparently an outgrowth of Google’s efforts to digitize anything ever printed. You can track the frequency of any words that have appeared in print over the last many years.  Try it.  If you are competitive, like I am, you’ll find it hard to stop. Tell me your favorite comparisons.

Google Ngram Art and Design

Information Machine

I bookmarked the Wolfram|Alpha site almost two years ago and just recently checked back. It has become quite a sophisticated resource – they call themselves a “computational knowledge engine”.

For example, enter the term “27 people” to calculate how big a room you need to seat 27 people in 10 different ways. You’ll also get the approximate amount of heat they will generate and the probability that two people in the group will share the same birthday.

Also handy for hangman or Scrabble (try entering “_on_u_a__ou_“) or for hearing what a particular chord or scale sounds like. The D minor bebop hexatonic scale, for instance. And that’s just scratching the surface. I’ll have to try the iPhone app.

Wolfram Alpha D minor bebop hexatonic scale result

Mapping your connections

Just discovered LinkedIn InMaps today. A good example of interactive information graphics that can lead to discovery. Interesting to find the connections that bridge groups. Like the “I didn’t know Tony knew Larry!” moment.

InMap on LinkedIn - Tony's connections

This fact would have been discoverable just browsing through my connections on the standard LinkedIn site, but seeing the whole network mapped in one place removes a lot of barriers to this kind of discovery.

The zoomed-out view shows an accurate picture of my circles – the smaller clearly defined orange is a networking group I’ve been closely connected to for over a dozen years, the dense multicolored cluster opposite are my various church connections, with family mixed in. In between are various work and school connections that are scattered and less well-defined.

LinkedIn map

It’s not hard to create your own. Try it here. I’m curious to see what other people’s networks are shaped like.


Notabilia – A Tree Grows in Wikipedia

Moritz Stefaner is a freelance designer in Europe creating some beautiful and data-rich visualizations. I came across his Notabilia project yesterday, after following a lead from someone at The Leonardo.

It maps the collective editing process for Wikipedia articles up for deletion. Right-leaning red segments are votes to delete; left-leaning green ones are votes to keep. The shape of each branch is an excellent mapping of the shape of the discussion. And the collection of 100 branches makes a lively, energetic whole that begs to be explored.

Projects like this excite me about the power of information design to bring things to light that aren’t easily discernible any other way.

Notabilia Tree Image from Moritz Stefaner

Startling Statistics

“Things change. Now what?”
That’s the tagline for a new website examining statistical indicators of how life in the U.S. has changed over the last few decades: Threestory Studio created all the graphics and designed the site. The aim of the site is to wake people up and promote dialogue about life “as we know it”. I use quotes there because who is “we” and what do “we” really know are all part of the debate. I hope you’ll take a look at the site and leave a comment or two.

Sweet Cello

I’ve had my head down lately, working hard on a number of projects, so I haven’t done much posting to the blog, but this put a smile on my face so I knew I had to share it.

Alexander Chen, Creative Director at Google Creative Lab, put this together back in 2011, but I just discovered it today. It’s an interactive visualization of the Prelude from Bach’s Cello Suite No. 1 – one of my favorite pieces of music.

Here’s a video of it. You can also play with the interactive version and tangle yourself up in the strings a little.

Strings: J.S. Bach – Cello Suite No. 1 – Prelude from Alexander Chen on Vimeo.

Thanks to Jon Schwabisch for mentioning Alexander’s site and making me smile.

The Path of the Eph

Thanks to my watchful nephew Christopher P. for pointing me back to my Alma Mater to see this nice interactive visualization linking college majors to career choices.

Williams majors to careers

It was put together by Williams College math students and their professor using CIRCOS visualization software. Rolling over the thumbnails allows you to isolate the paths from individual majors to careers. Williams Art/Music majors Nice use of colors to organize majors within larger groupings. I majored in Music (Composition) – not sure if I’m represented by the path to arts/entertainment, writing/communication or other. I’ve always preferred to be uncategorizable.

I’m guessing Williams, as a liberal arts school, may have a more evenly distributed set of careers than some other schools. I’d be interested to see how this same distribution looks for other schools of different types and sizes.

The scale of the universe

Check out this interactive look at the scale of the universe. Puts things in perspective, from a Planck length to the observable universe:

scaling universe

The World Bank Data Visualizations

I’m impressed with two things about the World Bank’s approach to data: first, their commitment to openness in sharing data with the world, and second, their devotion to data visualization. They have also done a nice job inviting exploration with the way they have organized their data website.

Interesting to see that the mortality rate for children under 5 in the US is about 37% higher than the average of high income OECD countries.

US Infant Mortality

And the US spends way more on healthcare than almost any other country in the world. Maybe we’re not spending it on the young.

Note: The World Bank is the source of data for the sample I gave a while back using the Google Public Data Explorer.

Time(line) Travel at Hipmunk

Sorting through air travel options can be mind-numbing. The timeline approach at Hipmunk makes it easy to see everything you want to know about available alternatives: price, departure and arrival, length of flight, stop-overs, airlines. They have an “agony” algorithm that brings the least painful itineraries to the top. You can also sort instantly by more traditional criteria. And a quick click gives you all the details you need to know about a flight without having to go to a new page.

Well thought out, all the way around. Only gripe is the lack of Southwest Airlines options, but that’s not Hipmunk’s fault – you won’t find them on Orbitz either.

Time to book a flight to Honolulu.

Hipmunk air travel search

Venture Capital Visualized

I love this stunningly clear, easy-to-use, and information-rich interactive piece that encourages exploration of VC investments. It works well on many dimensions. Looks like it’s a collaboration between Accurat Studio, Ben Willers and, with all the data being drawn from the CrunchBase API, so it should stay as up to date as CrunchBase is.

The Startup Universe

Some detail of the interaction.

Startup Universe detail

It’s much more interesting to play with it than read about it, so go take a look.

Visualizing Olympic Speed

Trust the Olympics to inspire some innovative data visualization. Thanks to friend Peter F. for the tip on a nice series of visualizations from The New York Times that compare today’s winning sprinters, swimmers and jumpers with past medalists.

NY Times Olympic Visualization


Interesting to see the steady march forward over the years in swimming and sprinting.

Olympic Swimming Comparison
Curious that there’s not a similar progression in jumping. Is that because the long jump is a more complicated venture than a pure sprint? Or just because there was only one Bob Beamon?

What does the data say? A d3.js exploration.

I recently completed an online class, Data Visualization and Infographics with D3, taught by two great teachers: Alberto Cairo and Scott Murray. I have worked on a few D3 projects from the design side before, but this was my first real foray into doing the code myself. For class exercises, I picked a dataset to work with that I cared about: youth suicides.

Youth Suicides by State - 1999-2013
You can see the interactive graphs I created here.

Clusters of suicides among young people in our community have, understandably, caused much concern. The school my children attend is highly competitive and full of students motivated to do well. One huge concern in the community is that school pressures are a major contributor to these tragic deaths. This has led to many discussions about homework, high expectations, class schedules, parental pressure, and more, with a strong undercurrent among parents and educators of a desperate need to change something.

The message I get from my son (a junior), is that the school is not the problem and the system shouldn’t be changed as drastically as some propose. He and many classmates feel like the proposed changes diminish the educational experience and are senseless.

All of this made me want to know if there really was an alarming trend here or not. How does our community compare to others? What does the data say?

I was initially relieved to see that our state and county were below the national average. Suicide data is not reported on the city level, so I tried extrapolating from what was available anecdotally for Palo Alto (a collection of publicly known cases). I was relieved again, until I realized I was extrapolating against the population of the whole city instead of the age-specific population that relates to the data. A more accurate estimate suggests that we are definitely on the high side.

With the small sample size of a single city (or even some of the smaller states), the data gets jittery. Pretty soon you are looking at individual lives – probably helpful if you really want to understand causation, though less helpful for seeing trends. I may need to take a look at three year moving averages to smooth out some of the jitter and see if that clarifies any trends.

My son saw me working on this and encouraged me to pull in the comparisons to national and county data for a clearer picture. When he saw the graph, he said “You have to share this!” – the power of accurate data displayed clearly.

Part of the challenge for the community discussion here is that one suicide is too many, so talking about comparative data can feel cold and dehumanizing. What wouldn’t we do to save even one life? The potential problem comes when you change whole systems based on a handful of tragic cases, and then later realize that you damaged the system and didn’t solve the problem you thought you were solving. I hear echoes of this challenge in what I have been reading in Daniel Kahneman’s book Thinking Fast and Slow regarding loss aversion and the way humans respond to risk.

As with many things, it’s complicated.

This has been a valuable, if painful, discussion in our community, causing us to examine what we really value and how that gets reflected in our education system. I hope some clear data can contribute positively to the conversation.

World Development Indicators

Doing research for a project today, I stumbled across a powerful data visualization tool – the Public Data Explorer from Google. The power is in the stories that are told as you scan through the data over time. Two dramatic stories involving Rwanda and China come to light in the World Development Indicators data for fertility rate and life expectancy at birth. And these are just two of the parameters available in this data set – there are many others. I could spend all day…

Interactive World Development Statistics

This blog is focused on information design, the creation of infographics for visual understanding of complex processes, data and ideas.

You are currently browsing the archives for the Interactive category.