Tag Archives: Infographics

links for 2008-09-24

Sparklines, Charts Reduced to the Max

I’m a huge fan of Edward Tufte’s Sparklines, although I have to confess I haven’t used them as much as I should in this blog. Here’s a couple to illustrate what they’re all about: Wifi and media coverage. But the problem has been a shortage of tools to automate this. Here’s another, from Andreas Flockermann, founder of
BonaVista Systems – Sparklines, Dashboards, Charting for Excel and Microsoft Business Intelligence
who has created something called MicroCharts (cool name) — “charts reduced to the max” (cool tag.)

I’m going to try it out.
 

Mapping Your Drive

I’m a big fan of treemaps, and a big fan of anything that keeps your hard drive organised (or any kind of media, really.) So treemap software that create a map of your hard drive are hard to resist, which is why I’ve written about them a fair deal. (For an attempt at an exhaustive list of treemapping software, check out this page.) Here’s a new version of SpaceMonger, one of my favorites, which is now officially out. Just to confuse you, it’s version 2.1, but that’s only because version 2.0 was never released.

Basically, treemaps create a box-like map of whatever it is you’re mapping — in this case, your hard drive. In the illustration above, you can see the bigger rectangles as folders, with the subfolders inside them. What’s the point? You can see at a glance how much space you’ve got left (the grey bit) and which folders, even which files, are taking up space. You can even use it as a file manager, since by clicking on a folder that zooms into the folder in question, and by clicking on a file you can launch it. Right clicking allows you to do things to the file, including delete it. It’s all pretty intuitive stuff.

SpaceMonger isn’t the only one out there doing this, but I like the way it does things.

 

Spark That Line

I’m a fan of sparklines, Ed Tufte’s graphical depiction within text of numerical data (it’s more exciting than I’ve made it sound). Here’s a couple of updates: First off, The Hardball Times is using them to show a month of scores of the major U.S. baseball teams:

Sl1

The bars are win (up) and loss (down). But also they’ve packed in a bit more information there: horizontal lines denote home games while gray bars represent games decided by two runs or less. You can see it better here:

Sl2

Nice work, guys. Meanwhile one of the best sparkline makers on the block, the Microsoft Office add-on SparkMaker from Nicholas Bissantz, is now into version 3.0. Sparklines will now update automatically when data in the original spreadsheet changes. The images are now scalable and more easily tweaked, and look better in print. Other tweaks are in there which I look forward to playing with.

Sl3

In short, sparklines are a great way to pack useful and yet otherwise boring looking information into a visual display that fits into, or alongside, ordinary text. One day it will be big. It deserves to be.

A Directory of Visualizing Tools

Update Feb 2007: Just came across some cool stuff from digg labs (the guys behind digg) who haev some coold stuff I’ve added below.

In this week’s WSJ.com column I wrote (subscription only, I’m afraid) about treemaps, tools which allow you to look at data differently:

One of the things that bugs me about our oh-so-cool information revolution is this: We show such little imagination in how we actually look at that information. Think about it. We have all this fascinating data at our fingertips and yet we have decided the most effective way of viewing it is in…a table. Or a chart. Or a list of search results (“1.7 gazillion matches — click here for next 10 results”). There has to be a better way.

A treemap “is a bunch of squares, arranged to form a mosaic. The size and color of each block mean something”. It’s probably easier to show it than to explain it:

Treemap
(from RoomforMilk, see below)

The size of blocks indicate, in this case, the popularity of each subject, shades and color indicate how recent the topic has been updated. Click on one and more information appears. Best is to check them out: they’re intuitive and fun to use. Really.

Here’s some links (yes I know this should be in the form of a treemap, but I’m not that clever) from the column and some stuff I wasn’t able to put in for reasons of space (Yes, I am aware of the irony. Yell at my editor): 

  • stack a vertical bar chart of activity, with the stories themselves moving way too fast down the screen (from digg labs)
  • digg’s bigspy an impressive scrolling list of stories, size dictated by the number of diggs.
  • swarm another digg offering. not sure what this does, actually, but it looks cute.
  • Panopticon a leading supplier of professional Visual Business Intelligence to the financial services industry as well as other fields of business. Download their free Panopticon Explorer .NET Learning Edition which lets you view treemaps of files, processes, event logs and spreadsheets.
  • Marcus Weskamp’s excellent newsmap
  • Peet’s Coffee Selector good example of a treemap at work for consumers
  • RoomforMilk lovely looking treemap of Slashdot headlines, or as the website puts it — “RoomforMilk.com is a news feed pasteurizer and homogenizer featuring Slashdot News Headlines. RoomforMilk is not even 2% affiliated with Slashdot.org.” Colors and shades indicate new/old (fresh/stale) stories, blocks indicate keywords.
  • del.icio.us most popular treemap from codecubed very cool-looking map of the most popular links from social bookmarking tool del.ico.us, by derek gottfrid.
  • Microsoft Treemapper with Excel Add-In. Simple tool “to view hierarchical data conveniently from an Excel file.”
  • Wikipedia World Population in a treemap by The Hive Group, as a demonstration of their Honeycomb technology. Very absorbing. Check out their views of iTunes’ Top 100 and Amazon.
  • NewsIsFree also uses Honeycomb.
  • CNET News’ Hot page.
  • Great recent piece by Ben Shneiderman, inventor of the treemap. Didn’t get to talk to him but I hope to at some point.
  • Wikipedia entry on Treemapping.
  • Grokker search, a kind of treemap. (Thanks to a reader of the column for that.)
  • WSJ’s Map of the Market, from SmartMoney. Uses Java, but pretty cool.

And, some software to visualize your hard drive (Windows, unless stated)

  • FolderSizes strictly speaking not really a treemap, but a good way to visualize your drives via pie charts. “It can quickly isolate large, old, temporary, and duplicate files, or even show file distribution by type, attributes, or owner. All with multiple export formats, command-line support, shell context menu integration, and much more.” $40, free trial.
  • SizeExplorer Features include folder size, graphical charts, file distribution statistics and reports (by size, extension, type, owner, date, etc.), biggest files, network support, snapshots, file management, printing of file listing, compress into ZIP file, exports to Excel, html, xml and text files, etc. $16-45
  • DiskView another pie chart approach, but useful. DiskView integrates into your Windows Explorer, pretty well. New version also indicates how fragmented files are , and, if your hard disk supports it, its health
  • SpaceMonger my favorite space-hogger hunter. Does a great job of mapping your hard drives and showing you what is taking up space. New version out soon, I’m told.
  • DiskAnalyzer Similar to FolderSizes, though not as pretty. Free tho.
  • WinDirStat free program which will create a treemap of your drive(s), based on the KDirStat for the K Desktop Environment, an interface for UNIX.
  • DiskInventory X similar to WinDirStat/KDirStat, for Macs
  • SequoiaView similar to the above. Linked to the company MagnaView, which sells commercial versions of its treemapping software “take input from virtually any information system, file or database, and support the development of an impressive range of visualizations”. (thanks, Michael.)

You can also see a bunch of posts I’ve done on different kinds of newsmaps, including some interviews with folk like Marcus Weskamp and Craig Mod, creator of Buzztracker, here. I’m sure I’ve missed lots; please do let me know either by email or comments.

 
 

Google Finance Raises the Bar (Chart)

Google’s new Finance site is worth a look, but it’s only when you look at the graphs do you realise how good it is. Take this snippet from the chart on the Apple page:

Gfin

The overall chart is a great example of beauty and graphical simplicity. The letters correspond to a scrolling column of stories that tie in date-wise to the stock price. Drag the main chart around and the column of stories moves up or down to reflect the period now visible in the chart window. The bit at the top, meanwhile, is a longer timeline+chart which can be used to narrow or expand the larger chart below (by grabbing the two vertical little tweezer things, there’s probably a fancy name for them) and pulling together or apart.

There’s nothing revolutionary in here, but it’s executed very well, and to me is the first time that Google has really shown that it intends to eat into Yahoo!’s core market big time. There’s lots of other data on the page — all that one would need to make an investment decision, I’d wager — but the chart is the thing. What would be an afterthought elsewhere turns into a really dynamic tool. Exciting stuff.

Catching the Spark

This is the week of hobbyhorses. I love sparklines though I’ve been very lazy in actually trying to make more use of them. Sparklines are simple little graphs that can pepper text to illustrate data. I went through a phase of using them a year ago on media coverage of technical stuff, the excessive online habits of Hong Kongers and a rather lame illustration (my first effort) at the rise and fall of Internet cliches.

Anyway, interest seems to be returning for sparklines. Here’s a good piece on Corante on Sparklines: Merging visual data with text  about a new utility that lets you create sparklines for your web page or blog:

Joe Gregorio took the idea and ran with it. He created a web-based utility that lets you input a series of comma-separated values from 1 to 100 in order to generate a sparkline you can add to any online text. To give it a shot, I entered the numbers of repeat visitors to this blog beginning on Monday, March 13 and ending yesterday, March 19.

 

NewsIsFree’s NewsMap

Another cool NewsMap, this one in the form of a treemap from NewsIsFree:

NewsKnowledge and The Hive Group have joined forces to bring you News Maps, visual maps of the NewsIsFree headline database. News Maps allow you to quickly scan dozens of news articles and instantly understand what’s being reported all over the world.

Each square in the News Map is an article. You can obtain additional detail on each article by moving your mouse over it. You can read an article by clicking on it.

The Hive Group’s Honeycomb algorithm organizes news headlines by source. Size and Color information indicate article age and popularity (described below). You can easily filter and rearrange you results to view articles that meet certain criteria, or that contain certain text.

We hope you enjoy our News Maps and encourage you to explore these new tools. We hope that News Maps will allow you to access news more quickly and comprehensively than you ever thought possible.

Not the most beautiful example of the genre (my own favourite is still newsmap) but still good to see people experimenting with different representations of news. 

Coming To Your Phone Soon: Sparklines

For sparkline enthusiasts: The guys at Bissantz tell me their SparkTicker is now available for download, creating sparklines for Excel, Word, PowerPoint, HTML and information tickers:

SparkTicker exports your data to both your personal ticker on your screen and/or a marquee you can post on a website, see the top of this page for examples.
Download area

SparkTicker Excel Add-in requires Microsoft Office 2000, XP or 2003 and the .NET Framework. You are free to evaluate SparkTicker in a non-productive environment. Please note that SparkTicker is still in beta phase. Download and install is at your own risk.

What’s perhaps most interesting about all this is Bissantz’s idea that sparklines might work on cellphones:

Sparklines not only make sense as a powerful means to increase the analytical depth of a text, they can also add information where space is scarce. Imagine your company’s most critical performance measures being sent to your cell-phone, while your away from the office. Or get the updated seasonal data of your favourite soccer team the minute the last game is over.

On News Visualization, Part III

This week’s Loose Wire column in WSJ is about visualizing news. Researching the column I had a chance to interview Marcos Weskamp, the guy behind the very cool newsmap, who is setting up a studio specializing in interface design and information visualization for the web called B2 inc (no website available yet).

Here’s an edited transcript of our chat:

Jeremy: what are you doing in japan at the moment?
marcos weskamp: well Ive just moved back here. I’m setting up a small interaction design office.
Jeremy: i see… why japan?
marcos weskamp: I had been living here for around 7 years before. I’m originally from argentina, I came under a scholarhip from the japanese government to study graphic design. When I finished I stayed working and so I was until november last year when I moved to italy to do a graduate program in interaction design.
Jeremy: ah i see. could you quickly update me on newsmap? why you did it, what you think it offers over other interfaces, whether you have plans to develop it further, etc?
marcos weskamp: sure
marcos weskamp: newsmap was basically born after I saw googlenews. Again, I’m from argentina, so my mother tongue is spanish, I speak english since I was 5 and I’ve learned to read and write japanese when I moved here.
marcos weskamp: so when it comes to reading the news, the web is my main source of information and I often read online newspapers in spanish, english or japanese, sometimes reading about the same story in several languages, trying to find what are the nuances that differ from each point of view
marcos weskamp: when googlenews came up I was dazzled, it was impressive. not only they agregated news from thousands of newspapers online, but also – this is the most impressive part – whenever they find the same story in several newspapers, no matter how different the actual text that makes the story is, they group them all under one single cluster
marcos weskamp: so if there’s 300 newspapers reporting about, say “Insurgent attacks in Irak” they’ll file them all under one group and tell you: theres 1357 articles related to this story now
marcos weskamp: now that particular number was what most interested me. that means if I sumed up the total number of articles, and started making percentages, I could somehow see, which stories where the ones that the media was mostly paying attention to
marcos weskamp: now, in googlenews, today you have a total of 22 countries
marcos weskamp: inside each of them  you’ll find 7 categories: world, national, business, sci/tech, sports, enternatinment and health
marcos weskamp: so when I thought about visualizaing all of the articles inside googlenews, I came into treemaps
marcos weskamp: treemaps is a visual layout algorithm developed by Proffessor Ben Shneiderman from the University  of Maryland
marcos weskamp: Treemaps are used to create space constrained visualizations of quantitative hyerarchical data. Shneiderman originally thought about treemaps to visualize the content of his hard disk. If you think about it In your hard disk you have folders that have folders that have folders that have files
marcos weskamp: that structure is hyerarchical, and those files have a quantitative value; the k size of each of them
marcos weskamp: through a treemap then he could easilly find which where the files or folders that where taking the most space in is hard disk
Jeremy: (i’ve played with a couple such programs, like spacemonger…)
marcos weskamp: in the same way, in googlenews you have countries, that have sections, that have articles. the quantitative value is the ammount of related articles for each news story
marcos weskamp: so I then thought about visualizing the all the content of googlenews in one screen, using a treemap.
marcos weskamp: though I never thought newsmap would replace google news, I simply made it so that I could see, in a quick glance, which where the most important stories at the moment, and also be able then to compare how much attention media in each country gives to each news story
marcos weskamp: what I also found later was well how do different countries look at news. for example if you go to the US, you’ll see that most of the times, the US gives more importance to national news than international news
marcos weskamp: all other countries mostly report about international news
marcos weskamp: except italy where you’ll find that sports news always takes the most space;)
Jeremy: naturally!
marcos weskamp: in a way you can see how much we are all Biased through US centric media

Jeremy: do you plan to develop it further?
marcos weskamp: yes, definitivelly. I’m working on it:)
Jeremy: what kind of plans do you have?
marcos weskamp: well, I have to add all countries now present in the agreggator. from a data perspective that’s no problem. it only means there’s more html to process (I’m  not using the google api)
marcos weskamp: but in the front end I need to change the interface a little bit, and also it’s tough to display asian characters cleanly in flash without a hughe download. I’m looking into alternatives now. there will be other features like being able to reverse the treemap, so that you can find which stories where burried by the big news.
marcos weskamp: there’s also a java version in the works which allows me to display the actual shift of the news throughout the whole week. but well I hope you’ll see it when I publish it sometime later

Jeremy: do you see this kind of thing hitting the big time? replacing the way people view their news online ?
marcos weskamp: not really. again I never pretended to replace the aggregator. this is simply a visualization that gives you a different perspective of what’s inside googlenews.
marcos weskamp: I like to think about it as a complement to googlenews;)

Thanks, Marcos.