something in the way

In college, I was one of those guys who sat in the back and doodled in my notebook. Sometimes I fell asleep. One time I fell asleep and woke up in the middle of a different class. I blame the professor. Why would you turn off the lights for a two-hour session in a big lecture hall, while reading verbatim from world's most boring powerpoint presentation?

Anyways, we all have our seating pockets that we like to settle in. Skyrill, a two-brother design team, took it upon themselves to visualize the seating habits of their graduate student classmates in class 15.514 at MIT.

While you don't know the class or the students, it's easy to pretend that you do. Select students, find who likes to sit in the front all the time (Dario), who likes to sit in the back (Arthur), and who jumps around a lot (Takumi). It looks like the room entrance is on the left since people sit there more often. You can also play it out and watch each student move around the class.

Next step: provide more context. Why is the seat in the front, third from the right always empty?

[Classroom seating habits | Thanks, Ali]

OECD, with the help of Moritz Stefaner and Raureif, promote a well-being index beyond GDP in the Better Life Initiative:

There is more to life than the cold numbers of GDP and economic statistics — This index allows you to compare well-being across countries, based on 11 tpoics the OECD has identified as essential, in the areas of material living conditions and quality of life.

Based on topics such as health, housing, and education, each country is represented with a flower, and each petal on a flower represents a metric. The higher the index, the higher the flower appears on the vertical axis, and if the flower metaphor is too abstract for you, roll over each flower to see the breakdown by bar graph.

The strength of the tool is in the level of interaction it allows you and the ability to create your own index by weighting factors how you see fit. For example, do you value health over all other factors? Weigh that more, and the flowers update accordingly.

Finally, you can focus on specific topics such as housing to see how countries rank in each area and information on what indicators were used to compute each sub-index. The environment index, for example, is based solely on air pollution levels, whereas the education index takes educational attainment and reading skills into account.

So whether you're interested in a specific country, topic, or a group of topics, the interactive tools lets you see world data from plenty of angles. How does your country compare?

[OECD Better Life Index | Thanks, Moritz & Jerome]

OECD, with the help of Moritz Stefaner and Raureif, promote a well-being index beyond GDP in the Better Life Initiative:

There is more to life than the cold numbers of GDP and economic statistics — This index allows you to compare well-being across countries, based on 11 tpoics the OECD has identified as essential, in the areas of material living conditions and quality of life.

Based on topics such as health, housing, and education, each country is represented with a flower, and each petal on a flower represents a metric. The higher the index, the higher the flower appears on the vertical axis, and if the flower metaphor is too abstract for you, roll over each flower to see the breakdown by bar graph.

The strength of the tool is in the level of interaction it allows you and the ability to create your own index by weighting factors how you see fit. For example, do you value health over all other factors? Weigh that more, and the flowers update accordingly.

Finally, you can focus on specific topics such as housing to see how countries rank in each area and information on what indicators were used to compute each sub-index. The environment index, for example, is based solely on air pollution levels, whereas the education index takes educational attainment and reading skills into account.

So whether you're interested in a specific country, topic, or a group of topics, the interactive tools lets you see world data from plenty of angles. How does your country compare?

[OECD Better Life Index | Thanks, Moritz & Jerome]

As an entry to the Eyebeam DataVizChallenge to visualize your taxes, Budget Climb by Frankie Cheung, Zach Schwartz, and Fred Truman places you in a virtual environment where you can climb and stand on top of tax data.

Created using openframeworks, the Microsoft Kinect and OpenNI Budget Climb is a physically interactive data environment where we can explore 26 years of federal spending - giving us a unique perspective on how our government spends our money. In order to explore the data we must exert physical effort, revealing how the budget is distributed in a novel and tangible way.

Maybe not the best way to learn about the data, but I like the idea of data exploration as a game. See it in action below. It reminds me of Irad Lee's Spamology.

[Budget Climb | Thanks, Fred]

Data visualization and all things related continued its ascent this year with projects popping up all over the place. Some were good, and a lot were not so good. More than anything, I noticed a huge wave of big infographics this year. It was amusing at first, but then it kind of got out of hand when online education and insurance sites started to game the system. Although it's died down a lot ever since the new Digg launched.

That's what stuck out in my mind initially as I thought about the top projects of the year. Then I went through the archives. There was a ton of great work, too. So much so that I've gone with the top ten data visualization projects of 2010, instead of the top five.

One of the major themes for 2010 was using data not just for analysis or business intelligence, but for telling stories. People are starting to make use of the data (especially government-related) that was released in 2009, and there was a lot more data made available this year (with plenty more to come). There were also more visualization challenges and contests than I could count.

So here are the top 10 visualization projects of the year, listed from bottom to top.

10. Asteroid Discovery

Scott Manley of the Armagh Observatory visualized 30 years of asteroid discoveries. It's a straightforward animation that shows planets and asteroids orbiting the sun, with waves of twinkles as discoveries are made. I especially liked the contrast between human and automated discoveries.

9. Driving Shifts Into Reverse

Hannah Fairfield, former editor for The New York Times, and now graphics director for The Washington Post, had a look at gas prices versus miles driven per capita. The chart could've easily been an x-y scatterplot, but the extra step was taken to connect the dots so to speak. Points were ordered by time, and turns were clearly explained graphically.

8. The Evolution of Privacy on Facebook

This weekender by Matt McKeon of the IBM Visual Communication Lab explored the changes of Facebook privacy policies over the years. It came right after Facebook had made another update to push for a more public profile. Click on the interactive, and see what becomes public and how many people can see your postings.

7. What Online Marketers Know About You

Along the same privacy lines, this project from Andrew Garcia Philips and Sarah Slobin (plus five data gatherers) of The Wall Street Journal explored what online marketers know about you. I wouldn't say the visualization itself was super advanced, but thoughtful reporting and company breakdowns really made the whole piece work.

6. Education Nation Scorecard

The Education Nation Scorecard, by Ben Fry-headed Fathom Design, brought together sparse education data, at the national, state, and local level, in a single application. You can easily search for your own school or area to see how it compares to the rest.

5. Nature by Numbers

Nature by Numbers by Cristobal Vila isn't a typical data visualization piece. It's more of a demonstration of mathematical concepts, but it's a beautiful work that must be watched to fully appreciate. You will have a new found appreciate for Fibonacci, guaranteed.

4. Tracking the Oil Spill

The BP oil spill was the center of public attention for a good part of the year, and The New York Times did a great job at keeping us updated on all aspects of the spill. This included where the oil spread, what land areas were affected, and effects on wildlife.

3. Polymaps

JavaScript keeps getting faster and is becoming a viable route (over Flash) for visualization on the Web. Polymaps, by SimpleGeo and Stamen, is an open-source JavaScript mapping library that lets you build interactive maps from scratch. I haven't had a chance to use Polymaps for a project yet, but I'm looking forward to it, and I am sure we will see a number of Polymaps projects spring up next year.

2. Journalism in the Age of Data

During his Knight Journalism fellowship at Stanford, Geoff McGhee interviewed visualization trendsetters on how they deal and what they do with data in Journalism in the Age of Data. Just about every well-known data practitioner (and their work) is featured in the hour-long video. The focus is on journalism, but the topics apply to all types of visualization.

1. Tourist Maps

We've seen maps based on Flickr photos before, but most aren't much more than pictures on a map. Eric Fischer took the next step and looked for where the tourists flock, all based on data available via the Flickr API. Tourist photos are marked red, local photos are marked blue, and photos where tourism could not be determined were marked yellow. He did this for over 100 major cities in the world.

The end result was maps with pockets of tourists and locals. Visiting somewhere new and want an authentic experience? Maybe head towards the blue.

Fischer also had a fine series on race and ethnicity.

And there you have it. Those are my top ten picks for 2010. It was tough ranking all of them, as many of these could've placed top honors on a different day. What are your picks for the year?

• 5 Best Data Visualization Projects of the Year – 2009
• 5 Best Data Visualization Projects of the Year
• Interaction Design Pilot Year Churns Out Great Student Projects

The Joy of Stats, a one-hour documentary, hosted by none other than the charismatic Hans Rosling, explores the growing importance of statistics:

[W]ithout statistics we are cast adrift on an ocean of confusion, but armed with stats we can take control of our lives, hold our rulers to account and see the world as it really is. What's more, Hans concludes, we can now collect and analyse such huge quantities of data and at such speeds that scientific method itself seems to be changing.

From the description, it sounds like they'll touch on Crimespotting by Stamen, Google Translation, among other data-driven projects. Whatever they cover, it's bound to be interesting with Rosling at the front.

Below is a four-minute clip of Rosling presenting world development in the context of income versus lifespan. The material is more or less the same as his TED talk, but this time around, the motion chart isn't projected on a screen. The data is CGI'd into the air where Rosling can pluck and grasp at points as he highlights the significance of specific points in history. Zoink.

The Joy of Stats airs on the BBC next Tuesday. I really hope they put the full documentary online, but if not, I won't complain if someone accidentally records it and uploads it to YouTube.

[BBC via @krees | Thanks, Shawn]

• Hans Rosling: Providing Data, Inspiring Change
• Explore World Data with Factbook eXplorer from OECD
• Warning: Nerdy Waters Ahead – Baby Got Stats and Too Logit

It's fun to imagine the future. Every few months, someone takes a stab with a concept video or a proof of concept prototype, providing a glimpse into human-computer interaction and data visualization in a decade or two. What will it really look like? It's anyone's guess. But if people's imaginations are any indication, the future will be filled of data displays and 3-dimensional holographic objects projected into physical space.

Embedded Data

If there's anything uniform across all the ideas, it's ubiquity. In the future, computers won't feel like computers, and data will not just flow alongside the physical world. Instead, data will intertwine with your day-to-day like threads in a fabric.

Most recently, Frog Design, came up with some of their own concepts (which accompanied a fine series of articles on Life in 2020 in Forbes).

In this one a girl sees a jacket that she likes on someone else. She is able to look it up instantly.

Next, a man grabs a meal at his favorite fast food burger joint. A display pops up that tells him that he is fat and needs to exercise more. He feels sad. He later enjoys his burger and fries, accompanied by his American-sized coke.

Finally, in the the third, a married couple, Andrew Kendel and Jenny Daniels, sit down for a nice cup of coffee. They both feel smug because they have way more friends then Mandy Monroe and Maggie Jones behind them. April, however, who appears to have the same profile as Jenny doesn't seem to be all that excited to be hanging out with the lesser Mandy.

I kid, I kid. April doesn't actually mind.

Okay, so your first thought is probably that the world would be a very cluttered space with floating displays on top of everyone's head. The premise here though is that you'd wear something to augment your vision or simply see the data on your mobile. The main points are more about linked data, virtually unlimited resources, and data embedded in the everyday. People aren't going to actually walk around with projectors in their bags.

We've seen this before.

Microsoft has a boatload of concept videos for what they've envisioned for 2019. Here's the main one. The rest are variations of this, but for specific application areas like construction or medicine.

Freeband Communication envisions an embedded life too - with a dash of drama.

Designer Timo Arnall has something similar in mind for maps in his concept video, Map/Territory. Somehow the map displays itself to scale, below your feet.

Fantasy World

How about taking it all the way to the extreme, where, uh, no man has gone before?

Create an entire world virtually with holograms you can manipulate, but make it real in your mind - and someone else's.

Of course we can't talk future data interactions without making a reference to the Minority Report scene. John Anderson sifts through images and facts as if he were conducting an orchestra.

We saw something similar in Iron Man 2, but kicked up a notch. Tony Stark creates a completely new element. Fancy that. There were 3-dimensional projections flying every which way and things imploding and exploding with a clap of a hand.

Let's not forget that just about every surface of his house and lab was interactive and functioned as a single unit.

Looking Ahead

Crazy stuff. Are these ideas really that far fetched though? Crazy as they may sound, sometimes it's funny how life likes to mimic the imagination. We already have visual related-image search, social networks are finding their way into the real world, and data collection has gotten super easy with advancing mobile technology. Skinput takes the interface out of the device, and uses your body as the input surface. We've even got Minority Report style interfaces popping up.

So how much of these concepts will actually come to fruition in the next decade? Like I said, it's anyone's guess. Whatever it is, it's going to be fun.

What do you see in the year 2020? Let your imagination run wild.

“The hills are alive /
with the sound of browsers”

Ever thought you’d make sounds in a browser, or have new ways of visualizing music playback? It’s happening, with builds of Firefox anyone can download.

Work to make browsers rich with sound synthesis and visualization continues. “Compatibility” isn’t really an advantage yet, because Firefox is the only browser with support, and only in the next version, though that could change in the future. And yes, Flash is capable of some of this, too (though not real 3D), with 90-95% saturation, conservatively, of computers. But if not compatibility, what these experiments do represent is what happens when someone working on a tool (Firefox, in this case) really commits to making sound a priority, and supporting free standards and developer tools (an emerging standard API, WebGL, Processing.js, etc.).

In fact, it’d be great if this occurred everywhere: if you’re making a platform, make sound a priority, and people will do mind-blowing stuff with your platform.

Among the latest fruits:

1. 3D eye candy. Charles Cliffe has a psychedelic visualization of sound playback. The JavaScript nuts are also proceeding to do more things with their language than most would deem possible, even moving DSP calculations to JavaScript code. I remain a bit skeptical there: the question to me isn’t whether JavaScript is “fast enough,” but whether native code is faster or simply the better tool for some jobs. Details below.

2. Patching in a browser – with a Pd clone. Chris McCormick is porting a subset of basic Pd objects to the browser. Now, one side of me wonders whether Pd is the best choice; it’s a somewhat idiosyncratic, if powerful, language for describing sound patching. But on the other hand, I could see this being fantastic in teaching and sharing: put basic patches up in a browser, let people play with them live, then build more advanced tools (with greater hardware access and external support than is possible in a browse) in the traditional Pd tool. As I keep saying, I think there’s far too much partisanship in the discussion (“Browsers for everything!” / “Browsers are useless!”), far too little thinking about how the browser and the desktop tool are more powerful together.

Web Audio Data API – Pure Data and Processing.js from David Humphrey on Vimeo.

Check out:
mccormick.cx/dev/webpd/
wiki.mozilla.org/Audio_Data_API

Also — heck, I may try this out in workshops as soon as next week. The browser could build a basic language for music and visuals in Processing and Pd, then robust performance tools could be built in the native tools, with quite a lot of compatibility between the two.

3. Actual standards. The W3C, the standards body behind HTML, has added this discussion to an Audio Incubator group. (It’s been incubating for some time, but maybe this will help something actually hatch.) Now I’d just like to see these things in Chrome/Chromium, too – I wonder if anyone’s up to a test build, as the standards adoption discussion continues. A number of readers have pointed out that MPEG4 had a specification that included, wholesale evidently, Csound. But this process seems more organic to me – you need actual tools and real-world experiments to evaluate the validity of something, not just standards on paper.

Putting the Awesomeness in Context: An Appeal

A side rant, though: why do Web geeks only care about what happens in the browser? It’s funny to me it seems that outlets like Slashdot jump on stories like browser-based tools, but ignore exactly the same ideas if they’re in a separate app. That’s not a criticism of the Mozilla crew or these brilliant hackers – this is what development is all about, pushing your tools to the limits. But if there isn’t a broader recognition of the value of what you’re doing or why you’re doing it in the first place, there’s a danger that unsustainable tool fetish will miss the point. That is, synthesis in the browser is excellent, but if people don’t understand the value of the synthesis itself, we have a lot more work to do.

Even the tools themselves need a context. It also JavaScript is amazing, but so are tools in Python, Java, Scala, and so on… and some of the enduring power of C still shows here. Browser powers are cool, but the OS is just as important – performance of Firefox would be heavily dependent on support for OS-native, low-latency audio outputs, like JACK on Linux. (Yes, it’s open source, so you can go do it yourself. No, I have no idea how to build Firefox for JACK – maybe a reader does?)

I’ve still yet to see a compelling explanation of what the browser really is, and what’s possible with its interface paradigm. That should be a fascinating discussion, actually, especially with the radical transformation of the browser, particularly as players like Google make it the central aspect of TV-watching or tablet experiences. But the discussion is only really interesting if you don’t start out with the value as a given. For instance, if browsers become a bigger part of what we do, is its simplistic tab metaphor really sufficient? If browsers simply bundle a set of native tools, are there ways “standalone” apps might adopt similar, standards-based approaches?

David Humphrey argues that part of the value here is the view source concept, but the Web has had the same empowering influence on sharing, collaboration, and reuse with platforms other than just JavaScript. The browser itself is a largely misunderstood piece of technology, partly because users (understandably) focus on their experience, and doesn’t pay attention to which aspects are delivered by the browser, the OS, or some other piece of code.

Oh, side note: this isn’t about “the cloud.” The cool stuff here is happening on your local hardware, period. That’s what makes it fast, and that’s what makes it work for audio, and your local machine is getting cheaper, cooler, and less power-hungry all the time. New DSP and floating-point capabilities in devices like tablets could make sound more powerful and flexible than ever before – provided people work out how to maximize, not squander, those capabilities.

So, here’s what I’d like to ask: what form will the standards discussion take? And how can these larger discussions – many of which transcend the discussion of any one tool or standard – find a forum?

Behind the Scenes, More Info

While you ponder that (and I’m open to suggestions), here’s more reading for you:
Experiments with audio, part X [Dave Humphrey's increasingly-awesome blog]

Previously:
Real Sound Synthesis, Now in the Browser; Possible New Standard?

More details on the first example, and how it was built (Minefield is Firefox 3.7):

All runs in real-time with Javascript, WebGL and HTML5 only (uses Minefield Audio build) — no browser plugins are used.

This demo combines the CubicVR 3D engine on WebGL (www.cubicvr.org) with the Mozilla HTML5 Audio API (hacks.mozilla.org), Processing.js (www.processingjs.org) and BeatDetektor.js (www.beatdetektor.com)

Mozilla Audio API is used to sample the HTML5 audio tag on the page, this information is processed by BeatDetektor.js which produces timing information for the Processing.js real-time canvas textures and the CubicVR.js procedurally generated WebGL scene using them.

The camera is set to free roam a simple chase pattern with a probability to follow a nearby cube (fully automated).

Available online at:

http://cubicvr.org/CubicVR.js/bd3/BeatDetektor3HD.html

or if you have a Float32Array enabled Minefield build:

http://cubicvr.org/CubicVR.js/bd3/Bea…

you can find more info about audio api-enabled Minefield builds at:

https://wiki.mozilla.org/Audio_Data_API

You can also feel free to chat with us about the Audio API via the #audio channel on irc.mozilla.org

Enjoy! And yes, I’ll have to work out a more beginner-friendly, here’s how to do this post.

You’ll hear odd cynicism about people working on free software / open source projects. Something like, “well, harumph, it’s not as though a bunch of people will make this stuff in their free time.”

Not only are these folks wrong, but you can actually visualize the contributions to source trees – and the results look spectacularly hypnotic. It’s free software – the music video.

Okay, now, granted, I may get so mesmerized by the results that I’ll just spend time staring at that instead of getting actual work done, but – working too hard isn’t good for you, anyway. It’s an organic high, audiovisuals.

At top, Ryadh Amar sends in a visualization of the excellent, lightweight LXDE windowing environment for Linux. (Actually, I’m inspired to give LXDE a fresh install.) At bottom, a collage of various projects showing that these data visualizations can take on various identities. Gource can support just about any project repository, too: Git, Bazaar (popular on Ubuntu), and Mercurial (recently added to Google Code, incidentally) are available native, and CVS and SVN are available as third-party extensions for those of you kickin’ it oldskool and non-distributed. (Though, really, come join the 21st Century – it’s awesome.)

And Gource can visualize itself. Freaky. It’s all thanks to the ongoing awesomeness of OpenGL.

http://code.google.com/p/gource/

I’d love to see this added to project management so you’d have a sort of live, superb visual to inspire you to keep the code moving forward.

Who knew source code would turn out to be so visually inspiring? (Now I just need a new way of visualizing me writing bad code and then correcting and cleaning it up. I think it could be best represented as a set of stick figures getting stuck in quicksand and hitting each other over the head. Then there could be a big Smoke Monster that represented the Evil Force of Procrastination.)

But wait! There’s more! You can visualize web logs, too. (It works with Apache; I have to see if I can make it work with our nginx logs, as visualizers could actually be very beneficial with the kind of complex data you get in something like a web log):