Information Design Watch
January 21, 2012, 11:23 am
Metadata in Action
By Henry Woodbury
Doing a comparative analysis of search functionality, I came across an interesting interactive diagram at the National Archives of Australia. Using simple rollovers the diagram explains the metadata hierarchy used within the Commonwealth Record Series (CRS) System. To see the diagram, start at the Search the Collection page, click “Search as Guest”, then click the “RecordSearch – Advanced search” tab. Here’s a screenshot:
Compare this to the boxes-and-arrows diagram used in the 4700-word CRS Manual.
What gives the interactive chart its punch is the use of verbs to describe the connections between the elements. Verbs like “contain”, “create”, “perform” are contrasted with “are part of”, “are created by”, “are performed by”. These words identify the relationship between subjects and objects in a much more informative way than lines with arrowheads.
December 25, 2011, 8:58 pm
World Map Abstracted
By Henry Woodbury
Based on data gathered from Gallup’s World Poll survey the Charities Aid Foundation creates a World Giving Index. The map below shows countries weighted by rank:
What I find most interesting about this map is the level of abstraction. While the ordered circles offer the same data relationship of area to value as a system like Worldmapper (though the “area” of CAF’s unitless “giving index” is somewhat mysterious), the presentation is simpler and far more flexible.
It is surprising how well the placement of a circle in rough proximity to its neighbors succeeds in providing orientation. Without the need to show contiguous borders, regions can be easily isolated, or even repositioned. It’s an elegant system, within its own parameters.
December 20, 2011, 10:22 am
HTML Sunrise
By Henry Woodbury
Paul Irish AND Divya Manian have teamed up to create a superb visual explanation that shows browser support for HTML5 and CSS3. Rolling over each spoke of the sunrise (to mix a metaphor) reveals the name of the component; clicking takes you to the W3C page that defines it.
While 2011 support for current common browsers is the most useful view, Irish and Manian have provided data for 2008, 2009, and 2010 as well. In the slideshow below I show a screenshot of each of the four views. It makes a nice animation.
The visual is created with HTML5 and CSS3, so it is best viewed with an current browser. Don’t even bother with MSIE 7.
(via the LinkedIn Web Standards Group)
December 12, 2011, 10:05 pm
Earthquake Watch
By Henry Woodbury
Earthquakes, too, are measured by a non-linear scale.
Here, the increasing energy of powerful quakes is shown as an animation (the color coding refers to tsunami potential, based on NOAA’s data and key):
Compare the animation to this graph from Matlab Geeks:
The animation tells a story at the expense of comparison and data density. Even with the zoom out, the animation maps magnitudes to areas, which are notoriously hard for the human mind to compare. Each point on the Richter scale indicates an increase of magnitude of 32 times. Using a screenshot from the animation, I’ve confirmed this ratio:
Another visualization that uses areas to show magnitudes is The Hive Group’s interactive Earthquake treemap:
This application is a rich data-mining tool, but it doesn’t necessarily negate the animation. The animation tells a story. It is focused on making a dramatic point. The application allows multiple stories to be discovered, in non-dramatic fashion.
November 21, 2011, 3:08 pm
A Thousand Thousand Thousand Thousand Thousand
By Henry Woodbury
I’m not really sure what to make of Randall Munroe’s chart on Money. There’s an enormous amount of data that is almost impossible to read. It needs to be printed whiteboard-sized.
Like Munroe’s Radiation Dose chart, the attempt to show geometric scale through changing units ultimately fails as a visual device. You can work through the Money chart point by point, but to find an overarching message – other than “that’s a lot of money” — you have to replace visual intuition with a mental scale.
Corresponding to the scale problem is a comparison problem. Munroe assembles his square building blocks into all manner of shapes, including time-series charts and maps. The mosaic that results thoroughly fills the page while simultaneously making simple comparisons very difficult. Nothing lines up.
Yet the chart repays the effort it takes to meander about with a wealth of facts, some valiant attempts at creating context and broad connections, and numerous humorous asides.
November 2, 2011, 1:18 pm
The New and Improved Google Reader! Slightly Dingy and Now with Dark Patterns!
By Lisa Agustin
I use Facebook, but was not one of those people who grumbled about the latest changes. I accept that technology is about looking forward, convergence makes sense in many cases, and that improving the user experience means continually tweaking an information architecture and visual design to reach whatever your bigger goal may be (e.g., conversions).
But then Google released its redesign of Reader, and we went from this:
to this:
Google calls the design “cleaner, faster, and nicer to look at.” But after reading their announcement more closely, it’s really more about creating a tighter integration with Google+ by turning off Reader’s friending, following, shared items and comments in favor of similar Google+ functionality. Which is okay, since I do see the point of consolidating Reader’s social aspect with Google+. But the redesign has actually made sharing harder, not easier. Former Google Reader Product Manager Brian Shih puts it this way:
Keep in mind that on top of requiring 3-4 times as many clicks, you also now must +1 a post publicly to share it, even if it’s shared to a private circle. That bears repeating. The next time you want to share some sexy halloween costumes with your private set of friends, you first must publicly +1 the post, which means it shows up on your profile, plus wherever the hell G+ decides to use +1 data. So much for building a network around privacy controls.
But then later, an update:
It turns out there is a way to share without +1′ing first. If you click on the top right “Share…” field on the OneGoogle bar [the bar at the very top of the pane], you can bypass the +1 button. It’s just completely undiscoverable.
Sounds like a dark pattern to me.
But let’s put Google+ aside, since sharing wasn’t why I used Reader in the first place. It was about the content. How quickly can I see what’s new and get to an individual story? From an information design perspective, I’d think making the design cleaner would mean maximizing space for original content. Rather it seems they did the opposite, with a thicker/more spacious header bar that pushes content further down the page.
From a visual design standpoint, greeted by a new absence of color, I wondered if they were trying to make it look like a traditional newspaper, removing colored elements as if they were distractions? While there is such a thing as too much color, the new Reader goes overboard in the other direction. With black, white, and grey being the dominant scheme, it’s hard to tell what the priority is in the UI. Google even eliminated the use of the bright blue link color that facilitates scanning. Now nothing stands out–except for the bright red Subscribe button and the blue Search button. Maybe it’s time to revisit the pluses of eye candy.
Kvetching aside, I suppose I will get used to the new direction (assuming I don’t switch feeds first). I also guess I had better brace myself for the upcoming Gmail redesign.
October 15, 2011, 4:54 pm
The Life of &
By Henry Woodbury
The ampersand’s job is to let type designers cut loose. It’s supposed to stand out, you see.
Jacob Gube offers a splendid appreciation of this splendid character covering history, styling, encoding, and what not to do:
(Apologies to our Facebook fans, who are getting this twice.)
September 13, 2011, 9:08 am
What’s on the Schedule for Today?
By Henry Woodbury
Hopefully there’s more of what you like to do and less of what you have to do. And hopefully they overlap.
Via artist and architect Jesen Tanadi (originally from desprezivel). You can view Tanadi’s projects at his eponymous URL.
August 20, 2011, 2:05 pm
“San Francisco Looks Like a Dinosaur”
By Henry Woodbury
Here’s a project where residents of a city draw their mental maps of their neighborhood and the city as a whole.
From the individual’s point of view, a location may have boundaries, barriers, corridors, or an orientation that a street or geographical map doesn’t reveal.
Make sure to look at the project’s PDF presentation for some additional explanation and a series of interesting analytical maps that correspond to the issues listed above.
What does the mental map of your locale look like?
August 16, 2011, 9:31 am
Making Infinity Personal
By Henry Woodbury
How does one comprehend very large numbers? This is a question for artists and thinkers that we’ve touched on before.
Conceptual artist Roman Opalka made this challenge personal, making his life’s work the painting of integers in sequence:
Starting at the top left of a canvas measuring a little over four by six feet, and using acrylic paint, he used a fine brush (No. 0) to inscribe 20,000 to 30,000 white numerals on a black background in neat rows that ended at the bottom right corner. Each succeeding canvas, or “detail” as he called it, picked up where the previous one left off. As of July 2004, he had reached 5.5 million….
All the paintings in the series bore the same title, “Opalka 1965/1 — ?.” “All my work is a single thing, the description from one to infinity,” Mr. Opalka once wrote. “A single thing, a single life.”
Starting in 1972, Opalka began taking self-portraits, also in sequence. These have been published in the stunningly crafted book shown in this video:
This is the kind of photography an artist now would turn into a digital animation.
You can see the physical experience that would be lost.
August 10, 2011, 11:55 am
The Key to the Masthead
By Henry Woodbury
It may not work for every web site, but it does for Flip Flop Fly Ball. I’m talking about a site masthead with more iconography than a pre-renaissance painting.
The key to the masthead is a nice example of information design in itself.
Click through to read the labels.
p.s. Flip Flop Fly Ball creator Craig Robinson has a book out. Good stuff. I’ve linked to him before.
July 28, 2011, 12:58 pm
Hello Spatial Humanities, We’ve been Waiting for You
By Henry Woodbury
Patricia Cohen at The New York Times has an interesting article on the “spatial humanities,” the idea of using geographic information systems to reveal the physical context of historical or even fictional events:
“Mapping spatial information reveals part of human history that otherwise we couldn’t possibly know,” said Anne Kelly Knowles, a geographer at Middlebury College in Vermont. “It enables you to see patterns and information that are literally invisible.” It adds layers of information to a map that can be added or taken off at will in various combinations; the same location can also be viewed back and forth over time at the click of a mouse.
The real joy of this feature is the portfolio of projects that accompanies the main overview. Here, for example, is a section from Ms. Knowles’ viewshed analysis of what General Robert E. Lee could actually see in the Battle of Gettysburg:
The pale ovals represent areas that historians have previously assumed to be visible to Lee. In Ms. Knowles analysis, all the light areas of the map could have been visible, depending on tree lines.
July 14, 2011, 10:23 pm
Jigsaw Africa
By Henry Woodbury
Scale is a kind of beauty. Here Kai Krause maps out the scale of the continent of Africa in comparison to a selection of the usual suspects:
Click through for full-size map, more data, and editorial content (whose thesis I find entirely unconvincing).
I’m more intrigued by the effectiveness of the visualization as an informational device. The juxtaposition is what matters, not the “true size”. If you mapped the true size of Canada, the United States, Mexico, and Central America against the continent of North America the result would be entirely pointless.
What makes Krause’s map intriguing is the contrast between large countries and a continent comprised mostly of small ones. To make a North American map of equivalent interest I would replace the large land masses of Canada, the United States, and Mexico with numerous small countries (to reverse the conceit we could replace Central America with Madagascar — a number of small countries with one large). Thus, we learn about the size of the selected countries as well as the size of the continent.
June 18, 2011, 10:00 pm
Follow the Dots, not the Lines
By Henry Woodbury
Over at ESPN’s Grantland, my new favorite sports site, a visual explanation has made an appearance.
Andy Greenwald, writing about HBO’s reuse of character actors in different original series, posted a diagram of “The 66 Busiest Actors on HBO”. The diagram links actors to each series in which they have made three or more appearances. On the left you might find Roxanne Hart. On the right you might find The Sopranos.
This is a chart of a type. It shows a network, but the assemblage of lines that denotes the network is indecipherable. It’s pickup sticks. (Other network diagrams devolve to spaghetti.)
Partly this is an artifact of organization. The alphabetical list of actors has no meaningful correspondence to the alphabetical list of shows. Imagine if shows were listed chronologically and actors listed in order of first appearance. Then you might see a pattern. Would it be enlightening? I’m not sure. A common problem with network diagrams is that the lines don’t aggregate into meaning. An individual line might tell you something, but only in its connection to a pair of nodes. And if you want to focus on individual nodes — an actor or a show — you don’t need a diagram.
Here, the big picture is not in the lines, but the dots. Scan either list and the diagram quickly informs you of something interesting: Stephen Toblowsky appears in a lot of HBO shows. The Wire employed a lot of actors. But not Stephen Toblowsky (no line).
June 2, 2011, 7:01 pm
Corn and More Corn
By Henry Woodbury
On the day that the USDA unveiled a nonsensical replacement for its hopelessly-compromised food pyramid, it’s important to understand what kinds of foodstuffs the government actually promotes.
Roger Doiron of Kitchen Gardeners International has produced this image of what the White House garden would look like “if it were planted to reflect the relative costs of the main crops subsidized by US taxpayers”:
The data is from the Farm Subsidy Database.
May 23, 2011, 2:02 pm
Small Uniform Multiples
By Henry Woodbury
The Baseball Hall of Fame’s Uniform Database offers an elegant showcase of the power of small multiples. Here is a simple example:
The database output, by year or team, shows the remarkable variety in baseball uniform design, within the simple confines of cap, jersey, pants, and socks. The outline style shown above was created by Marc Okkonen for his book Baseball Uniforms of the 20th Century which concludes in 1994. Post-1994 slightly more naturalistic — and uglier — images are provided by Major League Baseball Properties.
Sadly, where this online exhibit succeeds as information design it fails as information architecture. The search engine is very clumsy. One cannot compare specific teams or specific years. For example, earlier this season the Boston Red Sox and Chicago Cubs played in throwback 1918 uniforms. There is no way to compare Red Sox / Cubs / 1918 / 2011. For larger searches, one cannot show more than three images in a row, or more than eighteen in a page. Please, BBHOF, publish an API.
May 20, 2011, 5:07 pm
Louisiana Economic Development on YouTube
By Henry Woodbury
Louisiana Economic Development has a YouTube channel. Among its interviews and news clips is an animated presentation we created to explain their Digital Media and Software Development Incentive. Based on an executive PowerPoint deck we created for LED representatives to present in person, the movie is a self-running alternative suitable for trade show or web presentation. Enjoy!
May 10, 2011, 10:31 am
“The Dynamics of Rumor Creation”
By Henry Woodbury
SocialFlow, a Twitter-marketing-optimization company has created a striking visualization on the tweets that broke the news of Osama Bin Laden’s death:
At SocialFlow we analyzed 14.8 million public Tweets, and bitly links, posted between news about an unplanned presidential address (9:46 p.m. EST) and Obama’s address (11:30 p.m. EST) to see how dynamics of rumor creation played out during those critical hours on Twitter. Out of the dominant information flows observed in the data, we focus on the largest flow, engaging tens of thousands of users, validating speculation around Bin Laden’s death.
This jellyfish star chart presents a lot of data, but as best as I can guess, there is no coordinate system. It shows us constellations, not distance nor direction. There is no depth to it.
Still, hubs are interesting. Click through to see zoomed views.
May 9, 2011, 10:40 pm
Feelings Interactive
By Henry Woodbury
Columbia Journalism Review writes about one of The New York Times recent features:
…a new interactive graph on The New York Times website invites readers to plot their reactions to two questions: How much of a turning point in the war on terror will Bin Laden’s death represent? (significant to insignificant), and What is your emotional response? (positive to negative).
The format is useful for commenters because they can easily click a square and answer two questions at once, and it’s useful for the casual reader, who can measure the feelings of the crowd at a glance. When you first visit the page, you can click on any square to see others’ comments or to plot your own—or, you can just watch for a few minutes, as I did, as random comments slowly float up and fade out from the mosaic.
To me the format is far more interesting than the opinions. The format shapes the aggregate results.
Given quadrants, there is bias toward adhering to a quadrant.
Given edges there is bias toward approaching the edges.
Given existing dots, I strongly suspect there is bias toward clumping.
Now that I’ve looked at this interactive a few times the other thing that interests me is how it would look as an animation. The Columbia Journalism Review article offers a screen shot taken much earlier than the one above. The patterns are already taking shape.
April 26, 2011, 9:23 am
Launch! (Remodeling Dynamic Diagrams)
By Henry Woodbury
Late on Friday afternoon last week we relaunched DynamicDiagrams.com and this blog. The new site is more scalable than the old and incorporates more ways to present our work. Information Design Watch is incorporated into the main navigation of the site though it still resolves to its own dd.DynamicDiagrams.com subdomain. We like the new look too.
The relaunch has given us the opportunity to update our portfolio and present the popular dD Orrery on its own page. For the latter we’ve created free Mac and Windows screensavers you can download.
Let us know what you think.
April 16, 2011, 4:30 pm
20 Things + 1
By Henry Woodbury
The Google Chrome Team and illustrator Christoph Niemann have teamed up on a tour de force of information delivery: 20 Things I Learned About Browsers & the Web.
This online guide starts with “What is the Internet” and quickly jumps to topics near and dear to Google’s heart, like “How Modern Browsers Protect You from Malware and Phishing.” Yes, it’s self-promotional. But it’s also engagingly written, sprightly illustrated, and brilliantly executed.
Check out the interface. It’s not Flash. It’s HTML 5. That’s the plus one.
April 9, 2011, 9:56 am
Show Me the Seiverts
By Henry Woodbury
The Fukushima nuclear reactor remains in crisis. One informational challenges for media and scientists in this disaster has been explaining the relative risks of the radiation levels. The Sievert, a unit that attempts to measure the biological effect of an absorbed dose of radiation, is measured in micro-quantities for such things as a dental x-ray which is about one-millionth of a dose that is deadly. While a mathematician may easily compare very small and very large number as powers of 10, this is hardly intuitive to the rest of us.
Randall Munroe, at xkcd, has created one of the more comprehensive attempts to show radiation risk by charting doses in blocks and associating them with specific examples. Depending on color each unit represents one of four values from 0.05 microSeiverts (blue) to 1 Seivert (yellow). A large set of examples in one color becomes a small unit of comparison in the next:
The chart reads in a clockwise circle; better would be a horizontal left-to-right for both data and key. Still, it is a grand effort that repays close reading.
March 30, 2011, 10:38 am
Show Me the Zero
By Henry Woodbury
This is not the most complicated chart in the world of information design. But I like it for a very specific reason. I like it because it has a zero. The gray bar is the $1.5 trillion federal budget deficit. The red, blue, and pink bars are proposed spending cuts. I’ve posted a thumbnail next to the full-size chart to allow comparison in one glance.
March 9, 2011, 11:44 am
The Great Upheaval: Modern Art from the Guggenheim Collection, 1910-1918
By Lisa Agustin
The Guggenheim Museum recently launched an interactive timeline to accompany its new exhibition, The Great Upheaval: Modern Art from the Guggenheim Collection, 1910-1918. This colorful interactive map and timeline highlights the era’s artists, artist groups, exhibitions, performing arts, publications, artworks, historic events, and cultural movements. Select one of these categories, then scroll across to choose a particular year. Corresponding dots appear on the map above, and clicking on a dot displays a lightbox overlay with more information (see detail above). Overall, the timeline works from linear, drill-down perspective: choose a cultural activity, year, and sample activity within that year. Navigating the “Selected Artworks” category gives users the most detail (as expected), with an image of the artwork, and links to the artist’s biography and to an essay about the artwork, both housed in the pre-existing online collection on guggenheim.org– a nice way to leverage and highlight what’s already available. Discovering these individual nuggets is a little like going on a treasure hunt. The user seeks and finds individual gems scattered throughout.
At the same time, though, this interactive is weak in terms of providing an integrated picture of the era overall. Part of what makes studying an artistic era so exciting is the chance to discover connections: between artistic disciplines, or between the arts and historic events. The timeline misses this opportunity by forcing users to choose only a single category (the checkbox-like bullet next to each category is misleading). Additionally, once you’ve selected a dot on the map, dots of other colors at the bottom of the lightbox (see above) are indictors of simultaneous activities, but these are only visual cues and not links. Investigating these further means selecting a different category for that year and clicking through individual dots to eventually make the connection yourself. Allowing for multiple category selection and including crosslinks to other categories at the lightbox level are straightforward ways to make the pieces of the timeline more tightly integrated, showing that the whole is greater than the sum of its parts.
The Great Upheaval is on display through June 1, 2011.
March 3, 2011, 3:38 pm
Where Good Ideas Come From (or How to Avoid Clichés)
By Lisa Agustin
I love a good grid, with its precise measurements both horizontal and vertical. We’ve blogged about how grids and scales can serve as guideposts for discussing visual design, a subjective and therefore squishy topic. Now Smashing Magazine offers another take on this, suggesting that mapping clichés to the extremes of a scale can help guide discussions toward an original solution. The article goes on to explore four visual design problems faced by well-known designers, and the process each used to move away from tired, obvious approaches to fresh solutions. The article concludes with some tips for avoiding clichés which include–ironically–embracing them:
Start by drawing every association you come up with for the subject matter. Draw it quickly, and don’t be critical. At this stage, it’s not about making pretty pictures, and it’s not about evaluating your ideas (in fact, the ability to turn the critical part of your brain on and off is one of the most helpful tricks you can develop). Don’t try to avoid clichés — let them happen. Trying not to think of clichés is like the old joke where someone says ‘Don’t think of a pink elephant.’ It’s best to get them down on paper and get them out of your system. Once you’ve jotted down every association you can think of, take a break, come back and jot down a few more. Then, take a longer break…
While this advice is targeted toward designers, this is also good advice for anyone looking to develop a good idea, since it’s often the bad ideas that yield the good ones.
March 2, 2011, 5:03 pm
What You Want to Own
By Henry Woodbury
Self-described entrepreneur and gamer Brad Hargreaves has created a nicely multivariate chart on wealth creation. It is more philosophical than empirical, a way to frame a question rather than a survey. It is also self-explanatory, so I’ve only shown a portion of it below:
I found this at the Sippican Cottage blog, along with Sippican’s typically incisive summation:
1. Make money while you’re awake.
2. Make money while you’re asleep, too.
3. Make money even after you’re dead.
From the information design perspective I’m impressed by the labeling. The examples are well chosen and the repeated two-word “Own” phrases manage to indicate fairly clear distinctions despite their inherent subjectivity. That kind of parallelism is hard to carry off, especially seven times in a row. Why does Brett Favre fall under “Own Entities” instead of “Own Yourself”? I don’t know, but it works well enough to make the point.
February 23, 2011, 9:24 am
The Mystery Cupcake
By Henry Woodbury
In my post The Mystery Donut, I demonstrated how the problems of showing linear values with areas compound when the relationship of the values to the areas is visually deceptive.
Here’s a counter example. In this Financial Times visualization, the structural deficit for each country is shown by the area of the circle. The areas are proportional. This is much better than the mystery donut, but still a confection.
While the circles offer an attractive set of elements for the designer to arrange, they also preclude easy comparison. The human mind does not easily interpret differences in relative areas. Nor are the circles on a common axis. A bar chart would do the job just fine. A bar chart would also allow two sets of numbers — the structural deficit and the deficit as a percentage of GDP to be graphed in parallel.
I have one more criticism — this one about the copywriting. The line chart at the bottom shows the U.S. debt-to-GDP ratio accelerating off the charts. It is not spiraling.
February 13, 2011, 6:03 pm
The Mystery Donut
By Henry Woodbury
The donut below shows that 53% agree and 47% disagree.
It is lucky that we have the numbers because visually we have an enigma. Red dominates the shape in which red is the smaller number. How do we interpret this? Let me count the ways.
- We could compare the area of the donut (the blue ring) to the area of the hole (the red circle).
- We could compare the area of the donut and the hole to the area of the hole.
- We could compare the diameters of both cases above.
- We could compare the radii.
In every case, we still have to answer the question: What is the whole?
As it turns out, the visually-most-counterintuitive answer is the answer.
The red circle has a radius of 35 pixels. The blue donut is 5 pixels wide, extending the radius to 40 pixels.
Each radius is a bar on an implicit chart (now we see the whole):
The donut is meaningless. All we really have are two linear values:
Hell, let’s make it a circle again. I’ll turn the donut into a pie:
February 6, 2011, 8:34 pm
Readers are Always Looking for an Exit
By Henry Woodbury
Lawyer and professional typographer Matthew Butterick, author of the book and website Typography for Lawyers, explains why typography matters:
Given multiple documents, readers will make more judgments based on typography as they find it harder to make judgments based on substance.
On one level this is pretty reductive. A situation where all other considerations are equal except typography (or design, for that matter) never exists. But just because a reader starts reading an article or brief doesn’t mean the reader will finish it. Butterick writes:
I believe that most readers are looking for reasons to stop reading. Not because they’re malicious or aloof. They’re just being rational. If readers have other demands on their time, why should they pay any more attention than they absolutely must? Readers are always looking for the exit.
It’s an information design problem: How do you move a reader along in the flow?
Next question: Is legal size really necessary?
February 2, 2011, 1:25 pm
Demotic Internet
By Henry Woodbury
I’ve been reading Jacques Barzun’s magisterial history of western culture, From Dawn to Decadence. His final chapter on the late 20th century is titled “Demotic Life and Times,” “demotic” being a word that means “of the people” even if it happens to sound like “demonic.” Of the internet, Barzun writes:
That a user had “the whole world of knowledge at his disposal” was one of those absurdities like the belief that ultimately computers would think–it will be time to say so when a computer makes an ironic answer. “The whole world of knowledge” could be at one’s disposal only if one already knew a great deal and wanted further information to turn into knowledge after gauging its value.
Information isn’t knowledge. This fact points to a certain friction in the terms we use in our practice. Most often, an information architect really is concerned with information. The goal is to help individuals locate information in a context that helps them gauge its value. An information designer, however, is more focused on knowledge. The designer seeks to communicate ideas within a dataset. I wouldn’t advocate a change in terms. Knowledge designer sounds hopelessly pretentious. But the distinction between the two practices is important.
January 20, 2011, 11:30 am
Orrery Movie
By Henry Woodbury
A recent news release from the Minnesota Planetarium Society has cast doubt on the assumed alignment of the sun with the astrological constellations. Pshaw, say astrologers, our zodiac isn’t affected.
That’s because Western astrology strictly adheres to the tropical zodiac, which is fixed to seasons. The sidereal zodiac, observed in the East, is the one affixed to constellations, and is thus the one that would change.
In any case, this gives me the opportunity to highlight the digital orrery created by our creative director, Piotr Kaczmarek.
Within the application you can view the solar system according to the Copernican (sun-centered) or Tychonian (earth-centered) model. You can rotate the system by clicking and dragging on the outer ring, or let it move automatically by adjusting a slider in the top left. As for the zodiac display in the model, let us assume that it is the tropical zodiac, and thus needs no recalibration.
UPDATE (April 23, 2011): With the relaunch of our DynamicDiagrams.com web site we have featured the Orrery on its own page where you can view it as an external Flash file or download a Mac or Windows screensaver. I have updated the links in this post to connect to that page.
January 6, 2011, 10:43 am
Social Media for Designers
By Henry Woodbury
Combine social media with design and you might end up with a site like Dribbble (that’s with three b’s). Just make sure you also come up with an elegant user interface design and use an oddball basketball metaphor for the site vocabulary.
Like many successful social media sites, the underlying concept is simple. Where Twitter limits word count, Dribbble limits image size — to 300 x 400 pixels, max. Common social media elements like tags, comments, and fans enrich the experience. Fans and views drive a popularity index and an inexplicable “playoffs” page.
One of Dribbble’s innovations is the “rebound”, a graphical reply to another posted design. This is technically similar to sharing in Facebook or trackbacks in blogging, but Dribbble does a markedly superior job in presenting the cross-communication. Which is good, because cross-communication inspires better design.
December 30, 2010, 3:08 pm
A Lesson in Venn Diagrams
By Henry Woodbury
I’m not going to reproduce the “Who Gets Paid to Touch Your Junk” Venn diagram. It’s already doing the rounds. This summary of what does and does not constitute a Venn Diagram is more entertaining than the original joke (which leads the discussion anyway).
Selected commenters push back against the critique. Most tersely, Commenter Michael writes, “The original is an accurate Venn diagram. The labels within overlapping areas are simple not exhaustive.” Commenter Jose_X elaborates:
Yup, as explained in a different comment, the original is essentially correct.
To see what I mean, replace “Doctors” with “Characteristics of Doctors” and repeat the replacement pattern for the other sets as well.
The most interesting comment is not about definitions, but about usage. Commenter Marcus Carab observes:
There’s quite a lot of “incorrect” Venn diagrams like the original out there – to the point that it has basically become an accepted format for a joke.
I’m not sure if any other type of chart or diagram has achieved this status. Pie and bar charts invite mockery for their clumsy misuse. Venn diagrams offer a platform for fun. For example.
December 20, 2010, 3:04 pm
Flip Book Presentation
By Henry Woodbury
Presentation software does flip book animations. There’s nothing complicated about it. It’s just the way presentations work, if you let them. From 2010, here’s a Google Docs example:
This is beautifully done and encourages the typical trash-talking of Microsoft PowerPoint. And I have to believe that Google Docs’ layout and drawing tools are easier to use than PowerPoint’s truly awful toolkit. But the kernel of this presentation is not in the drawing, but in its 450 slides. With enough slides you can animate anything.
From 2008, here’s a Flash version of an animation we created in PowerPoint for Textron.
In contrast to the Google Docs example, we did our drawing in Adobe Illustrator and imported each frame into PowerPoint from the external application. But as I said before, drawing isn’t the issue. What we really lack is a soundtrack.
December 15, 2010, 9:47 am
Map Meme Goes Manhattan
By Henry Woodbury
Back in September I posted on Bill Rankin’s beautiful maps of census data.
Now the New York Times has turned the idea into a powerful data-driven Flash application. As a Flash application it lacks the resolution and elegance of Rankin’s maps, but it makes up for that in coverage and interactivity. Paradoxically, the lack of resolution is most apparent in the suburbs and rural areas that the application makes available for analysis.
December 9, 2010, 2:10 pm
The Phone Call as Community
By Henry Woodbury
If we define a community by evidence of social interaction, how well do political and historical boundaries hold up? That question is posed, and answered (in part) by a study of landline phone calls in Great Britain led by Professor Carlo Ratti of MIT’s SENSEable City Lab. Analysis of over 12 billion calls identified point-to-point geographical connections (defined at the sub-regional level to protect individual identity) whose relative strength was derived by the frequency and length of calls. The result is a map that mostly aligns to familiar regions, but with some unexpected variations.
December 5, 2010, 10:18 am
Hello Skullhead
By Henry Woodbury
Cross Blackbeard with Black Sabbath and you might end up with something like Patrick Galbraith’s Map of Metal:
The map has a method, indicated by the legend above, and a timeline. The latter runs in a diagonal, from the northwest 60s to the southeast 00s.
Aurally, the map offers definitional tracks for each genre. Visually, its delight comes from Galbraith’s emblematic variations on the leather default. Below is his riff on Visual Kei, “a movement among Japanese musicians, that is characterized by the use of make-up, elaborate hair styles and flamboyant costumes….”
Hello Kitty.
(via LearnedLeague)
November 22, 2010, 5:06 pm
Nightingale’s Serendipity
By Henry Woodbury
In the BBC News Magazine, mathematician and author Marcus du Sautoy extols the power of diagrams. The cliche that a picture is worth a thousand words misses the point, he explains. A scientific diagram has the power to transcend language, to “create a whole new visual language to navigate a scientific idea” or even show the impossible. “Words” is the wrong unit of measure.
Among other scientists and thinkers, du Sautoy draws examples from Copernicus, Newton, and Florence Nightingale. In that last case, he links to our recreation of Nightingale’s Rose, the circular set of charts that Nightingale created to show relative causes of death of soldiers during the Crimean war.
du Sautoy’s television series, The Beauty of Diagrams, is offered on BBC Four.
November 22, 2010, 10:51 am
If an Infographic Tastes Light is it Less Filling?
By Lisa Agustin
There’s the “The Gray Lady”, and then there’s her wittier, spunkier cousin. CR Blog posted a mini-tribute to New York Magazine’s infographics, which are sometimes based on data (see the neighborhood news visualized), and sometimes not (as in the Approval Matrix, a “deliberately oversimplified guide to who falls where on our taste hierarchies”). Not necessarily a lot to ponder, but attention-grabbing and fun nonetheless.
November 9, 2010, 4:38 pm
Verbing Nouns with Stephen Fry
By Tim Roy
While working with clients on presenting some of the visual explanations we create, our ongoing mantra is to “not read to the audience!” No matter if it is a PowerPoint deck, a Flash animation, or a simple print diagram, reading the text aloud is an almost guaranteed way to make the audience squirm in their seats.
Why is this? The fact is that people can read silently faster than someone can read aloud. The result: cognitive dissonance as the brain is processing one set of words while hearing the exact same text being spoken with a multi-second delay. It leaves us feeling confused, uncomfortable, and most importantly, unable to process the information being presented.
I came across this wonderful example of how the same words can be both spoken and appear on a screen simultaneously on the Open Culture web site. Matthew Rogers, a freelance graphic artist, animated a 2008 piece from the British author Stephen Fry. The results are well-executed, amusing and insightful. More importantly though, it deftly illustrates the clear connection between what we hear and what we read. Do not underestimate its importance the next time you are preparing for a presentation.
November 5, 2010, 9:18 am
Any Questions Mr. Skywalker? No? Good.
By Henry Woodbury
I haven’t linked to Presentation Zen in a while. Having recommended the site to my sister who is teaching business communications, I took a look and came across this gem:
General Jan Dodonna stands and delivers with confidence and brevity.
Who remembers that the destruction of the Death Star (in Star Wars IV) turned on a successful visual presentation? Well no matter. The presentation got results.
Garr Reynolds summarizes:
If you have a large screen, use it to show visuals, not lines of text that remind you what to say. You do not have to use a screen, but if you do, use it to display visual information that illustrates or amplifies your message in the clearest way possible. Stand with your visuals, becoming a clear part of the visual experience from your audience’s point of view.
November 3, 2010, 3:42 pm
Shakespeare Diagrammed?
By Tim Roy
It would seem that the idea of visualizing Shakespeare is more wide-spread than I initially thought. While I blogged on this same subject (Shakespeare Visualized?) last month, other approaches keep appearing. A friend sent me a link to a print of Hamlet presented as a diagram. Available for sale on Etsy, this visualization is a hybrid of process flow, genealogical chart, and glyph system.
Multiple views of the Hamlet diagram
This piece works far better than the data analysis previously presented, but I am still not convinced that it does the narrative justice. For example, the following extract from Act II is, in my opinion, difficult to grasp from a process point of view:
"Process Flow" from Act II
While the glyph system mixes straight-ahead enumeration (use of the letters to abbreviate names) to the iconic (representing players with the masks), I found it confusing. Other icons in the system include skulls, castles, daggers and poison.
Glyph system from Hamlet diagram
We have never attempted to transform this kind of narrative into a full-fledged visualization, so I do applaud the work for its daring. Still, I think I would take Olivier or Branagh over this 50 x 79 print every time.
November 3, 2010, 8:44 am
A Good Year for Maps
By Henry Woodbury
The 2010 U.S. election generated the usual maps (for example, here at CNN and here at the Wall Street Journal), but the New York Times superb multimedia team offers some extras (as well as their own version of the same). In an animated set of maps titled A Historic Shift, they show shifts in voting patterns from 2010, 2008, and 2006. Here are screen shots which capture all of the actual data provided by the animations and allow easier comparison than The Times’ slideshow format:
October 22, 2010, 4:18 pm
Interaction Costs in Visualization
By Kirsten Robinson
Tim sent me a link to an article on the Interaction Cost in Information Visualization this morning. After I recovered from my grad school flashback, I got to thinking about about the tradeoffs we have to make among decreasing the various “costs” discussed in the article. For example, my visual designer colleagues are really excellent at reducing the cost of visual clutter. Less visual clutter leads to improved perception. On the other hand, removing too many elements can increase the cost of decision — an extremely minimal interface may give too few clues to what an interactive system or visualization does.
October 19, 2010, 9:37 pm
Learning the Language of Experts (Remodeling Dynamic Diagrams)
By Tim Roy
In the early days of Dynamic Diagrams, Paul Kahn used to claim that we were “experts in doing things we had never done before.” While this often left prospective clients with puzzled looks on their faces as they considered the implications of this statement, to a degree it was true. This was, after all, the early 1990s, a time when the web was just emerging and information design and user experience were still relatively unknown. The idea of considering users or the information to be presented felt alien to most clients who had grown up on a steady diet of print layout or software interface design.
Site map for the first online version of the journal Nature
A 1997 web site created for West Publishing
Twenty years later, as we consider our new web presence, I stepped back to look at some of the work going on today. Our teams are currently busy on such projects as:
- Visualizing research results from a maternal health project underwritten by the Gates Foundation
- Creating a new user experience design for a major New England University
- Developing interactive data presentations and dashboards for a Fortune 100 company
- Refining the information architecture and visual design of a small section of an intranet we designed for a health service organization that had grown to over 15,000 employees
- Producing a 2 minute animated video including development of a detailed 3D model for a major Los Angeles museum
- Testing logo design and messaging for a publishing support company
We are still constantly exposed to new and exciting challenges in terms of information to be presented. For most of us, it is what makes the work rewarding: learning about subjects ranging from 17th century furniture construction, to dynamically sorting and presenting data contained in tens of millions of records, to understanding how today’s health care knowledge workers can be made more efficient in their daily lives. What is different though, is that while the information, the audience and the business goals change, we have developed a codified process that produces repeatable success.
With these tools in hand, we are lucky enough to be able to spend time with some of the leading experts in the world: aerospace engineers, chief medical officers, particle physicists, museum conservators, and technology product developers. In each case, we learn their language, their point of view, and begin to see the information they want to present from the inside out. Thinking way back to my own academic training at Hampshire College, we were taught to first and foremost consider the “mode of inquiry” when learning a new discipline. Many years later, this model still hold true, although perhaps what Paul should have told clients was that we were experts in doing things no one had ever done before. And he would have been right.
October 16, 2010, 5:04 pm
Of Clocks and Time
By Tim Roy
The tech blog Gizmodo recently alerted us to a fascinating production featuring the Astronomical Clock in Prague’s Old Square. Using a highly produced light projection system, combined with sound and image, the combined team from Macula, data-live and Tomato Productions effectively told the story of the 600 year old clock in a crowd-stopping 10 minute show.
Here at Dynamic Diagrams, we have our own fascination with clocks. Here are some images from our own production of a piece on Le Roy’s 1768 Marine Chronometer:
October 13, 2010, 10:27 am
What’s Wrong With These Survey Questions?
By Kirsten Robinson
I’m often called upon to design surveys and also to take them. One of my pet peeves is surveys that are released to the wild with design errors. Just as authors need editors, survey designers need reviewers to check for editorial and logical errors. Here are a few problem questions I’ve encountered recently. Can you spot the problems? If so, please post a comment.
Question 1.
Question 2.
Question 3.
Have you seen a poorly designed survey question recently? If you design surveys, what steps do you take to avoid errors?
October 12, 2010, 10:56 am
Gregor Hohpe’s Diagram Manifesto
By Henry Woodbury
Why a diagram? We know how to communicate the value of diagrams to clients already attuned to visual thinking. The challenge is to reach those for whom the idea is unfamiliar. One of the best arguments I’ve encountered comes not from a designer, but from a software architect. In his manifesto on Diagram Driven Design, Gregor Hohpe speaks to his immediate audience (software architects) and their focus on rigorous technical documentation, but makes the broad case as well:
Drawing a picture forces us to clean up our thinking, lest we run out of paper. Do we depict the data flow, the class structure, or implementation detail? While a picture does not automagically make this problem go away, it puts it in your face much more than a meandering chain of prose, which from afar may not look all that bad. A well-known German proverb proclaims that “Papier is geduldig” (paper is patient), meaning paper is unlikely to object to what garbage you scribble on it. Diagrams tend to be a little less patient, and expose a wild mix of metaphors and abstractions more easily.
Hohpe doesn’t forgive poorly designed diagrams (“bad diagrams are not a useful design technique”), but warns against blaming the messenger:
If you are unable to draw a good diagram (and it isn’t due to lack of skill), it may just be because your actual system structure is nothing worth showing to anyone.
October 9, 2010, 7:15 pm
Mindful Looking, Cape Cod and LA
By Tim Roy
Kirk Tuck, who publishes The Visual Science Lab blog, recently published a great piece on “mindful looking.” In it, he discusses his interpretation of the Zen Buddhist principle of being aware of the moment. His view, when developing a photographic composition, is to follow “the practice of approaching each subject without the conscious intention to change its meaning by altering its perceptible structure.”
The idea here is to not consider a photographic subject with a planned post-production filter or modification in mind. For by doing so, one subconsciously rejects images that might not fit the filtering or “look” that is desired. Tuck argues that this is “fundamentally limiting for an artist and also establishes a feedback loop that replaces truly creative seeing with a ‘sub-routine’ that adds a comforting reference while stripping the act of photography of its essential representational power.”
Fall sunset on Cape Cod
I am on Cape Cod this weekend taking photographs and thinking about a new visualization project we are beginning next week for a major Los Angeles museum. After considering this fascinating point of view about the unintentional filtering and skinning we bring to image creation, it will be interesting to see how my photos and the ideas we begin to develop for this project are influenced.
October 7, 2010, 10:29 pm
Balance Beams and Information Design
By Tim Roy
My 11 year old daughter is a competitive gymnast and I recently spent an evening watching her work with one of her coaches choreographing a new routine for the balance beam. As I listened to her coach say things such as “where are you looking? Make sure you are looking at the judge” and “the judge is going to want to see you do this,” I began to see a connection with the work they were doing and how we at Dynamic Diagrams think about presenting information. In both cases, it is essential to consider the audience.
With a balance beam routine, it turns out there are actually two audiences: the judges (there are usually two) who will carefully observe and then assign a score based on difficulty, lack of errors in execution, and the confidence and joy the gymnast demonstrates. The other audience are the people in the bleachers, often several hundred of them, who are watching with varying degrees of interest and motivation. It might be a deeply engaged parent holding their breath as their daughter flings herself into the air backwards with the intent of landing on a four inch wide beam that is four feet off the ground. Or it might be a competing team’s coach, looking for faults in the hope that their gymnasts will produce a better score.
My daughter in flight
At Dynamic Diagrams, we work with our clients to understand the characteristics of their audience. Unfortunately, it is never as clear-cut as having a judging table with two individuals who have been trained over the course of years to evaluate and opine. Instead, we think about what brings a person (for what is an audience but a collection of individuals?) to engage with information or to an experience. Is it a museum visitor who wants to see a specific collection of art or a web site user with a concrete set of goals in mind such as buying a book or paying a bill? Or is it someone with a business challenge interested in a new technology, or a curious visitor to a blog who saw something that caught their eye in a moment of serendipity?
My daughter’s beam routine has a certain number of required elements in order for her to compete. This includes such things as being able to turn 360 degrees on one foot, to perform something called a “dance element” and the one that makes me cover my eyes: an acrobatic flight element (this means a back handspring). Some of these moves are quite beautiful and ballet-like; some are cute and engender a smile; and some literally defy gravity and make everyone gasp as they are performed.
Presenting information is not so clear-cut. There are significant differences in creating an experience based on a PowerPoint show as opposed to an interactive museum kiosk. A web-based knowledge collection requires a different set of skills than a large format process diagram. There are the required elements: clear and legible typography; deliberate and carefully planned use of language; a color palette that does not overwhelm the message itself. And like the best gymnasts, the “tricks” that make people stare in wonder should be used sparingly and to maximum effect.
As information designers, we almost never have an opportunity to craft an experience that will be judged by two people with a predetermined set of criteria. Thinking about your audience is critical. While everyone has something they feel is important to communicate, what will be the experience of your audience? It is a worthwhile exercise to consider, even if you never leave the safety of solid ground.
Shawn Johnson’s 2008 Olympic Gold Medal-Winning Balance Beam Routine
October 6, 2010, 12:19 pm
Timeline of the History of Systematic Data and the Development of Computable Knowledge
By Lisa Agustin
Presented at last month’s Wolfram Data Summit in Washington, DC: a timeline of organization through the ages.
October 1, 2010, 11:52 am
Shakespeare Visualized?
By Tim Roy
Earlier this week, I was speaking with Nancy Duarte about her new book Engage and comparing notes about our respective explorations of literature and drama over the past few months. With the help of a dear friend, I had set out on a course of reading some of the great works of drama in order to help develop my skills in creating better narratives for our clients.
I recently came across this site: Understanding Shakespeare, a project undertaken by Stephen Thiel and the University of Potsdam. His goal was to “extract and visualize the information found within the text to reveal its underlying narrative algorithm.” Using a variety of inquiry paths (dramatic structure, summary, enter/exit, and Google results), Thiel has produced a series of static visualizations illustrating objective findings about the Bard’s work.
While the results of this work have produced these not-surprisingly dense visualizations, it remains unclear how useful this type of data exploration might be. We often speak to our clients about first understanding the needs of an audience — what do you want them to think, feel and do after experiencing your story — in this case, what are the benefits of knowing these narrative patterns or the word count of a specific character?
To be fair (and offer Thiel the benefit of the doubt), this close analysis might prove helpful to Shakespearean scholars and others looking for specific linguistic patterns. Yet for the rest of us, it would seem that the art of A Midsummer Night’s Dream or the nod towards symbolic communication in Sonnet 23, cannot be divined by a visualization.
September 30, 2010, 2:21 pm
Austan Goolsbee’s Magic Ruler
By Henry Woodbury
Economist Austan Goolsbee, speaking for the White House, explains the virtue of the president’s tax plan by misrepresenting lines as areas:
“We got a ruler and measured out the size of the tax cut is how big the circle is…”
Aargh. Whatever the merits (or grammar) of the argument, a line is not a circle. A circle is not a goose egg, a term that Goolsbee uses later in the show. And in colloquial terms a goose egg does not mean huge. It means zero.
September 27, 2010, 11:40 am
Think You Know Movies?
By Lisa Agustin
Then prove you have The Right Stuff– guess the titles of the (26) films hidden in this short animation, and you could be entered in a drawing to win them all, courtesy of The Guardian. (Quick, though– you only have until October 22).
September 26, 2010, 7:51 pm
Boundaries Without Boundaries
By Henry Woodbury
Almost by definition, map-based data draws a picture. Rarely is the picture so stark as Bill Rankin’s mapping of U.S. Census data on race and ethnicity to Chicago’s neighborhood boundaries.
Rankin draws attention not to the neighborhoods where his map confirms historical racial and ethnic boundaries, but to those whose gradient would otherwise go unnoticed:
My alternative is to use dot mapping to show three kinds of urban transitions. First, there are indeed areas where changes take place at very precise boundaries — such as between Lawndale and the Little Village, or Austin and Oak Park — and Chicago has more of these stark borders than most cities in the world. But transitions also take place through gradients and gaps as well, especially in the northwest and southeast. Using graphic conventions which allow these other possibilities to appear takes much more data, and requires more nuance in the way we talk about urban geography, but a cartography without boundaries can also make simplistic policy or urban design more difficult — in a good way.
Digital cartographer Eric Fischer takes Rankin’s approach and maps cities across the United States. Everywhere, ethnic and racial divisions present themselves, but there are dramatic differences in degree.
September 21, 2010, 10:34 am
The Simple Power of a Graphic
By Matt DeMeis
Most of us know about the 33 miners trapped underground in Chile. I came across this infographic created by Newsweek about the 3″ diameter bore hole that is keeping them alive.
So simple, but so incredibly powerful. I love this kind of thing. With a line drawing, we are given a true window into the unbelievably claustrophobic situation these men are enduring.
September 9, 2010, 2:38 pm
How to Make a Lot of Data Look Like a Lot of Data
By Henry Woodbury
Stockmapper made Time Magazine’s list of the top 50 web sites for 2010. Stockmapper has a lot of data, but is it useful? I can’t tell. Which answers the question, at least for me.
Compare the Stockmapper heat map with Smartmoney’s Map of the Market. Stockmapper is the larger one underneath. You’re not missing much.
The Stockmapper heat map, whether organized by ticker symbol, percent change, volume, or market cap, tells no high level story. You might as well use a spreadsheet with sortable columns. You can sort and filter, but not compare. Click on a filter such as market sector or country and Stockmapper rewards you with some neatly rendered bar charts, but the heat map is a failure.
In contrast, the Map of the Market offers a comprehensible high-level view of market trends. You can compare the activity of each sector of the market and see which are gaining or losing value. Market capitalization is shown by area which provides another way to compare sectors and individual stocks.
Martin Wattenberg created the Map of the Market well over a decade ago. The best of 1998 is better than the best of 2010.
August 30, 2010, 10:03 am
Teaching Many Many People in a Leveraged Way
By Henry Woodbury
My title is Bill Gates talking. He is talking about Sal Khan, Harvard MBA, former hedge fund manager, and now the one man show behind online learning site Khan Academy. Here is Gates at more length:
There’s a web site that I’ve been using with my kids recently called Khan Academy, K H A N, just one guy doing some unbelievable 15 minute tutorials…. He was a hedge fund guy making lots of money and he quit to do these little web videos and so we’ve moved I’d say about 160 IQ points from the hedge fund category to the teaching-many-many-people-in-a-leveraged-way category and so that was a good day — the day his wife let him quit his job.
Khan’s YouTube videos feature his voice and an electronic blackboard that present bitmap images and (mostly) Khan’s notes and annotations. Here’s an example, Basic Multiplication:
This approach is extremely efficient and extremely effective. Speaker and blackboard (or whiteboard). That’s all.
When Gates talks about “leverage” this is part of what he means. The pedagogical simplicity of Khan’s approach makes his materials very accessible and allows him to develop his lectures quickly. Their succinctness allows him to tailor each one to a specific level of ability. The other aspect of “leverage” is technological. By using the common YouTube video format, Khan can reach anyone and everyone with a decent Internet connection. There are no additional distribution barriers. Makers of educational software should take note.
August 25, 2010, 3:10 pm
Data is the New Soil
By Lisa Agustin
TED offers up a talk by journalist/designer David McCandless, who we’ve written about before. McCandless sees himself as a “data detective,” creating beautiful diagrams (“flowers of information”) that expose new insights in the process. Check it out for a fun walkthrough some of his creations.
August 25, 2010, 9:32 am
Egg Cracking Technique
By Henry Woodbury
A friend linked me to the delightful They Draw and Cook web site (thanks Katy!). Here you have simple recipes rendered by artists and illustrators. Many are no more than decorated recipe cards, but some clamber over the illustration fence into visual explanation territory. An example is Alex Savakis’s egg cracking technique:
In this one, the text is superfluous.
August 10, 2010, 11:54 am
The Dugout Canoe Description of My Job
By Henry Woodbury
The Edge Annual Question for 2010 goes out to a bevy of deep thinkers:
How is the Internet Changing the Way You Think?
Is it? That’s up to you. Editor and Publisher John Brockman anticipates the point:
We spent a lot of time going back on forth on “YOU” vs. “WE” and came to the conclusion to go with “YOU”, the reason being that Edge is a conversation. “WE” responses tend to come across like expert papers, public pronouncements, or talks delivered from stage.
Science historian George Dyson offers an evocative response:
In the North Pacific ocean, there were two approaches to boatbuilding. The Aleuts (and their kayak-building relatives) lived on barren, treeless islands and built their vessels by piecing together skeletal frameworks from fragments of beach-combed wood. The Tlingit (and their dugout canoe-building relatives) built their vessels by selecting entire trees out of the rainforest and removing wood until there was nothing left but a canoe.
The Aleut and the Tlingit achieved similar results — maximum boat / minimum material — by opposite means. The flood of information unleashed by the Internet has produced a similar cultural split. We used to be kayak builders, collecting all available fragments of information to assemble the framework that kept us afloat. Now, we have to learn to become dugout-canoe builders, discarding unneccessary information to reveal the shape of knowledge hidden within.
Give us a tree and we’ll carve your canoe. That is what Tim Roy is talking about.
(via Andrew Gilmartin who linked to Dyson’s quote on Facebook. Andrew blogs here.)
Update: I rewrote my lede, up to the Dyson quote, to add context and incorporate Brockman’s “you” vs. “we” statement.
July 10, 2010, 10:27 am
Boomtown
By Henry Woodbury
At FlowingData, Nathan Yau’s popular visualization on the growth of Walmart recently got an update — “now with 100% more Sam’s Club” he titles it, tongue in cheek. The growth map shows the number of new store openings for Walmart — and Sam’s Club — from 1962 through 2010. The data is just for the United States. The animation reveals both a pattern and rate of growth as Walmart starts at a single location, becomes a regional chain, then expands to the U.S.’s Northeastern and Western population corridors. Zoom out (the plus/minus in the bottom left corner are zoom controls) and you will see the firm’s entry into Puerto Rico in the early ’70s and to Alaska and Hawaii in the late ’90s.
The data does not include store closings, a point that comes out in the comments of the first link. Designer-statisticians can only work with the data they have.
June 3, 2010, 11:08 am
Visual Bias at Work
By Henry Woodbury
Last week I blogged about a Harvard Business Review article on the inherent biases in visualization. Visual information makes people overconfident of outcomes.
Today the New York Times offers a perfect example. In the debate around U.S. health care overhaul, the president’s budget director Peter Orszag argued that savings could be found by reforming the current system:
Mr Orszag displayed maps produced by Dartmouth researchers that appeared to show where the waste in the system could be found. Beige meant hospitals and regions that offered good, efficient care; chocolate meant bad and inefficient.
The maps made reform seem relatively easy to many in Congress, some of whom demanded the administration simply trim the money Medicare pays to hospitals and doctors in the brown zones. The administration promised to seriously consider doing just that. [my emphasis]
Unfortunately, the maps don’t show what they seem to show. While they show cost of care (a very specific kind of care it should be noted), they don’t show quality of care. Nor do the maps show anything about the demographics of the patients being cared for.
The Times compares the Dartmouth map (on the left) to Medicare’s own analysis of hospital quality (on the right) to show the disconnect. However, the Medicare map raises questions of its own. To start with, it shows a suspicious correspondence to U.S. population density.
Perhaps quality of care relates to the proposition that higher population density creates demand for more specialists which leads to better diagnoses. I’m sure I’m not the first person to think of this. Before anyone draws another map, let’s work on better analysis.
May 25, 2010, 2:58 pm
Simplifying The Story of Stuff
By Lisa Agustin
Seemingly simple stories often have complex beginnings. Consider the well-known web film (and now book) The Story of Stuff by Annie Leonard. A longtime activist with an interest in waste and its impact on the environment, Leonard was attending a leadership training program when she was asked to give a presentation. She was shocked to find that no one knew what she was talking about. Attendees pointed out that her vocabulary needed simplification and that she was “starting the conversation 20 years down the road.” What to do? Simplify the story:
Humbled, Leonard tried new angles. They all failed. Finally, in frustration, she hung a huge sheet of paper on the wall and crudely drew a mountain, a truck, a factory, a store, and a dump. And then she told the story of stuff. “You ought to make a movie of that,” 30 different people said. [Post-institute, Leonard] traveled the country with her sketch. The rest is Internet history.
Instead of creating “a paradigm shift in relation to materials,” Leonard started asking “Where does all the stuff we buy come from, and where does it go when we throw it out?” By combining this straightforward approach with a simplified visual style (animated stick-figures), Leonard’s film engages and enlightens in a way that makes viewers easily see what the problem is and how they can make a difference.
April 14, 2010, 8:38 am
“Just because it’s graphical, it doesn’t mean it’s useful”
By Henry Woodbury
Phyl Gyford graphs the “infographics” that give infographics a bad name. For example:
Click through to see the whole thing.
April 8, 2010, 4:57 pm
Guest Teaching InfoViz
By Kirsten Robinson
Dr. Bill Gribbons at Bentley University recently invited Dynamic Diagrams to present some of our work to his Information Visualization class. The class is part of the Master’s degree program in Human Factors in Information Design, of which I’m an alumna.
After I gave a brief introduction to Dynamic Diagrams, Piotr took the spotlight, showing a wide variety of visual explanations from past and present projects. Examples included highly detailed web site inventories and architecture diagrams, process illustrations, data visualizations, and animated 3D models. While Piotr explained the challenges and design solutions for each project, I played Vanna White, zooming and scrolling so the students (some of whom were attending online) could see relevant sections.
It was a great experience for me to revisit some of the past work (Samsung Electronics, Holtzbrinck), and to understand some of the more recent work (Getty) in greater depth. There never seems to be enough time to sit back and appreciate our colleagues’ work during a normal workday.
Holtzbrinck web properties inventory
The best part was hearing the audible gasps as we revealed each new piece. As part of their coursework, students are required to create their own information displays, while also explaining the human factors (visual and cognitive) that help or hinder our ability to process them. I hope we were able to provide a bit of inspiration for their next projects!
April 6, 2010, 11:06 am
The Audience-First News
By Henry Woodbury
Turns out that Rupert Murdoch agrees with me about content:
At the completely unironic paidContent.org, John Yemma, Editor of The Christian Science Monitor, picks up the theme, and elaborates:
Yes, people want multimedia. They want games, maps, 30 Rock on Hulu, bootlegged first-run movies from Pirate Bay, and whacked-out amateur videos on YouTube and a dozen other sites. But there’s no evidence that they want, for instance, a thoughtful interactive map/video/database mashup on Afghanistan or global warming on which they can comment. There’s no evidence that users love these things so much that they flock to them, stay around, and convert to a news site’s brand because of cool multimedia.
Yemma differs from Murdoch in his lack of love for paywalls. Instead he advances an updated version of the click-through mantra of 00s:
What we’re learning is that the key to building and keeping traffic is far more prosaic than multimedia and sharing buttons. It rests on overcoming a huge cultural barrier: evolving a serious, experienced, thoughtful newsroom into an audience-first organization. I use the term “evolving” because this is all about the present tense. Trying to understand our current and future audience is a work in progress that will continue for as long as we publish on the web.
How far removed from being “audience-first” is your web presence? It’s worth some thought. And see what Yemma says about Sandra Bullock.
March 25, 2010, 9:58 am
The Long Shot
By Henry Woodbury
This beautiful diagram, created by Bryan Christie Design for an IEEE Spectrum special report on Mars packs a lot of data into a small space, down to the specifics of the name of each mission.
Yet, with all the data, the overarching story comes through clearly: Up until this decade, most Mars missions failed. Because of the Soviet Union’s dreary record, it is easy, at first to misread orange for failure and blue for success. But a quick check at the labels makes it easy to reorient. Don’t draw the short straw.
(via i09)
March 19, 2010, 10:38 am
It’s Tournament Time
By Henry Woodbury
The Mens Division I NCAA Basketball Tournament bracket is one of the most iconic images in U.S. sports. Voila:
So what can an information designer do with this?
Cliff Kuang at Fast Company looked around the web to find out. His selection for “best designed bracket” goes to NBC Sports:
Why? Because it’s a bonafide [sic] infographic–basically a cheat-sheet that allows anyone with only a passing interest in college basketball to sound smart after about five minutes of studying.
The NBC Bracket is here. It’s interactive, but broken. Hey NBC! Fix that absolute positioning.
Update: It’s fixed now.
March 17, 2010, 12:06 pm
Your Data is my Distraction
By Henry Woodbury
I recently ran across a still-fresh 2009 Nieman Journalism Lab post on “ambient visual data” — a good term for the practice of graphically incorporating metadata into a content-delivery interface. The most common idea seems to be adding subtle bar charts beneath or around links to illustrate various kinds of popularity.
To explain the importance of the concept, author Haley Sweetland Edwards turns to designer Eliazar Parra Cardenas, creator of Backbars, “a GreaseMonkey script to turn the headlines and comments of social link-sites into ambient bar charts (of votes/diggs/views/users…).” Cardenas explains:
“The whole point is to make textual information easier to absorb… [A well-designed site] should maximize the information that a user can understand — that you can just glance at, or take note of -– without actively thinking….
“We’ve already tried the obvious in print: putting as much text as possible in one glance (hence broadsheets), mixing in images, headlines, columns. I think the next step will be digital developments like backbars, favicons, sparklines, word coloring, spacings.”
Count me as extremely skeptical. The sites that Edwards and Cardenas hold up as examples seem both cluttered and shallow — a vote-stuffing contest for “news of the weird.”
I’m old school that way. What drives traffic are the editorial and authorial inputs that Cardenas overlooks in his list of the obvious. Not headlines, but well-written headlines. Not images, but compelling images. Not backbars, favicons, sparklines, word coloring, and spacings, but good ledes.
The New York Times isn’t making money online. But they aren’t lacking for traffic.
February 26, 2010, 3:34 pm
Man as Industrial Palace Animation
By Lisa Agustin
We sometimes use “little people” to depict complex processes, with multiple actors participating in a real-life process (e.g., online collaboration or editorial workflow). But little people can also be used to illustrate processes as they might be imagined. Physician and science writer Fritz Kahn (1888-1968) often used the man-as-machine analogy to show functions and features of the human body. One of Kahn’s most famous works is the “Man as Industrial Palace” poster from 1927. Designer Henning Lederer brings the poster to life with this clever animation that illustrates several systems of the human body, including respiratory, circulatory, digestive, and nervous.
Read more about Lederer’s project: http://www.industriepalast.com/
(via Flowing Data)
February 20, 2010, 10:42 am
Visualizing More Affordable Care
By Henry Woodbury
The February 2010 issue of Obstetrics & Gynecology features work by Dynamic Diagrams for an article titled Alternatives to a Routine Follow-Up Visit for Early Medical Abortion. The article describes a protocol for assessing a woman’s health after an abortion without routine use of ultrasonography. To quote from the abstract:
We constructed five model algorithms for evaluating women’s postabortion status, each using a different assortment of data. Four of the algorithms (algorithms 1–4) rely on data collected by the woman and on the results of the low-sensitivity pregnancy test. Algorithm 5 relies on the woman’s assessment, the results of the pregnancy test, and follow-up physician assessment (sometimes including bimanual or speculum examination).
A sponsor of the study, Gynuity Health Products, asked Dynamic Diagrams to visualize the data. Our explanation shows the results for the current standard of care and five algorithms tested by the researchers. For each approach we show the total number of cases, the number of women returning to a clinic for a follow-up visit, and the number of women receiving a follow-up ultrasound. In contrasting colors we show specific additional treatment cases in two columns; those identified by the protocol on the left vs. those not necessarily identified by the protocol on the right. In large type we provided the percentage of the number of follow-up ultrasounds to the total number of cases. This combination of rich data points and a key percentage makes it easy to compare the effectiveness of each algorithm. A sample of this visual language (without labels) is shown below:
While we cannot reprint the full text of article, we can provide the visual explanation used as Figure 2: Algorithms identifying women who received additional care after medical abortion (PDF, 409K).
February 5, 2010, 2:07 pm
Brainstorming A History of the World
By Lisa Agustin
Rattle offers its first blog post on developing the user experience strategy for “A History of the World,” the companion web site for the BBC Radio 4 series of the same name. Written and narrated by Neil MacGregor, Director of the British Museum, the radio program travels through two million years to tell the history of humanity through 100 handmade objects from the Museum, ranging from a stone chopping tool to the cell phone. The web site enables exploration of these objects in detail, but also gives users the opportunity to participate by commenting on the collection or uploading images from their own personal collections. Rattle’s initial post walks us through general principles from their brief (e.g., “some use of participatory media”), the resulting strategic goals (e.g., “focus on attracting, rewarding, and promoting a small minority of contributors”), and its initial brainstorm of features (e.g., “select 10 objects to represent the History of Me”). Now that the site is live, it will be interesting to read future installments to see how these initial high-level goals and blue-sky thinking compare to what was actually developed.
February 2, 2010, 1:21 pm
Easy = True
By Henry Woodbury
An interesting article on “cognitive fluency” offers this great (ironic) infographic:
Reporter Drake Bennett leads with the fact that “shares in companies with easy-to-pronounce names do indeed significantly outperform those with hard-to-pronounce names.” He continues:
Other studies have shown that when presenting people with a factual statement, manipulations that make the statement easier to mentally process – even totally nonsubstantive changes like writing it in a cleaner font or making it rhyme or simply repeating it – can alter people’s judgment of the truth of the statement, along with their evaluation of the intelligence of the statement’s author (my emphasis).
However, the flip side of easy equals true — or “an instinctive preference for the familiar” as Bennett defines the concept — is that to generate reflection or curiosity, you may need to make things less familiar. It’s a good thing we know how to do both.
February 2, 2010, 9:43 am
Rendered in Neat Circles
By Henry Woodbury
Popular Science links to another interesting information graphic on space exploration. This one, designed by Michael Paukner, illustrates the number of human-created objects orbiting Earth — and assigns responsibility:
You can view larger versions on Paukner’s Flickr page.
The title of my post comes from the Popular Science URL: see-space-debris-cloud-surrounding-earth-rendered-neat-circles. Ironically, this summarizes the problem with the visualization. Despite the attractiveness of the graphic, the neat circles show linear values by area, making precise comparisons completely impossible.
The donut shapes created by the overlapping circles also confuse comparison. Take a quick look at the darkest circles– that for space debris — around the United States and Russia. The United States is bigger, but by what order of magnitude? We see a lot more black — a thicker torus– but the actual ratio is just 1.2 to 1.
January 30, 2010, 9:23 pm
Real-Time Bus Location
By Henry Woodbury
Using GPS and Google Maps, MASCO — the Medical Academic and Scientific Community Organization, Inc., of Boston, Massachusetts — offers this elegant real-time bus map for its shuttle service. The map shows buses in service, their location, and their direction of travel.
For folks waiting at the bus stop, the service is accessible via web-enabled phone at http://shuttles.masco.org/m.
December 22, 2009, 12:20 pm
Hiding Text in PowerPoint
By Lisa Agustin
I stumbled on this odd post about the use of PowerPoint in the college classroom. The basic question is this: How do you help students who rely on your PowerPoint slides as a study aid, especially if they missed the class? Some academics are aware of PowerPoint best practices, but Julianne Dalcanton suggests the following as a way to help students without breaking the rules:
My trick for [giving students the key points without cluttering the slide] is using black text on a black background. The text doesn’t show on the screen, but it does show up when printed as a handout, since the black background defaults back to white. Thus, you get the following:
Dalcanton should rethink her approach. Hiding the bulleted text so it will appear when printed wrongly assumes everyone will want (or remember) to print it, and using a black background with red text results in poor legibility (not to mention encouraging a nice nap if the lecture takes place in a dark room). In short, she’s sacrificing a good presentation for the sake of printability. Other problems with this slide:
- The graph is key to the slide and should be bigger. Remove the box that surrounds the question, since this is visually distracting. If the question itself is a key point, hopefully a subsequent slide answers the question.
- The language in the bottom-right comment needs the speaker to provide context. What does “This” refer to–the graph? If it’s important to connect energy loss with calculating the age of the universe, spell this out explicitly.
- The bullet points are better placed in the Notes area, but Dalcanton isn’t a fan of this feature (see comments following her post). If the bulleted text must be kept in the slide, it shouldn’t be sized for presentation, since this is a waste of slide real estate. Instead, use a smaller font, and move the bullets to the bottom of the page. Then use a color other than black for the font and matching background color (we used white, and this prints fine).
Our quick redo shows the presentation version on the left, and the printed version on the right. The bulleted text is in ten-point font, and legible when printed.
December 22, 2009, 11:18 am
Mashing Up Suggestions
By Henry Woodbury
In The New York Times, IBM scientists Fernanda Viégas and Martin Wattenberg have some fun with search engine auto-suggestions. Type in even a single word and you receive “a list of suggested, presumably popular completions.” (In courtroom dramas, this is called leading the witness.)
The fun is seeing how different investigations overlap. Here’s one example:
December 14, 2009, 10:59 am
The Periodic Box of Chocolates
By Henry Woodbury
People seem to forget that the periodic table is a table because it reads in two dimensions. Read it left to right and atomic weight increases. Read it top to bottom and you find elements with similar properties — for example, the alkali metals in group 1 or the noble gases in group 18. The gaps in periods 1, 2, and 3 represent physical realities about the electron configuration of those lighter elements (see this Periodic Table by Chemicool).
Most attempts to fit other data sets to the periodic table result in strange confections.
This Periodic Table of Visualization Methods is a prime example. A simple categorized list is puddled into the matrix of Dmitri Mendeleev’s table and shoved around to fit. There are exactly six “compound visualizations.” How serendipitous. The really interesting data — the examples of the methods — are hidden under reductive two-letter acronyms, making comparison impossible even when you do find something interesting.
If the categories are meaningful and not just quantified to fit the table, the next step is to abandon the presentation method that doesn’t work and come up with one that does.
December 3, 2009, 2:57 pm
Will Better-Looking Money Improve the Economy?
By Lisa Agustin
With the economic recovery taking longer than expected, is it time for politicians to step aside and give designers a shot at it? Over the summer, creative strategy consultant Richard Smith sponsored the Dollar ReDe$ign Project, suggesting that rebranding the US Dollar would boost consumer confidence and, as a result, jumpstart the economy. (Check out the winning entry by Kyle R. Thompson.) But is an image makeover really enough? After all, it’s less about what the currency looks like and more about what it’s worth.
Better-looking money needs to be part of a well-thought out commerce-based model. Consider the Brixton Pound out of the UK (pictured above) or the BerkShares, created for the Berkshire region of Massachusetts. Both are examples of local currencies created to stimulate local economic development. How it works in a nutshell: National currency is exchanged for local currency at designated exchange locations. The consumer can then use the local money at businesses that have agreed to accept it. Depending on the specific model, there are pre-arranged benefits, like exclusive offers or discounts to users of the local currency. For example, the BerkShares model has a five-percent discount that is part of the exchange rate (ninety-five cents per BerkShare). An example of how it works:
One day, you decide to go out for a nice dinner. You go to the bank to purchase BerkShares to spend at a local restaurant. You go in with 95 federal dollars and exchange them for 100 BerkShares. You go to dinner, and the total cost comes to $100. The restaurant accepts BerkShares in full, so you pay entirely in BerkShares. Therefore, you’ve spent 95 federal dollars and received a $100 meal – a five percent discount for you. The owner of the restaurant now has 100 BerkShares. They decide that they need to deposit them for federal dollars and return them to the bank. When they bring them to the bank, the banker deposits the 100 BerkShares you spent on dinner and gives the restaurant $95 federal dollars, the same 95 dollars that you had originally exchanged for BerkShares. The end result? You receive a five percent discount because of the initial exchange, but the same $95 you originally traded for BerkShares all goes to the business where you spent those BerkShares.
Yes, there’s some cool-looking money involved, and yes, it does something for instilling local pride. But more important, these models demonstrate that design can play a role in solving real problems (like a sluggish economy), and providing tangible benefits to those involved.
December 3, 2009, 11:28 am
What once was print…
By Matt DeMeis
…is now being done very effectively with new technology. Flyp media captures that cozy feeling of thumbing through a magazine and translates it to the internet in one of the best ways I have seen in a while. It’s news, in a more exciting format. Video, audio and elegantly designed layouts definitely give a nod to the print world, all while being more exciting than a piece of paper could ever be.
December 2, 2009, 3:31 pm
Highly Targeted Healthcare Marketing
By Matt DeMeis
These days health care is a slippery subject. This isn’t about politics or any of that. Today I came across (what I think to be) a brilliant way of marketing health care to an audience that usually forgoes coverage, Xtreme sports enthusiasts. Tonik Health Insurance has taken the daunting task of securing coverage for yourself and made it incredibly easy.
Tonik targets a finite demographic and gives them access to the information the need in a design they can relate to. In one or two clicks I was able to find all that I needed to know about purchasing a plan from them. Once you decide on a coverage level you simply fill out a form. For comparison I went to an undisclosed giant’s web site to try and find the same info (still pretending I was an Xtreme sports enthusiast of course). I gave up after some dead end digging and suggestions to download PDFs. It seemed more effort was put into the stock photography than the user experience. Ease of use is CRUCIAL for the audience Tonik is targeting. Their potential customer wants information fast. No digging. No downloading.
The design is great. Loud but very minimalist. It’s tailored for a younger, action sports lifestyle audience and it does that perfectly. Bold colors and lots of flash but these things don’t hide the information. Wonder what “$5000 deductible” means on the thrill-seeker plan? click the question mark next to the word. Easy.
Now to be fair it must be noted that Tonik is a division of Blue Cross, an industry giant. They don’t serve every demographic, there is no “family thrill-seeker” package yet, but there is a lot to be learned by how smart and easy this site has made a somewhat complicated decision. Check it out at www.tonikhealth.com
November 18, 2009, 8:55 am
Resume as Infographic
By Kirsten Robinson
Designer Michael Anderson has created an infographic representation of his resume:
View the full-size image.
November 17, 2009, 5:16 pm
The Sweet Spot Between Information and Design
By Kim Looney
Trying to explain what information design is to our families and friends, and yes, potential clients, has been an ongoing challenge for us here at Dynamic Diagrams. Verbally, I usually resort to something about creating visual explanations for complex sets of data. But that doesn’t really satisfy anyone.
Information is Beautiful recently took on the same question on their blog. Their visual approach tries to show–with a Venn diagram-in-progress–what information is; what design is; and what happens when these overlap. Not every product of the two entities is a win: some are useless, some are ugly, and some are boring. But, there is a sweet spot where interestingness + function + form + integrity = successful information design.
November 9, 2009, 11:20 am
Abstract Berlin
By Henry Woodbury
Christoph Niemann has combined history and personal narrative to tell the story of the Berlin Wall, in words and stunningly simple images:
Niemann’s iconic images reference specific events and larger ideas. One image shows an East German border guard hurdling barbed wire to escape into the West. Other images remind me of M.C. Escher’s tessellated patterns, reduced to elemental form. Niemann’s underlying theme is the transformation of a city, history as augury and echo.
November 5, 2009, 12:25 pm
Follow the Necktie
By Henry Woodbury
It is always interesting to me to see how designers using different methods tackle some of the same visualization challenges that we do. How do you represent an abstract idea like “mobility” or “business”?
Here is Virtualization in Plain English, a marketing video for Intel made by Common Craft.
Keep track of that necktie.
October 30, 2009, 3:39 pm
Hey Jude, Don’t Get Confused
By Henry Woodbury
Created by love all this (via Sippican Cottage).
September 25, 2009, 3:32 pm
Data in the Round
By Henry Woodbury
An interesting, but flawed chart at O&G Next Generation shows how much oil the United States imports from other countries:
There are several big problems with this chart. First, U.S. oil imports per day by country is linear data. When one-dimensional values are presented as two-dimensional areas, proportional differences between values are rarely perceived correctly. This problem is compounded by the placement of the data blobs on the global map. It is good to attach each blob to a country, but not good to scatter them both vertically and horizontally. With a little design attention the values could be presented as bars and aligned along a single x-axis in the tropics.
Another problem is that several important data points aren’t shown. Most importantly we need a figure for the United State’s domestic production. This is vital for context. Upon investigation, we find that the bar chart on the bottom left is either not accurate or not tracking the same petroleum product as the map. If you subtract Total Imports from U.S. Consumption for 2008 you get a ballpark figure of around 6,000 thousand barrels per day. This is far off the mark. The real number for 2008 is 4,921 thousand barrels per day, a little bit less than total U.S. crude produced since a small amount of U.S. crude is exported. In June 2009, domestically produced minus exported crude is 5,126 thousand barrels per day.
Another missing figure is the total of oil imports from all countries after the top 10. Once we can look up the June 2009 total for all countries — 9,172 thousand barrels per day — we can easily calculate the sum of all countries after the top 10. The long tail total turns out to be 1,613 thousand barrels per day which is greater than all but Canada. The 9,172 total and various subtotals also allow us to validate the 82% percentage on the far right and update the 2007 ratio of 60% to the actual June 2009 ratio of 64%.
If we add circles to show the oil consumed by the United States from its own production and the “Rest of World” total identified above, the chart looks something like this:
It is even more difficult to read. But that’s not a problem with the data. The data needs to be shown. The problem is with the presentation. The chart still shows linear values with areas, it still doesn’t show totals, it still uses an out-of-date figure from 2007 on the far right, it still has questionable, out-of-date data on the bottom left, and it still has a jumble of factoids on the bottom right that don’t relate the data above. Alas, I am out of time.
September 4, 2009, 1:12 pm
The Times Goes Google on Us
By Henry Woodbury
I just discovered the New York Times Developer Network.
This resource provides data from The Times to third party developers through content-related APIs:
Our APIs (application programming interfaces) allow you to programmatically access New York Times data for use in your own applications. Our goal is to facilitate a wide range of uses, from custom link lists to complex visualizations. Why just read the news when you can hack it?
Most or all of the APIs respond to a query by returning data in XML or JSON format. Some developers have built custom search engines and topic-specific mashups around this functionality. Others are more interested in the sheer excess of the data — and how it can be visualized.
Artist Jer Thorp is one of the latter. Thorp accesses the Times Article Search API to create visualizations that compare the frequency of key words over time. The image below, for example, compares ’sex’ and ’scandal’ from 1981 – 2008:
When you zoom in, the visualization reveals branching segments called “org facets”. Thorp writes:
[These are] organizations which were associated with the stories that were found in the keyword search. This is one of the nicest things about the NYTimes API – you can ask for and process all kinds of interesting information past the standard “how many articles?” queries.
August 27, 2009, 3:09 pm
Craigslist Makeover
By Matt DeMeis
Wired has a very interesting article up right now. Several well known designers were asked to give hypothetical makeovers to Craigslist. I use CL all the time and honestly, I have never really had a usability problem of any kind. It does what it is meant to do quite well and is a true example of a simple utilitarian web service. I don’t own an iPhone or Blackberry so mobile access hasn’t been an issue for me. That seems to be the biggest argument for some kind of partial redesign (if only for mobile clients). A lot of the designers agree “why fix what’s not broken” (myself included) but it’s still interesting to see the results. Some better than others. My take on the submitted designs…
Favorite: Simple Scott
Least Favorite: Studio8
Middle Ground: Khoi Vinh
August 19, 2009, 9:50 am
You Are…
By Matt DeMeis
MIT Phd student Aaron Zinman has created an interesting data driven visualization experiment called “Personas”. Simply enter your name and a Flash app scours the web for bits and pieces of information about you. As it does so, its progress is displayed in visual form (albeit at warp speed, so it’s more for “ooh ahh” factor than usefulness). You are then characterized as a colored strip of categories ranging from books, sports, management and aggression to education, legal and illegal (activities?). It’s an interesting experiment. I think it would be great to have a bit more control over the categories and info about the user. Just to help weed out the cruft. As is, it’s probably pretty inaccurate for someone with the name Bob Smith or Michael Jackson. I am curious what our resident Flash maven Piotr would add to it. Go try it out over at the MIT site.
http://personas.media.mit.edu/
July 28, 2009, 12:16 pm
“Both stayed close to the mound where the Eagle set down, except for Armstrong’s quick jaunt over to the rim of East Crater to shoot some photos of the outfield.”
By Henry Woodbury
To provide context for the first walks on the moon by Neil Armstrong and Buzz Aldrin, NASA provides us with a map of the Sea of Tranquility superimposed over a baseball diamond. The Lunar Module is situated on the pitchers mound with the activity of the astronauts indicated as tan paths. This shows a blob of extensive activity around the module and a number of longer walks by each astronaut.
Created by Thomas Schwagmeier from a suggestion by Eric Jones, the map is part of the NASA Apollo 11 Image Library. To really appreciate the details (including a legible key), click through to the full size version.
What looks like the original for the overlay is Schwagmeier’s elegant rendition of the “Traverse Map” — Figure 3-16 from the Apollo 11 Preliminary Science Report. The two maps are shown side-by-side below. As with the baseball overlay, click through to the full size versions to see all the detail.
June 30, 2009, 1:00 pm
How Tall is the Green Monster?
By Henry Woodbury
Flip Flop Fly Ball is Craig Robinson’s collection of “baseball infographics”:
Essentially, this site is what I’d have been doing when I was 12 years old had the Internet and Photoshop been available to me in the eighties.
What stands out for me from this collection is Robinson’s ability to ask good questions — intriguing or amusing or both.
In some of the work, the question is more the point than the answer. What if baseball players literally stole bases? For more complex questions Robinson often produces just a well-drawn pie or bar chart. But occasionally, Robinson combines question, data, and visual idea into a smart visual explanation that goes beyond that.
For example, the left field wall in Fenway Park is 37 feet and two inches tall. And how tall is that?
May 19, 2009, 11:16 am
Twitter as Public Art
By Lisa Agustin
Check out “Visible Tweets”, a visualization of Twitter intended for public spaces or, as creator Cameron Adams puts it, “a Twitter visualizer for rock concerts.” Simply enter whose tweets you’d like to see, and choose one of three animation styles to see the tweets letter by letter, rotating as they are linked to each other, or as a tag cloud that morphs from one tweet into the next. Adams’ allusion to rock concerts stems from his assertion that Twitter is normally about the chatter that takes a back seat to the main event (but doesn’t have to):
Twitter gives a voice to an audience who for many years have played a subservient role to those who were officially there to speak. But who says they have less to say?
April 22, 2009, 8:27 am
Broken on Purpose
By Henry Woodbury
Seth Godin at Gel 2006 explains how This is broken. What is broken? Almost everything.
Including Napoleon’s March to Moscow.
Starting at 17:53, Godin buries Edward Tufte in order to praise him. Note that Godin doesn’t really bother with the graph itself, but rather Tufte’s promotion of it as “the best graph ever made.” Godin responds:
I think he’s completely out of his gourd and totally wrong!
If you need to spend 15 minutes studying a graph you might as well read the text underneath. Godin then backs off. Tufte’s promotion of Napoleon’s March, he says, is an example of something “broken on purpose”:
For the kind of person you want to reach — they want to read a complicated difficult to understand graph and get the satisfaction of figuring it out, because then they get it…. Sometimes the best thing to do is break it for the people you don’t care about and just make it work for the people you do.
Agree?
Watch the rest of the talk as well. It’s a very funny, pointed critique of bad information and product design.
April 9, 2009, 6:30 am
Charts Rule!
By Kirsten Robinson
From the folks at PBS Kids, it’s “Conjunction Junction” for the info vis set. Although, I’m sure some of my colleagues would take issue with the 3D pie charts.
March 19, 2009, 1:25 pm
An Introduction to Information Design: A Manual for Advocacy Groups
By Maia Garau
Tactical Tech and John Emerson of Backspace have published a useful information design manual for NGOs looking to strengthen the impact of their campaigns:
Information design uses pictures, symbols, colors, and words to communicate ideas, illustrate information or express relationships visually… It is not the same as graphic design, nor is it only about making something aesthetically pleasing. It’s not about branding, style, making a glossy product or something that looks “corporate.”
They add that information design is not about making something aesthetically pleasing, but about making your data clear, compelling and convincing (to which I would add memorable).
The authors make a convincing case for using information design to effect social change at many levels. Information design is a powerful tool not only for storytelling but also for the earlier stages of discovery (finding patterns) and decision-making (making comparisons and weighing options).
Download the pamphlet here or or request a copy.
February 24, 2009, 12:40 pm
Global Problems Demand Good Maps
By Henry Woodbury
The study of climate change is a global endeavor which means that data is often plotted to continental or world maps. As such, many of the challenges of good map making reappear as problems in presenting climate change data. Two researchers at the University of Idaho, Jean McKendry and Gary Machlis, point out that a key map from the 2007 Intergovernmental Panel on Climate Change (IPCC) Summary for Policymakers (PDF, p. 10), fails in both intelligibility and accuracy:
One of the most common ways in which climate maps can be misleading is to fail to take account of the map’s projection. “All map projections have distortions (distance, area, direction, and/or shape). For example, if temperature is displayed using coloured squares of equal size across the map, but the map projection does not minimize areal distortion, the squares appear to but do not represent equal areas on the Earth,” McKendry told environmentalresearchweb.
Other problems include overlapping data points, a multi-colored data scale, and unclear labels.
The map is reproduced below in all of its orange glory:
January 12, 2009, 10:24 am
Ahead of Our Time?
By Matt DeMeis
I came across this video recently titled “Did You Know” that was created by Karl Fisch, Scott McLeod and XPLANE. It reminded me of a project dD created almost 8 years prior called “Global Village”. I dug around in our archive and after some careful cross converting and video capturing (the first generation ActionScript didn’t want to play nice), I was able to resurrect the presentation. Some of the sound effects were lost due to the age of the file but it’s enough to show the similarities between the two. It’s not as fancy as the 2007 “Did You Know” but the way the visual statistics are represented has much more of an impact. Have a look…
“Global Village” 1999-2000
“Did You Know” 2007
