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:

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();