diff -r 419db2a884c5 -r bd6d2bdbc47a integration/js/treemap.js
--- a/integration/js/treemap.js	Tue Jan 22 13:20:52 2013 +0100
+++ b/integration/js/treemap.js	Tue Jan 22 14:42:36 2013 +0100
@@ -1,28 +1,5 @@
 $(function(){
 
-    var data = [],
-        startcolor = [ 0, 0, 255 ],
-        endcolor = [ 255, 255, 0 ]
-        elementcount = 8;
-
-    for (var i = 0; i < elementcount; i++) {
-        var r = i/elementcount,
-            col = _(endcolor).map(function(e,i) {
-                var s = startcolor[i]
-                return Math.floor(r*e + (1-r)*s)
-            });
-        data.push({
-            label: "Cluster " + (1+i),
-            i: i+1,
-            color: "rgb("+col.join(",")+")",
-            value: 1+Math.pow(Math.random(),2)*5
-        });
-    }
-
-    /* Génération du Treemap */
-
-    data = _(data).sortBy(function(d) { return -d.value; });
-
     var IDEALRATIO = 1.25;
 
     function cuttree(data, x, y, w, h, cut, ratio, callback) {
@@ -54,6 +31,13 @@
     }
 
     function pivot(data, x, y, w, h) {
+        if (data.length == 1) {
+            data[0].x = x;
+            data[0].y = x;
+            data[0].w = w;
+            data[0].h = h;
+            return;
+        }
         var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
         for (var i = 0; i < data.length - 1; i++) {
             cumul += data[i].value;
@@ -70,6 +54,13 @@
     }
 
     function squarify(data, x, y, w, h) {
+        if (data.length == 1) {
+            data[0].x = x;
+            data[0].y = x;
+            data[0].w = w;
+            data[0].h = h;
+            return;
+        }
         var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
         for (var i = 0; i < data.length - 1; i++) {
             cumul += data[i].value;
@@ -85,38 +76,128 @@
         }
         cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
     }
+    
+    /* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */
+    
+    /**
+     * Converts an HSV color value to RGB. Conversion formula
+     * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+     * Assumes h, s, and v are contained in the set [0, 1] and
+     * returns r, g, and b in the set [0, 255].
+     *
+     * @param   Number  h       The hue
+     * @param   Number  s       The saturation
+     * @param   Number  v       The value
+     * @return  Array           The RGB representation
+     */
+    function hsvToRgb(h, s, v){
+        var r, g, b;
+    
+        var i = Math.floor(h * 6);
+        var f = h * 6 - i;
+        var p = v * (1 - s);
+        var q = v * (1 - f * s);
+        var t = v * (1 - (1 - f) * s);
+    
+        switch(i % 6){
+            case 0: r = v, g = t, b = p; break;
+            case 1: r = q, g = v, b = p; break;
+            case 2: r = p, g = v, b = t; break;
+            case 3: r = p, g = q, b = v; break;
+            case 4: r = t, g = p, b = v; break;
+            case 5: r = v, g = p, b = q; break;
+        }
+    
+        return _([r * 255, g * 255, b * 255]).map(Math.floor);
+    }
 
-    /* Template des éléments à insérer */
-    var actu = 
+    /* Templates des éléments à insérer */
+   
+    var articleTemplate = _(
+        '<div class="cluster-article" style="position: absolute; left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
+            '<%=label%>'+
+        '</div>'
+    ).template();
+    var clusterTemplate = _( 
     '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
         '<a href="#">'+
-            '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
+//            '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
+        '<%=articles%>'+
         '<div class="voile"></div>'+
         '</a>'+
         '<div class="inner-actu">'+
             '<h2><a href="#"><%-label%></a></h2>'+
             '<div class="links">'+
                 '<ul>'+
-                    '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
+                    '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+
                 '</ul>'+
             '</div>'+
         '</div>'+
-    '</div>';
-
+    '</div>'
+    ).template();
 
 
-    //treemap
-    var tmpl = _.template(actu);
-    var hTreemap = 800;//à définir
+    var hTreemap = 600;//à définir
     $('#treemap').height(hTreemap);
-    squarify(data,0,0,760,hTreemap);
-    var treemapHtml = _(data).reduce(function(mem, d) {
-        return mem + tmpl(d);
-    },"");
-    $('#treemap #actus').html(treemapHtml);
-
+    
+    function showResults(results) {
+        var data = _(results.clusters).map(function(cluster, i) {
+            var hue = (i%6)/6
+            return {
+                label: cluster.title,
+                value: parseFloat(cluster.weight),
+                color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")",
+                annotation_count: cluster.annotations.length,
+                articles: _(cluster.documents).map(function(article, j) {
+                    return {
+                        label: article.title,
+                        value: parseFloat(article.weight),
+                        color: "rgb(" + hsvToRgb(hue,.8,.9-.1*(j%6)).join(",") + ")"
+                    }
+                })
+            }
+        });
+        data _(data).sortBy(function(d) {
+            return -d.value;
+        });
+        squarify(data,0,0,760,hTreemap);
+        _(data).each(function(cluster) {
+            squarify(cluster.articles, 0, 0, cluster.w, cluster.h);
+            _(cluster.articles).sortBy(function(d) {
+                return -d.value;
+            });
+            cluster.articles = _(cluster.articles).reduce(function(mem, a) {
+                return mem + articleTemplate(a);
+            }, "");
+        });
+        var treemapHtml = _(data).reduce(function(mem, d) {
+            return mem + clusterTemplate(d);
+        },"");
+        $('#treemap #actus').html(treemapHtml);
+    }
+    
+    function renderJson(url) {
+        $.getJSON(url, showResults);
+    }
+    
+    renderJson("data/requete.json");
+    
+    $(".header-menu a").click(function() {
+        if ($(this).text() == "INTERNATIONAL") {
+            renderJson("data/requete_filtre_international.json");
+        }
+        if ($(this).text() == "FRANCE") {
+            renderJson("data/requete_filtre_france.json");
+        }
+        if ($(this).hasClass("home")) {
+            renderJson("data/requete.json")
+        }
+        return false;
+    });
+    
     //redimensionnement d'image
-    $(".actu").each(function(k,v){
+/*
+     $(".actu").each(function(k,v){
         var wActu = $(this).width();
         var hActu = $(this).height();
         var img = $(this).find('img');
@@ -152,6 +233,8 @@
             }
         });
     });
+*/
+
 
     $("#liste").hide();
 })
\ No newline at end of file