Measure the Internet, Map the Internet

One area we’ve been paying particular attention to recently has been the internet traffic for different web site categories. Our friends over at comScore Inc. collect a wealth of information for “measurement of the myriad ways in which the Internet is used and the wide variety of activities that are occurring online.” Nice alliteration, guys.

Using some of the data they’ve allowed us to share with you, we had the bright idea to stuff it into our most favoritest charting type, the treemap. And what’s better than a chart? Answer: an interactive chart with a toggle button.

You’ll need to know a few things to really Juice the data:

  • The map is based on unique visitors by site for August 2007 and November 2007.
  • Red means a decrease in unique visitors over that three month time period and green means an increase. Black means there is no change.
  • You can click on the category headers to zoom into each category. Click on the category header again to zoom back out.
  • We provide two views of the data: the default shows just the top ten sites in each category. However, for nearly all categories, sites outside the top 10 account for over 50% of the visitation in the category (the exceptions were Search, Portals, and Auctions where the top players dominate traffic). A checkbox adds “All Others” and gives you a better sense of the size of each category. You can toggle these two views using the checkbox just below the map.
  • Due to some confidentiality restrictions that we’re under regarding the raw data, we couldn’t show other metrics that would really make this visualization sing—but I bet if you contacted comScore, they’d be glad to discuss with you.
  • A few tech notes. The treemap is adapted from Josh Tynjala’s capable open-source Flex Treemap component. Site images are provided by Amazon.com’s Alexa site thumbnail service.

So, without further ado, take a gander at our latest liberated data:

http://internetmap.juiceanalytics.com/

There’s so much information here, you won’t have any trouble drawing your own conclusions, but here are a few conversation starters:

  • Notice that there was a distinct increase in retail web visitors leading up to the holiday seasons.
  • Surprise! eBay owns auctions
  • Not too good of a showing for those online gambling sites; travel either.
  • Sports traffic is up… but not for the MLB.com site. Oh yeah, baseball season is over.

Enjoy.

Disclosure: comScore is a client of Juice Inc.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

9 comments | Show all comments only the last 5 are shown


January 28, 2008
Friedbeef said:

Hi - does the app work in Firefox? Because I'm having problems loading it up with the FF and Flock browser. Works OK on IE7 tho....


January 29, 2008
derek said:

What's the history of the use of black in treemaps? It seems to run counter to the normal tendency for info visualisation to have white as the background.


January 30, 2008
Brian Timoney said:

Very interesting use of Flex components; quite sticky indeed.

I guess it's cold comfort to the newly laid off, but I was struck how prevalent Yahoo was across a number of different categories...

Brian


January 31, 2008
Fubiz said:

Excelent title!


February 12, 2008
Fin said:

Interesting google doesn't come up in the portal rankings. I use my google homepage about 60 times a day. It is as much a portal as Windows live.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Analytics Roundup: Infovis Grabbag

175+ data and information visualization examples and resources

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

0 comments | Add a comment

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment






Square Pie in the Eye

The New York Times—normally a source of clear and interesting infographics—produced the following graphic over the weekend.

NY Times square pie graphic

This is bafflingly awful—it’s Tiger Woods carding a 90. Square pies are an infographic seasoning—they’re cilantro, not steak. Here are a few of the problems with this graphic:

The color choices are bad. The saturations between groups are considerably different. The yellow is highly saturated while the other colors are not. The increased saturation draws your attention to the yellow area, but this is just a category like the others. I’d imagine someone with red-green color blindness would have trouble distinguishing the other colors.

There’s a hole in the center. Presumably this indicates people who didn’t respond to the question, but this is not noted. There are no gridlines in the white section even though the non-responding group should be treated visually like the other groups.

It’s hard to compare the sizes of groups. People are better at comparing lengths than volumes. Mixing length and volumes—some of the of the response categories are arranged linearly, while the inner category is basically a volume (with a hole!)—makes it nearly impossible for people to use their spacial skills to side up the differences. Asking people to compare lines and donuts is like asking whether you prefer the color blue or raw carrots. For the record, I prefer carrots.

If you’re interested in the concept of square pie charts, the place to start is at EagerEyes. If you want to learn how to make them yourself, check out our contest, results, and screencast.

The Times is still a source of great design and inspiration. Here’s another graphic they also produced over the weekend that shows cancer incidence, survival rate, and gender differences in a way that is clear, clean, and concise.

NY Times cancer graphic

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

7 comments | Show all comments only the last 5 are shown


July 30, 2007
Chris Gemignani said:

Tony, One of the really bad decisions here is how the pie is filled by spiraling in from the outside. Filling the square pie by filling a row of blocks horizontally until you reach the target would have been a little better.


July 30, 2007
Tony Rose said:

Yes, exactly. That spiraling is extremely difficult to follow and adds no value. Using a square pie and shading starting in the lower right for each value would have been better, but would have created five graphs. I think a bar graph would give the readers the same information and would cut down on the comprehension time.

Your post back in December shows an example:
http://www.juiceanalytics.com/writing/2006/12/solving-the-pie/


August 2, 2007
Jordan Lund said:

My initial reaction towards square pie charts, pixel charts, or whatever you want to call them is that they are horrible and unreadable.

However now that I've had time to think about it, they could work provided there were a style manual for setting them up.

For example:

1) Charts must be filled in from left to right from the largest value to the smallest value.

2) Data labels must be placed in the first column which contains a majority of that value.

3) It is allowable to complete a column with a smaller value if this will prevent other columns from being broken un-naturally.

So, taking the NYT data and applying the three rules I just created, you end up with this:

http://img293.imageshack.us/img293/5534/gridchartco5.jpg


August 12, 2007
Sherman Dorn said:

Okay, the square-pie nonsense trumps today's awful bubble-map on attacks in Afghanistan (http://www.nytimes.com/imagepages/2007/08/12/world/20070812_AFGHAN_GRAPHIC.html). Good article, bad infographics, no cookie for Times graphics folks today!


September 9, 2007
Bob said:

It's a visual gag.

It's supposed to look like the light at the end of a tunnel, not make it easier to compare the proportion of 4 categories (which even a seven year old can do, even without the aid of a chart, and certainly without complaining about how difficult it is).

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Beauty in the Details

The design process is about whittling away distractions, making the obscure feel obvious, making the obvious feel implicit, and doing it without anyone noticing. To the untrained eye, your best work looks like you’ve done no work at all. If you’ve done a stellar job, then your design will feel utterly obvious. —Neil Mix from Paradox of Elegance blog post.

Neil goes on to say that "it’s easier to see the flaws than it is to see the elegance." That may be true, but a careful look at the best interfaces reveals the little and beautiful elements that make all the difference. These small features might not determine whether someone uses a piece of software, but they will determine if the user enjoys their stay:

Designer Bret Victor, who we first wrote about here, has developed a desktop widget for the SF-area train schedules. He allows users to change their query right in the description of an object—notice the red text.

Magic Ink widget

While we are fawning over Bret's handiwork, here's another cool feature he built into his Click-Shirt site for customized design of t-shirts. This bar at the bottom of the screen tracks the history of changes as the user designs a shirt. Each time I make an edit, I get a visual breadcrumb trail to easily see my history and backtrack.

Click Shirt

Google Finance stock charts have a nifty little device that lets you change the time range you are looking at. You can change both the size and the start of the time window using one adjustable object. Not to mention the embedded alert markers.

Google Finance stock chart

Some elegant touches are more subtle. Check out the search toolbar in Firefox. When I start typing, it fills out search terms both from my history (above the line) and from common searches (below the line).

SearchToolbar

The Safari browser for Windows offers a new approach for finding words in a web page. The browser greys the screen and highlights the target word. And you can to tab through the various instances of the word with the orange highlighting.

Safari Finder

And while we are on the subject of Apple: sometimes the difference between clunky and good is simply about the quality of the images. A while back I wrote a break-up letter to PowerPoint—one reason was that the Mac-alternative called Keynote does a much job with the look of default charts. The chart on the right feels more professional, in part due to the anti-aliasing of the image. (Joel on Software has an interesting post about anti-aliased fonts here.)

PPT chart Keynotechart

Finally an infographic from the New York Times called the Sector Snapshot. The beauty of this presentation of information is in the careful use of contrast and skill at keeping the focus on the numbers.

NYT sector

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

1 comment


June 19, 2007
derek said:

You're dead right about anti-aliasing, although with Excel for Windows my beef is not with the fonts themselves, which are fine enough to suit me, but with the graph symbols, which are embarrassingly childish-looking at any serious resolution. I have resorted to using data labels in Wingdings fonts, centred over a data series formatted so that its symbols are invisible, and this is sometimes acceptable. Though sadly not always, due to the tendency of text and drawing objects to drift away from their appointed positions when printed, exported, or resized.

If they could fix that problem, I would strongly suggest a modern graphics program should make use of font technology for its symbol set, with specialist fonts making hundreds of different symbols available to the chart maker instead of the WinExcel traditional circles, squares and diamonds etc.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





How to manipulate scale to not make your point

Today I got this chart in an e-mail from the well-meaning alumni fundraisers at my school:

Alumni Challenge Chart

Aside from the crazy looking gridlines, monsterous size, oddly phrased title, and overkill for a single data point, its greatest sin is not giving the Young Alumni enough credit. They blew away their goal of 300 gifts, you just wouldn't know it from this chart.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

6 comments | Show all comments only the last 5 are shown


June 1, 2007
darrell said:

In addition, the chart scale is cropped at about 400, and the data clearly indicates 530 is the actual figure. Do I detect a hint of "well we can't tell them we're overfunded and then ask for more contributions"?

Send them a cheque with the signature cropped off. :)


June 1, 2007
Jorge Camoes said:

If you want to see a full range on malicious, misleading or plain stupid charts you just have to browse through some corporate annual reports. You can learn a lot on how to lie with charts.

(And then take a look at this one again.)


June 4, 2007
TonyV said:

To me, it just looks amateurish - I'm guessing that it wasn't intended as an example of all the mistakes that could be made in a chart? You could be cynical and interpret it as "now we've got the cash in, we've got better things to spend our time on than taking the effort to communicate properly". But I'm not cynical ...


June 4, 2007
derek said:

I don't see the size as monstrous (what is "size" in the world of computer display?). Instead I see the supporting text as teeny, a common mistake of "default chart" users in Excel.

I used to have a theory that this was caused by us older people who were taught to make scatter charts in science class at school by being given a sheet of graph paper to fill in. Since the accuracy of hand drawing is better the larger the grid, we used as much of the grid as we could, and squeezed the labels and title into the thin margins.

This theory, while neat and simple, doesn't account for a generation that by now ought to be far beyond drawing on paper, and should have grown up using computer charting tools.


June 4, 2007
James Taylor said:

The power of a college education! Great example.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Earlier writing