Visualisierung der Fronteers-Teilnehmer nach Häufigkeit

http://jsfiddle.net/mathias/Eft68/

by Jens Grochtdreis

HTML

Loading 2008—2012 FronteersConf attendees…

CSS

html { font: 1em/1.5 sans-serif; }
.f1 { background: lightgreen; } .f1::after { content: ' (attended once)'; } 
.f2 { background: yellow; } .f2::after { content: ' (attended twice)'; }
.f3 { background: orange; } .f3::after { content: ' (attended three times)'; }
.f4 { background: hotpink; } .f4::after { content: ' (attended four times)'; }
.f5 { background: #bada55; } .f5::after { content: ' (attended five times)'; }

JavaScript

(function(document, $) {

    var coolGuise = {},
        years = [2008, 2009, 2010, 2011, 2012],
        length = years.length,
        html = '',
        $body = $(document.body);
    years.forEach(function(year) {
        $.getJSON('http://fronteers.nl/congres/' + year + '/attendees.json', function(data) {
            $body.html('Parsing FronteersConf ' + year + ' attendees…');
            data['fronteers' + year].andAllTheirOtherData.forEach(function(attendee) {
                var name = attendee.name;
                if (coolGuise[name]) {
                    coolGuise[name].push(year);
                } else {
                    coolGuise[name] = [year];
                }
            });
            if (!--length) {
                Object.keys(coolGuise).sort(function(a, b) {
                    var visitsA = coolGuise[a].length,
                        visitsB = coolGuise[b].length;
                    return visitsA < visitsB
                        ? -1 : visitsA > visitsB
                        ? 1 : a < b
                        ? -1 : a > b
                        ? 1 : 0;
                }).forEach(function(name) {
                    html += '<li class=f' + coolGuise[name].length + '>' + name;
                });
                $body.html('<ul>' + html + '</ul>');
            }
        });
    });

}(document, jQuery));