Matt Robinson & Tom Wrigglesworth have created a visualization about the ink usage of different typecases. The brilliancy here lies in the method on how the data is representated: the ink itself!

A selection of the most commonly used typefaces were compared for how economical they are with the amount of ink which they use at the same point size. Large scale renditions of the typefaces were drawn out with ballpoint pens, allowing the remaining ink levels to display the ink efficiency of each typeface.

Simple, understandable & clever.

Torstein Hønsi from Vevstein Web has created a really impressive Javascript charting library. Highcharts allows a developer to easily include interactive charts in websites and webapplications. It currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

The graphics are rendered using the Canvas tag or occasionally SVG & VML. The supported browsers are Safari, Firefox, Opera, Internet Explorer+ and it also runs great on the iPhone. The default skin for the visualizations does quite a good job regarding readybility and clarity. Unfortunately there are some Powerpoint-esque skins as well (please, just cut them out). One really nice feature is the zoomable timeseries, which I haven’t seen before in any Javascript library.

The library is free to use for non-commercial applications and there are commercial licenses as well. I look foreward to see some real-life examples of it but the Demo Gallery looks good so far.

Kim Asendorf from Kaubonschen.com has notified me about the release of the SPAM VISUALIZATION website. It’s a collection of various visualization methods to display the Spam Catalog database.

The application let the user examine multiple attributes of the spam database with different views like: wordScore, quantityGrid or timeTable:

All of the visualizations use a common, very basic visual language and overall the application has a strong aesthetical look and feel. It’s built with Flash and can be experienced on spamvisualization.net.

Thanks Kim

Irene Ros offers a way to analyze traffic data in a fresh and exciting way. The visualization lets you explore traffic patterns of MBTA commuters across the various lines and stations over a single day.

The visualzation is based on the “Theme River” visualization method we’ve seen in the Last.FM Visualization for example. Now instead of a linear timeline, Irene “wrapped” the graph around the 24 hour clock. This makes sense as the data represents only average numbers for any day.

Speaking of the data, here’s how to read the visualization:
The length of a wedge represents the amount of passengers per hour. So, it comes down to comparing the length of the wedges to see where and when more people pass a station. I have to say that comparing bars that are ordered around a circle isn’t the most intuitive way to compare their length.

The application lets the user choose between the different transportation lines or view them altogether. After clicking on a wedge a bar chart appears that displays the absolute numbers thus making comparing much easier.

The project was released as part of the Visualization Challenge by the Executive Office of Transportation. SVG is used to visualize the data with the help of Raphaël JS. More information can be found on the project website.

Inspired by Seth Godin‘s blogpost about the clickrate of common online ads I’ve visualized the data to punctuate the actual situation. The data is provided by comScore and the StartCom MediaVest Group.

Here’s a quick view on the data:

I haven’t come across a common visualization method to represent this type of relationship so I came up with this: As the data are two correlating shares from 0 to 100% I started with two parallel bars divided in the shares for each group. The relating shares are connected with a thin line. The opacity of the resulting shape represents the shares of 100 percent.

Any thoughts about this type of visualization are very welcome and I see to hear some comments.

View full size on Flickr

Fontshop is celebrating its 20th birthday and they invite us to celebrate with them. On this occasion they’ve created a delicate infographic documenting amusing and enlightening statistics. If you like what you see there’s more for you to celebrate: the infographic is growing over the coming weeks.

View the Javascript powered infographic on Fontshop.com

I recently stumbled upon (Hat tip @herrstucki) FlipFlopFlyball – a website by Craig Robinson. The website merges two of Craig’s passions: Baseball & Infographics. And it seems like a match made in heaven! The ideas behind the website in Craig’s own words:

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.

Craig created a great collection of different types of infographics based on Baseball data. Some focus on insight while others tend to be more entertaining. Here are some examples of his work, but be sure to check out the full collection.

View more on Flip Flop Fly Ball

Recently mashable.com published this post regarding the market share of internet browsers. The author focused on how well Google Chrome could establish itself in it’s one year existence. To visualize the market share of some of the most popular browsers the author used a diagram from Market Share / Netshare.com. It’s one of the stereotypical 3D Piecharts we all know from tools like Excel or PowerPoint. I mainly struggled to read the pointers to the smaller wedges. I took this struggle as inspiration for a quick redesign of the chart.

The original

On the left hand side we have the color coded 3D Piechart with the percentage of market share as digits. On the right we see a legend listing the browsers by color and again the percentages.

The refinement

• Pure data
  I reduced everything to the bare data—just the percentage and the name of the browser. Already clear and understandable but maybe a visual representation could improve for intuitive reading…
• Horiziontal barchart
  With a horizontal Barchart next to the browser name we show the varieties in a relative manner. Colors can be dismissed but for the sake of focus on Google Chrome I introduced red as a “signal color“. I am not yet sure about the position of the digits, therefore…
• Position of digits
  Moving digits closer to the barchart would describe the bars better and would give the reader an immediate indication about the absolute values that are represented. But should they be aligned to each other or rather…
• Aligned digits to the bars
  The placement of the numbers right next to the bars may harm readability of the numbers in sequence a bit but it lets the viewer focus faster on the promoted value (Chrome’s market share in this example). Reading a vertical barchart isn’t as common as a horizontal one, so let’s try another version.
• Horizontal alignment
  Once horizontally aligned, the barchart seems easier on the eye. Reading from left to right to the promoted value is intuitive and the position of the percentages feels natural. But the labels are too long for a horizontal alignment and the abbriviations don’t feel common enough to be used (GC, anyone?) — is there a solution for this regarding the web-savvy audience of mashable.com?
• From name to icon
  As any of the labels represents a brand itself (beside the nasty “other”), and as these come with a memorable logo (used on websites, as favicons, as the application icons, etc.) it is a save option to use the logo itself as the representation. This saves screen real-estate and helps avoiding the usage of uncommon abbriviations. Also we can get rid of the underline to clean up the visualization even more.
• Removing the metrics
  Update: removing the % sign from the actual digits helps getting faster to the numbers. As suggested in the comments from Taurice and Naomi I moved the metric to the title and thus leaving the visualization even cleaner and better readable.

Any suggestions?

That’s it for this quick analysis and refinement. Did I neglect something that is present in the original graphic? Or could I reduce it it more to make the graphic even easier to read? Any of your comments would be highly appreciated.

Ever had the need to communicate data clearly without having to distribute the raw data? Maybe by quickly include an interactive chart in a webpage? Then FusionCharts Google Gadget maybe the perfect solution for you.

Created by the FusionCharts Team, FusionCharts Google Gadgets are an easy and effortless way to visualize data on any webpage. The Google Gadgets are based on Adobe Flash technology and the FusionCharts platform. Unlike the FusionCharts platform, the Google Gadgets are for free. The configuration happens on a dedicated interface giving you plenty of possibilities to create the clearest visualization of your data. The Gadged can then be easily included in a webpage, your iGoogle or Google Desktop.

The workflow as described by the FusionCharts Team:

Using FusionCharts Google Gadget, you can plot a variety of charts, ranging from the simple 2D charts to complex 3D charts. Each chart can be generated with the same ease of use. All you need to do is visually configure your chart, enter data, and finally copy-paste the generated code to your blog/web page. No need to get your hands dirty with any sort of programming or coding.

The FusionCharts Google Gadgets are suited to be used with static data. If you need a solution for dynamic data you might want to have a look at the excellent FusionCharts platform. The commercial platform supports over 75 chart types and 200 maps for your webapplication.