So, we agreed on it and shipped it. Seeing it with the real data, however, made me wonder if I should have looked into typical rating statistics a bit more :)

Well. Lesson learnt. It is a nice little visualization nevertheless.

Which reminds me of an excellent article about how to prevent to uniform votes already in the interface.

As a bonus, here is a little remake using protovis with again, ridiculously few lines of code:

var data=[ ["05.11.09 17:01", 10, 10, 10, 10, 10, 10, 10, 10, 10] // .. etc .., see page source for full data ]; // pre-process data var processedData = []; data.forEach(function(d) { var o={}; o.date = Date.parse(d[0], "%d.%m.%y %H:%M"); o.dayDate = new Date(o.date.getFullYear(), o.date.getMonth(), o.date.getDate()); o.dayTime = o.date.getHours(); d.shift(); o.ratings = d; o.mean = pv.mean(d); processedData.push(o); }); // sort by rating processedData = processedData.sort(function(a,b) a.mean - b.mean); // result: // [{date:..., ratings:[10,2,3,4...], mean:6.7}, ... // set up visualization var w = 440, h =440; var vis = new pv.Panel() .width(w) .height(h) .left(20) .top(20) ; // encoders var color = pv.Scale.linear(0, 5, 10).range("rgba(255,0,0,.3)", "rgba(200,200,0,.3)", "rgba(0,90,0,.3)"); var angle = pv.Scale.linear(0, processedData.length).range(Math.PI1.5, Math.PI3.5); var radius = pv.Scale.linear(0, 10).range(100, 200); // A panel for each rating event var panel = vis.add(pv.Panel) .data(processedData) .left(function() w.5)
.top(function() h.5) ; // a wedge for each rating value panel.add(pv.Wedge) .data(function(d) d.ratings) .startAngle(function() angle(this.parent.index)) .endAngle (function() angle(this.parent.index+1)) .innerRadius(function(d) radius(d) ) .outerRadius(function(d) radius(d+1)) .fillStyle(function(d) color(d)) ; panel.add(pv.Wedge) .data(function(d) [d.mean]) .startAngle(function() angle(this.parent.index)) .endAngle (function() angle(this.parent.index+1)) .innerRadius(function(d) radius(d+.5) ) .outerRadius(function(d) radius(d+.7)) .fillStyle(function(d) "#000") ; vis.render();

On the occasion of the recent fifth birthday of infosthetics.com blog, your premier source for fresh projects from visualization and information aesthetics, I made a custom adaptation of the elastic lists principle for the – up to now – 1950 posts of the site. Try it out, and read more about it here.

Happy birthday infosthetics!

Today was a good day, so I thought I would share its results immediately, instead of fine-tuning forever — who knows when I find the time anyways!

I built a little facet browser for the New York Times Article Search API - an impressively fast faceted search engine covering over two million articles. So, give it a spin!

Some caveats:

• Don’t look for the page navigation — there is none. Pure laziness, will update it soon.
• The initial counts are based on a search for “the” (which I figured would appear in all articles). Unfortunately, only the top 15 or so values per facet are returned, so you cannot click, e.g. the year 2008 in the beginning. Will fix.
• The API has a request limit of 5000 queries per day. So if your requests don’t work — come back tomorrow morning :)
• Unfortunately, the API seems to support only one value per facet. So, all facets are single-select.(fixed, see comments).

The code is based on my totally revamped elastic lists prototype. I used this project as a little sandbox experiment of how easy customization is possible, and especially how to make a switch from a fully client-based to a server–based filtering model.

After much blood, sweat and cable guy issues, we could finally present the interactive installation mæve for the EveryVille student competition at the La Biennale in Venice.

In short, the installation works like this: visitors can pick up little cards representing the exhibits. Putting them on the table will draw an associative, organic network of tags, media and related projects around them. If you put multiple cards on the table, the visualization will form “bridges”, looking for direct or indirect connections between the projects.

The installation has been designed and developed by the MACE project team of the University of Applied Sciences Potsdam and made possible by many others (credits).

You can find more info and media on the mæve project website.

Technically, the installation is built with Processing, using the Gestalt framework.
For the card tracking, the Reactivision 1.4 software was used. The interactive table was built by Werk5.

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

For the EU project MACE, I have been experimenting with hierarchical visualizations. Just the quick link for now, I hope I find the time to share some of the background and findings later…

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

-> full picture Built with flare.

And merry christmas all!

PS: 12 days to go, wish me luck!

First one is the emerging topics histogram. I followed my own advice and vertically centered the stacked histogram. Additionally, I never liked those sharp edges, so now I do not only “fade out” tags visually, but also fade them in, resulting in a much more organic picture, and largely improved readability of the chart. New color scheme: old tags are cold, freshly introduced ones in warm color. This is all very much inspired by the fabulous last.fm charts by Lee Byron — thanks!

new interactive version here

and some pix:

On the left: the personal tags for the personal bookmarks — ordered by frequency — the containing box per is log-scaled so you get an impression of the long–tail position of a tag. Which means: Often used tags are large, bright and go to the top.

On the right: community tags for the tagged ressources.

In the middle: tags with the same name are connected. If a line is horizontal, the indvidual and the community essentially agree on the relevance of the tag for the ressources. The steeper it is — the larger the disagreement. If no line starts at a tag, it means it is not present in the other list

So in the picture above, you can see my tags. Same facts you can read from the picture: • “m.a.thesis” is a very often used, but private tag of mine. • The ressources I tag in general are mostly tagged with “design” by the community. I, however, use the tag “design” much less often. • “news”, “semantic web”, “webdev” are tags I use often, but not the community. etc.

And often course, you can click individual tags to see what the comparison is like for subsets of the bookmarks. That’s especially interesting for obscure tags like “guru” — you can see what the tagger “means” by looking at the distribution of the community bookmarks (in this case “design — art — programmer — artist”). Interesting!

Some more shots:

I wish I could say “click here for the interactive version” as usual — but unfortunately, del.icio.us offers a JSON API, but did not put a crossdomain.xml file on their server. Which means the visualization (which runs nicely on my harddisc) cannot load data when put in the web. Bummer. I hope I can figure something out.

So for now — I can only offer a download link. Click the index.html. You might have to adjust you Flash player security settings in order to load the community tags. Caveat: The application is still a bit buggy and pretty heavy concerning processor ressources.

I am having fun here with a little custom made Flash app that reads • hourly shots from my built-in webcam • my twitter posts • and my delicious bookmarks

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

Bigger picture here.