# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1351616668 -3600
# Node ID 81a6051807455ec6a3812028e1ba503fb37190a4
# Parent  bf333fd74eee86a9a99bff8e89b518cebe5dd449
ajout algo treemap

diff -r bf333fd74eee -r 81a605180745 integration/css/home.css
--- a/integration/css/home.css	Mon Oct 29 18:06:44 2012 +0100
+++ b/integration/css/home.css	Tue Oct 30 18:04:28 2012 +0100
@@ -66,4 +66,13 @@
 .links a.comment{
 	background-image: url(../img/home-button-comment.png);
 	background-position: 4px 6px;
+}
+/* treemap */
+.actus{
+	position: relative;
+}
+.actu{
+	position: absolute;
+	overflow: hidden;
+	float: none;
 }
\ No newline at end of file
diff -r bf333fd74eee -r 81a605180745 integration/gabarit.html
--- a/integration/gabarit.html	Mon Oct 29 18:06:44 2012 +0100
+++ b/integration/gabarit.html	Tue Oct 30 18:04:28 2012 +0100
@@ -204,7 +204,8 @@
                                     <div class="article-annotations">
                                         <a title="title" class="blue" href="#" style="width:20%;"></a>
                                         <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
                                     </div>
                                     <div class="article-content">
                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
@@ -234,7 +235,8 @@
                                     <div class="article-annotations">
                                         <a title="title" class="blue" href="#" style="width:20%;"></a>
                                         <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
                                     </div>
                                     <div class="article-content">
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -265,6 +267,7 @@
                                         <a title="title" class="blue" href="#" style="width:20%;"></a>
                                         <a title="title" class="green" href="#" style="width:20%;"></a>
                                         <a title="title" class="red" href="#" style="width:40%;"></a>
+                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
                                     </div>
                                     <div class="article-content">
                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
@@ -294,7 +297,8 @@
                                     <div class="article-annotations">
                                         <a title="title" class="blue" href="#" style="width:20%;"></a>
                                         <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
                                     </div>
                                     <div class="article-content">
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -324,7 +328,8 @@
                                     <div class="article-annotations">
                                         <a title="title" class="blue" href="#" style="width:20%;"></a>
                                         <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
                                     </div>
                                     <div class="article-content">
                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
diff -r bf333fd74eee -r 81a605180745 integration/home.html
--- a/integration/home.html	Mon Oct 29 18:06:44 2012 +0100
+++ b/integration/home.html	Tue Oct 30 18:04:28 2012 +0100
@@ -161,6 +161,7 @@
 
                     <div class="content-right">
                         <div class="actus">
+                            <!--
                             <div class="actu">
                                 <a href="#">
                                     <img src="img/home-visuel-1.jpg" alt="" />
@@ -175,7 +176,7 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
                             <div class="actu">
                                 <a href="#">
                                     <img src="img/home-visuel-1.jpg" alt="" />
@@ -190,7 +191,7 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
 
                             <div class="actu">
                                 <a href="#">
@@ -206,7 +207,7 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
                             <div class="actu">
                                 <a href="#">
                                     <img src="img/home-visuel-2.jpg" alt="" />
@@ -221,7 +222,7 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
                             <div class="actu">
                                 <a href="#">
                                     <img src="img/home-visuel-4.jpg" alt="" />
@@ -236,7 +237,7 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
                             <div class="actu">
                                 <a href="#">
                                     <img src="img/home-visuel-3.jpg" alt="" />
@@ -251,7 +252,11 @@
                                         </ul>
                                     </div>
                                 </div>
-                            </div><!-- actu -->
+                            </div>
+                            -->
+                            <div id="treemap1">
+                                
+                            </div>
                         </div> <!-- actus -->
                         
                         
@@ -305,6 +310,6 @@
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
         <script src="js/streamgraph.js"></script>
-
+        <script src="js/treemap.js"></script>
     </body>
 </html>
diff -r bf333fd74eee -r 81a605180745 integration/img/home-visuel-5.jpg
Binary file integration/img/home-visuel-5.jpg has changed
diff -r bf333fd74eee -r 81a605180745 integration/img/home-visuel-6.jpg
Binary file integration/img/home-visuel-6.jpg has changed
diff -r bf333fd74eee -r 81a605180745 integration/img/home-visuel-7.jpg
Binary file integration/img/home-visuel-7.jpg has changed
diff -r bf333fd74eee -r 81a605180745 integration/img/home-visuel-8.jpg
Binary file integration/img/home-visuel-8.jpg has changed
diff -r bf333fd74eee -r 81a605180745 integration/js/treemap.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/treemap.js	Tue Oct 30 18:04:28 2012 +0100
@@ -0,0 +1,146 @@
+/* Génération de données aléatoires */
+
+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) {
+    
+    function f(subdata, subx, suby, subw, subh) {
+        if (subdata.length == 1) {
+            subdata[0].x = subx;
+            subdata[0].y = suby;
+            subdata[0].w = subw;
+            subdata[0].h = subh;
+        } else {
+            callback(subdata, subx, suby, subw, subh)
+        }
+    }
+    
+    var first = _(data).first(cut), rest = _(data).rest(cut);
+    if (!first.length || !rest.length) {
+        return;
+    }
+    if (w/h > IDEALRATIO) {
+        var leftw = w * ratio;
+        f(first, x, y, leftw, h);
+        f(rest, x + leftw, y, w - leftw, h);
+    } else {
+        var toph = h * ratio;
+        f(first, x, y, w, toph);
+        f(rest, x, y + toph, w, h - toph);
+    }
+}
+
+function pivot(data, x, y, w, h) {
+    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;
+        var delta = Math.abs(cumul - total/2);
+        if (delta < bestcut) {
+            bestcut = delta;
+            bestcumul = cumul;
+            cut = i+1;
+        } else {
+            break;
+        }
+    }
+    cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
+}
+
+function squarify(data, x, y, w, h) {
+    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;
+        cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
+        var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
+        if (ratio < bestcut) {
+            bestcut = ratio;
+            bestcumul = cumul;
+            cut = i+1;
+        } else {
+            break;
+        }
+    }
+    cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
+}
+
+/* Template des éléments à insérer */
+var actu = 
+    '<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="" />'+
+        '</a>'+
+        '<div class="inner-actu">'+
+            '<h2><a href="#"><%-label%></a></h2>'+
+            '<div class="links">'+
+                '<ul>'+
+                    '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
+                    '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
+                    '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
+                '</ul>'+
+            '</div>'+
+        '</div>'+
+    '</div>';
+var tmpl = _.template(actu);
+
+squarify(data,0,0,760,358);
+
+document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) {
+    return mem + tmpl(d);
+},"");
+
+//redimensionnement d'image
+$(".actu").each(function(k,v){
+    var wActu = $(this).width();
+    var hActu = $(this).height();
+    var img = $(this).find('img');
+    var wImg = img.width();
+    var hImg = img.height();
+
+    var ratioImg = wImg/hImg;
+    img.css('height',hActu);
+    img.css('width',hActu*ratioImg);
+    wImg = img.width();
+    hImg = img.height();
+
+    if(wActu>wImg){
+        var ratioImg = hImg/wImg;
+        img.css('width', wActu);
+        img.css('height',wActu*ratioImg);
+        wImg = img.width();
+        hImg = img.height();
+    }
+
+    if (wImg<wActu) {
+        img.css('margin-left',(wActu-wImg)/2);
+    }else{
+        img.css('margin-left',-(wImg-wActu)/2);
+    }
+    if (hImg<hActu) {
+        img.css('margin-top',(hActu-hImg)/2);
+    }else{
+        img.css('margin-top',-(hImg-hActu)/2);
+    }
+});
\ No newline at end of file