integration/js/treemap.js
author Anthony Ly <anthonyly.com@gmail.com>
Tue, 27 Nov 2012 18:08:06 +0100
changeset 20 c86141a8570d
parent 19 81a605180745
child 21 c2dd00471b2d
permissions -rw-r--r--
maj retours / modifications
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     1
/* Génération de données aléatoires */
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     2
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     3
var data = [],
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     4
    startcolor = [ 0, 0, 255 ],
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     5
    endcolor = [ 255, 255, 0 ]
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     6
    elementcount = 8;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     7
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     8
for (var i = 0; i < elementcount; i++) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
     9
    var r = i/elementcount,
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    10
        col = _(endcolor).map(function(e,i) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    11
            var s = startcolor[i]
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    12
            return Math.floor(r*e + (1-r)*s)
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    13
        });
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    14
    data.push({
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    15
        label: "Cluster " + (1+i),
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    16
        i: i+1,
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    17
        color: "rgb("+col.join(",")+")",
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    18
        value: 1+Math.pow(Math.random(),2)*5
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    19
    });
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    20
}
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    21
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    22
/* Génération du Treemap */
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    23
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    24
data = _(data).sortBy(function(d) { return -d.value; });
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    25
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    26
var IDEALRATIO = 1.25;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    27
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    28
function cuttree(data, x, y, w, h, cut, ratio, callback) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    29
    
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    30
    function f(subdata, subx, suby, subw, subh) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    31
        if (subdata.length == 1) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    32
            subdata[0].x = subx;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    33
            subdata[0].y = suby;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    34
            subdata[0].w = subw;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    35
            subdata[0].h = subh;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    36
        } else {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    37
            callback(subdata, subx, suby, subw, subh)
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    38
        }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    39
    }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    40
    
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    41
    var first = _(data).first(cut), rest = _(data).rest(cut);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    42
    if (!first.length || !rest.length) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    43
        return;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    44
    }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    45
    if (w/h > IDEALRATIO) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    46
        var leftw = w * ratio;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    47
        f(first, x, y, leftw, h);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    48
        f(rest, x + leftw, y, w - leftw, h);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    49
    } else {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    50
        var toph = h * ratio;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    51
        f(first, x, y, w, toph);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    52
        f(rest, x, y + toph, w, h - toph);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    53
    }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    54
}
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    55
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    56
function pivot(data, x, y, w, h) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    57
    var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    58
    for (var i = 0; i < data.length - 1; i++) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    59
        cumul += data[i].value;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    60
        var delta = Math.abs(cumul - total/2);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    61
        if (delta < bestcut) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    62
            bestcut = delta;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    63
            bestcumul = cumul;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    64
            cut = i+1;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    65
        } else {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    66
            break;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    67
        }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    68
    }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    69
    cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    70
}
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    71
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    72
function squarify(data, x, y, w, h) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    73
    var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    74
    for (var i = 0; i < data.length - 1; i++) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    75
        cumul += data[i].value;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    76
        cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    77
        var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    78
        if (ratio < bestcut) {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    79
            bestcut = ratio;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    80
            bestcumul = cumul;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    81
            cut = i+1;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    82
        } else {
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    83
            break;
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    84
        }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    85
    }
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    86
    cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    87
}
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    88
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    89
/* Template des éléments à insérer */
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    90
var actu = 
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    91
    '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    92
        '<a href="#">'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    93
            '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
    94
        '<div class="voile"></div>'+
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    95
        '</a>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    96
        '<div class="inner-actu">'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    97
            '<h2><a href="#"><%-label%></a></h2>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    98
            '<div class="links">'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
    99
                '<ul>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   100
                    '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   101
                    '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   102
                    '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   103
                '</ul>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   104
            '</div>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   105
        '</div>'+
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   106
    '</div>';
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   107
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   108
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   109
$(function(){
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   110
    //treemap
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   111
    var tmpl = _.template(actu);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   112
    var hTreemap = 800;//à définir
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   113
    $('#treemap').height(hTreemap);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   114
    squarify(data,0,0,760,hTreemap);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   115
    var treemapHtml = _(data).reduce(function(mem, d) {
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   116
        return mem + tmpl(d);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   117
    },"");
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   118
    $('#treemap #actus').html(treemapHtml);
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   119
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   120
    //redimensionnement d'image
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   121
    $(".actu").each(function(k,v){
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   122
        var wActu = $(this).width();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   123
        var hActu = $(this).height();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   124
        var img = $(this).find('img');
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   125
        var wImg = img.width();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   126
        var hImg = img.height();
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   127
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   128
        var ratioImg = wImg/hImg;
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   129
        img.css('height',hActu);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   130
        img.css('width',hActu*ratioImg);
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   131
        wImg = img.width();
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   132
        hImg = img.height();
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   133
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   134
        if(wActu>wImg){
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   135
            var ratioImg = hImg/wImg;
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   136
            img.css('width', wActu);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   137
            img.css('height',wActu*ratioImg);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   138
            wImg = img.width();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   139
            hImg = img.height();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   140
        }
19
81a605180745 ajout algo treemap
Anthony Ly <anthonyly.com@gmail.com>
parents:
diff changeset
   141
20
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   142
        if (wImg<wActu) {
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   143
            img.css('margin-left',(wActu-wImg)/2);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   144
        }else{
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   145
            img.css('margin-left',-(wImg-wActu)/2);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   146
        }
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   147
        if (hImg<hActu) {
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   148
            img.css('margin-top',(hActu-hImg)/2);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   149
        }else{
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   150
            img.css('margin-top',-(hImg-hActu)/2);
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   151
        }
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   152
    });
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   153
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   154
    $("#liste").hide();
c86141a8570d maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents: 19
diff changeset
   155
})