About
Randy Krum infographic designerRandy Krum
President of InfoNewt.
Data Visualization and Infographic Design

Infographic Design

Infographics Design | Presentations
Consulting | Data Visualizations

Strata Conference Discount Code
DFW DataViz Meetup
NEXT EVENT: June 8, 2016

Join the DFW Data Visualization and Infographics Meetup Group if you're in the Dallas/Fort Worth area!

Search the Cool Infographics site

Custom Search

Subscriptions:

 

Feedburner

The Cool Infographics® Gallery:

How to add the
Cool Infographics button to your:

Cool Infographics iOS icon

- iPhone
- iPad
- iPod Touch

 

Read on Flipboard for iPad and iPhone

Featured in the Tech & Science category

Flipboard icon

Twitter Feed
From the Bookstore

Caffeine Poster

The Caffeine Poster infographic

Entries in interactive (24)

Thursday
May302013

Drones Kill - Animated, Interactive Visualization

Drones Kill - Animated, Interactive Visualization

Great data visualization design from Pitch Interactive.  Out of Site, Out of Mind is an animated data visualization of every U.S. drone strike in Pakistan since 2004 and the associated kills reported in the news.  There is also an interactive element is that the readers can hover their pointer over the visualization an more details appear in a popup window.  Visit the original site to see the animation.

Since 2004, the US has been practicing in a new kind of clandestine military operation. The justification for using drones to take out enemy targets is appealing because it removes the risk of losing American military, it’s much cheaper than deploying soldiers, it’s politically much easier to maneuver (i.e. flying a drone within Pakistan vs. sending troops) and it keeps the world in the dark about what is actually happening. It takes the conflict out of sight, out of mind. The success rate is extremely low and the cost on civilian lives and the general well-being of the population is very high. This project helps to bring light on the topic of drones. Not to speak for or against, but to inform and to allow you to see for yourself whether you can support drone usage or not.

The visualization is created in HTML5 and JavaScript. We recommend Chrome for the best viewing experience.

The challenge with gathering the data and how drone attacks are represented in the news is shown by the large OTHER category of victims.  Also, it’s the largest category of victims.  A data visualization like this is a tremendously effective way to bring this issue to light.

The category of victims we call “OTHER” is classified differently depending on the source. The Obama administration classifies any able-bodied male a military combatant unless evidence is brought forward to prove otherwise. This is a very grey area for us. These could be neighbors of a target killed. They may all be militants and a threat. What we do know for sure is that they are targeted without being given any representation or voice to defend themselves.

The visualization was created by Wesley Grubbs, and there is a video interview of him about the data visualziation process by The Huffington Post.

Thanks to Ray for sending in the link!

Friday
May242013

How Many Alien Civilizations are there in the Galaxy?

How May Alien Civilizations are There in the Galaxy? infographic

Very cool!  The How Many Alien Civilizations are there in the Galaxy? infographic from BBC was designed by Information is Beautiful to illustrate the Drake equation. The Drake equation is an equation used to calculate how many potential aliens may exist in the Milky Way Galaxy.

Today, we live in an age of exploration, where robots on Mars and planet-hunting telescopes are beginning to allow us to edge closer to an answer.

While we wait to establish contact, one technique we can use back on Earth is an equation that American astronomer Frank Drake formulated in the 1960s to calculate the number of detectable extraterrestrial civilizations may exist in the Milky Way galaxy.

It is not a rigorous equation, offering a wide range of possible answers. Instead it is more a tool used to help understand how many worlds might be out there and how those estimates change as missions like Kepler, a telescope that is currently searching for Earth-like planets, begin to discover more about our universe.

Until ground-based observations, space telescopes and planet-roving robots uncover any tell-tale signs of life, what better way to speculate on how many intelligent alien civilizations may exist than to explore the universe with our interactive version of the equation.

It’s actually an interactive infographic because it let’s the user change the assumptions and recalculate the results.  So if you only believe there is a 50% chance of plant life developing, change the assumption value and recalculate.

Found on FastCo Design.

Friday
May032013

The Foursquare Visualizer

The Foursquare Visualizer interactive infographic

Foursquare has release a new Foursquare Visualizer, that creates an interactive data visualization of your own activity for the last 12 months.  I included the images from my own history.

At Foursquare, we’ve always known how very special our community is. Today, April 16 (4/4^2), marks the fourth annual 4sqDay. Each year, we take this opportunity to thank our amazing community for all that they do.

…take a peek back into your own history at foursquare.com/visualizeme. It’s just our small way of saying, “Thanks! We think you’re awesome.”

There are a handful of different visualizations of your own history of check-ins available.  The connection circle (shown above) is the best looking.  Other visuals include a Timeline and Categories.

Found on the Foursquare blog

 


Thursday
Apr042013

How Far is it to Mars?

How Far is it to Mars? motion infographic

How Far is it to Mars? by David Paliwoda is a fantastic animated, interactive infographic website that shows the viewer the scale of the distance to the Moon and to Mars as measured in pixels.  David calls this a motion-infographic.

Click the image above to see the animated site.  Very cool! 

Found on Daring Fireball

Wednesday
Mar132013

Beautiful Animated Wind Maps

The static image above doesn’t do these maps justice.  Go see the Wind Map on the Hint.fm site to truly appreciate the design work from artists Fernanda Viégas and Martin Wattenberg.

An invisible, ancient source of energy surrounds us—energy that powered the first explorations of the world, and that may be a key to the future. This map shows you the delicate tracery of wind flowing over the US. 

The animation is mezmerizing, and the interactive piece allows you to click-to-zoom in closer to any part of the map to see much more detail in a specific region.  The main page shows the map based on the most current weather information, but the Gallery page has some snapshots linked to specific points in time (like Hurricane Sandy).  I love that even the speed legend on the side is animated!

You can also buy a poster version as an art print.

Thanks to Jeff Jarvis for sharing this on Google+!

Thursday
Jul262012

2012 London Olympic Venues

2012 London Olympic Venues infographic

The 2012 London Olympic Venues from Cottonwood Financial’s CashStore.com site is an interactive infographic design showing facts and information about each of the main event locations in London.

The 2012 London Olympics are rapidly approaching, and they’re set to become the most expensive games yet with a budget of $14.5 billion. So what can Olympic attendees expect this year? Impressive landmarks, state of the art facilities, millions of sports fans and of course the best athletes in the world competing for the title of Olympic Champion.

Click the venues for more information on the events and ticket prices (figures in U.S. dollars and British pounds) for each one.

I really like the interactivity, but I think they used way too much text.  All of the statistics (like seating capacity and ticket prices) should have been visualized to make it easy for the reader to see.  Event icons and the Olympics are always tied together, so lining up this year’s icon designs instead of the text event names would have been more visually appealing as well.

The reader clicks on each of the venues to bring up different information, but the building illustration is the only indicator showing which venue the information is referring .  A connecting line or a highlight color to indicate which building is currently being displayed would have helped out tremendously.

It’s all designed in HTML5 too, so all of the interactivity works on mobile devices (like the iPad) as well!  Very cool!

I’m very jealous if you’re going to any of these events, but this guide could give you some idea of what to expect when you get there.

Thanks to Joe for sending in the link!

Monday
Apr022012

Jer Thorp: Make data more human

Jer Thorp works in the New York Times labs to design big data visualizations, and his great presentation from TEDxVancouver was just posted.

Jer Thorp creates beautiful data visualizations to put abstract data into a human context. At TEDxVancouver, he shares his moving projects, from graphing an entire year’s news cycle, to mapping the way people share articles across the internet.

Jer Thorp’s work focuses on adding meaning and narrative to huge amounts of data as a way to help people take control of the information that surrounds them.

He’s been involved in some great big data projects that I have posted about here on the blog previously, like OpenPaths.

Monday
Apr022012

Interactive Infographic: Coca-Cola vs. Pepsi

 

The Coke VS. Pepsi: The Cola Wars infographic from cnntees.com. Which side are you on?

For over a century Coke and Pepsi have been at each other’s throats in a constant struggle for a bigger piece of the billion-dollar soda market. 

Along the way the companies have picked up a slew of loyalists and fans, adamant that their cola reigns supreme. While there are countless spots online to check out the history of either company we decided to put together an interactive infographic, putting all cola war highlights together in one spot.

This is a really fascinating experiment with infographic design.  Although it appears to be a static infographic, it’s actually interactive.  If you look closely, there are two videos built directly into the middle of the infographic that play when clicked.  The growth chart at the top is also interactive.  Click on a decade, and then choose the specific year, and it displays events in each companies history related to that time period.

The interactivity is so subtle though, most people will probably miss it without me spelling it out in the title and here in the commentary.

The financial stats section is a really poor use of pie charts in the bottle caps.  The logo images work, but pie charts are for visualizing percentages.  Here, they forced the data into the cute visual, but it makes the data confusing and hard to understand.    Are the charts visualizing the percentages of each expense related to total revenue, or just arbitrarily visualizing the values to represent the comparison between the two companies?  No percentages are shown, and no values are shown for the values of the total pie.  This is forcing a round peg into a square hole.

At the bottom, it’s missing a URL to the original blog post (so readers that find this on the Internet can find the original high-resolution infographic), a copyright statement, a trademark statement and a credit to the designer.

Thanks to Ron for sending in the link!

Friday
Nov112011

Broken Appliances: Repair or Replace?

 

PartSelect.com brings us a cool, interactive infographic that helps customers evaluate what to do with their Broken Appliances: Repair or Replace?  Obviously a design from an appliance parts retailer showing customers why they should buy repair parts instead of replacing their appliances, but it’s really good information and doesn’t feel like a hard sell.  It is actually very valuable information for consumers.

We created this diagnostic infographic to troubleshoot some of the common problems that affect household appliances. Clicking on the pulsing dots shows each common issue and the parts required to correct the problem. Many people replace an entire appliance, which is neither cost-effective nor environmentally responsible. We displayed the average cost of replacing the appliance as well as the cost of the parts required to fix the problem (and a scale of the difficulty of the repair).

I really like the design that places the replacement parts radially around the applicances.  The color coding for cost and difficulty also works well, but it would have been better without the legend (“Legends are Evil”).  Without the 1-2-3 as the text in the arc, it could have easily said Easy-Difficult-Very Difficult in the arcs.

Apparently the length of the arcs doesn’t have any meaning, although it looks like it should.  They are just designed long enough to fit the text and the images.

Figure 1 - Layering of the symptoms animation

In addition, PartSelect posted a lengthy, thorough post about the interactive infographic development process they went through.  This is fantastic!  While I may not agree with all of the decisions they made along the way, this type of transparency and under-the-hood information is what helps build credibility and trust with customers.

The Interactive Infographic Process

The process now looks like:

  1. Project Manager decides to make an infographic with some data.
  2. Project Manager brings on board a Programmer and Designer.
  3. Project Manager must decide on the balance of technology vs audience, based on discussions with the team.
  4. Designer fleshes out some rough concepts.
  5. The team meets to discuss; each has specific input:
    1. Project Manager: vision and potential target audiences.
    2. Designer: design concepts and how to make it clean.
    3. Programmer: what is possible. Ideas based on what the technology can do which PM and designer may not be aware of.
  6. Designer creates fleshed out design.
  7. Team meets again and iterates over designs until everybody happy.
  8. Programmer puts together technical spec on how it will be built, which will influence deliverables from designer.
  9. Designer sends across deliverables decided by programmer.
  10. Programmer builds the first functional version.
  11. Team meets and probably iterates and refines design in same process.

Thanks to Stephen for sending in the link!

Thursday
Sep222011

The Evolution of the Web

 

The Evolution of the Web is a cool, interactive visualization from the Google Chrome team (along with Hyperakt and Vizzuality) that explores the evolution of web browsers over the last 20 years.

Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today’s web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they’re supported in all web browsers.

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.

Clicking on any of the browser icons brings up a cool visual history of the window design for each version.

Although there is a lot of data showning the version releases along the timeline, part of this design is just pretty.  The flowing colored bands seems to grow bigger over time implying increased usage of each technology, but their placement behind the broser lines doesn’t actual show which technologies were used by each browser. 

In fact, there’s a subtle marketing spin that has all of the lines converging behind the Google Chrome logo in 2008 and then exploding into the future.  And the HTML5 line seems to imply that it will take over the Internet in 2012.

Found on Flowing Data.