In Novem­ber 2009, I did a mini-project together with Boris Müller and the boys from rau­reif. My task was to cre­ate a visu­al­iza­tion of the sur­vey results of an event. The par­tic­i­pants were asked to rate the events with respect to 9 ques­tions on a scale from 1–10. As we did not have much time (nor bud­get), we went for the first good-looking idea avail­able. What could that be? Right, a radial visu­al­iza­tion (be damned, cir­cles for non-circular data!). Any­ways, I pro­duced a quick funky mockup with ran­dom data: Each cir­cle sec­tor stands for one person’s rat­ings, and these are ordered by their aver­age rat­ing. For each sin­gle rat­ing, I draw a semi-transparent wedge, with dis­tance from cen­ter as well as color indi­cat­ing the rating’s value. Spe­cial treat­ment is pro­vided for the over­all event rat­ing (a more opaque, smaller wedge). For visual spice, a black spline con­nects all the aver­age val­ues of the ratings.

So, we agreed on it and shipped it. See­ing it with the real data, how­ever, made me won­der if I should have looked into typ­i­cal rat­ing sta­tis­tics a bit more :)

Well. Les­son learnt. It is a nice lit­tle visu­al­iza­tion nevertheless.

Which reminds me of an excel­lent arti­cle about how to pre­vent to uni­form votes already in the interface.

As a bonus, here is a lit­tle remake using pro­to­vis with again, ridicu­lously few lines of code: (more…)

On the occa­sion of the recent fifth birth­day of infosthetics.com blog, your pre­mier source for fresh projects from visu­al­iza­tion and infor­ma­tion aes­thet­ics, I made a cus­tom adap­ta­tion of the elas­tic lists prin­ci­ple for the – up to now – 1950 posts of the site. Try it out, and read more about it here.

Happy birth­day infosthetics!

Today was a good day, so I thought I would share its results imme­di­ately, instead of fine-tuning for­ever — who knows when I find the time anyways!

I built a lit­tle facet browser for the New York Times Arti­cle Search API - an impres­sively fast faceted search engine cov­er­ing over two mil­lion arti­cles. So, give it a spin!

Some caveats:

• Don’t look for the page nav­i­ga­tion — there is none. Pure lazi­ness, will update it soon.
• The ini­tial counts are based on a search for “the” (which I fig­ured would appear in all arti­cles). Unfor­tu­nately, only the top 15 or so val­ues per facet are returned, so you can­not click, e.g. the year 2008 in the begin­ning. Will fix.
• The API has a request limit of 5000 queries per day. So if your requests don’t work — come back tomor­row morning :)
• Unfor­tu­nately, the API seems to sup­port only one value per facet. So, all facets are single-select.(fixed, see comments).

The code is based on my totally revamped elas­tic lists pro­to­type. I used this project as a lit­tle sand­box exper­i­ment of how easy cus­tomiza­tion is pos­si­ble, and espe­cially how to make a switch from a fully client-based to a server–based fil­ter­ing model.

After much blood, sweat and cable guy issues, we could finally present the inter­ac­tive instal­la­tion mæve for the EveryVille stu­dent com­pe­ti­tion at the La Bien­nale in Venice.

In short, the instal­la­tion works like this: vis­i­tors can pick up lit­tle cards rep­re­sent­ing the exhibits. Putting them on the table will draw an asso­cia­tive, organic net­work of tags, media and related projects around them. If you put mul­ti­ple cards on the table, the visu­al­iza­tion will form “bridges”, look­ing for direct or indi­rect con­nec­tions between the projects.

The instal­la­tion has been designed and devel­oped by the MACE project team of the Uni­ver­sity of Applied Sci­ences Pots­dam and made pos­si­ble by many oth­ers (cred­its).

You can find more info and media on the mæve project web­site.

Tech­ni­cally, the instal­la­tion is built with Pro­cess­ing, using the Gestalt frame­work.
For the card track­ing, the Reac­tivi­sion 1.4 soft­ware was used. The inter­ac­tive table was built by Werk5.

By the way, if you blog about this, make sure to link to the orig­i­nal project page – not this blog post – thanks!

For the EU project MACE, I have been exper­i­ment­ing with hier­ar­chi­cal visu­al­iza­tions. Just the quick link for now, I hope I find the time to share some of the back­ground and find­ings later…

On a related note: 9 days left to hand in your papers and take part in a great con­fer­ence this autumn!

I am just pack­ing my stuff and will be off to Bavaria over the hol­i­days. A last visu­al­iza­tion for this year, inci­den­tally look­ing like christ­mas acces­soires: A radial tree visu­al­iza­tion of the MACE clas­si­fi­ca­tion vocabulary.

-> full pic­ture Built with flare.

And merry christ­mas all!

> Tag maps v5

PS: 12 days to go, wish me luck!

My the­sis is due pretty soon, so I am cur­rently writ­ing A LOT and make some on–the–go beau­ti­fi­ca­tions to my experiments.

First one is the emerg­ing top­ics his­togram. I fol­lowed my own advice and ver­ti­cally cen­tered the stacked his­togram. Addi­tion­ally, I never liked those sharp edges, so now I do not only “fade out” tags visu­ally, but also fade them in, result­ing in a much more organic pic­ture, and largely improved read­abil­ity of the chart. New color scheme: old tags are cold, freshly intro­duced ones in warm color. This is all very much inspired by the fab­u­lous last.fm charts by Lee Byron — thanks!

new inter­ac­tive ver­sion here

and some pix:

Another visual exper­i­ment on tag­ging: How do indi­vid­u­als use tags — com­pared to the com­mu­nity? Do you use pri­vate lan­guage or are you a main­stream tag­ger? When you tag with “design” — do the oth­ers think it is “art”?

On the left: the per­sonal tags for the per­sonal book­marks — ordered by fre­quency — the con­tain­ing box per is log-scaled so you get an impres­sion of the long–tail posi­tion of a tag. Which means: Often used tags are large, bright and go to the top.

On the right: com­mu­nity tags for the tagged ressources.

In the mid­dle: tags with the same name are con­nected. If a line is hor­i­zon­tal, the ind­vid­ual and the com­mu­nity essen­tially agree on the rel­e­vance of the tag for the ressources. The steeper it is — the larger the dis­agree­ment. If no line starts at a tag, it means it is not present in the other list

So in the pic­ture above, you can see my tags. Same facts you can read from the pic­ture: • “m.a.thesis” is a very often used, but pri­vate tag of mine. • The ressources I tag in gen­eral are mostly tagged with “design” by the com­mu­nity. I, how­ever, use the tag “design” much less often. • “news”, “seman­tic web”, “web­dev” are tags I use often, but not the com­mu­nity. etc.

And often course, you can click indi­vid­ual tags to see what the com­par­i­son is like for sub­sets of the book­marks. That’s espe­cially inter­est­ing for obscure tags like “guru” — you can see what the tag­ger “means” by look­ing at the dis­tri­b­u­tion of the com­mu­nity book­marks (in this case “design — art — pro­gram­mer — artist”). Interesting!

Some more shots:

I wish I could say “click here for the inter­ac­tive ver­sion” as usual — but unfor­tu­nately, del.icio.us offers a JSON API, but did not put a crossdomain.xml file on their server. Which means the visu­al­iza­tion (which runs nicely on my hard­disc) can­not load data when put in the web. Bum­mer. I hope I can fig­ure some­thing out.

So for now — I can only offer a down­load link. Click the index.html. You might have to adjust you Flash player secu­rity set­tings in order to load the com­mu­nity tags. Caveat: The appli­ca­tion is still a bit buggy and pretty heavy con­cern­ing proces­sor ressources.

I am hav­ing fun here with a lit­tle cus­tom made Flash app that reads • hourly shots from my built-in web­cam • my twit­ter posts • and my deli­cious bookmarks

and puts it all together. Bit messy at the moment, but I am work­ing on it.

Big­ger pic­ture here.