diff -r 771e832a51c4 -r 95df5542a1ce integration/gabarit.html
--- a/integration/gabarit.html	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/gabarit.html	Tue Oct 16 14:23:59 2012 +0200
@@ -25,11 +25,11 @@
                 <div class="recherche-wrap">
                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
                     <form action="#">
-                        <p>
+                        <p >
                             <a href="#" class="photo"></a>
                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
-                            <input type="submit" value="" class="recherche-submit"/>
-                            <a class="plus-button" href="#"> </a>
+                            <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
+                            <a class="plus-button" title="Annoter" href="#"> </a>
                         </p>
                     </form>
                 </div>
@@ -63,7 +63,7 @@
                         <h2>MES DOSSIERS</h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Nouveau dossier documentaire" href="#">
                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
                             </li>
 
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
                         <h2></h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <atitle="Voir le dossier"  href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -122,17 +122,15 @@
                                 </a>
                             </li>
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
                     </div>
                 </div><!--dossier-documentaire-->
             </div><!-- header -->
 
             <div class="content-wrap clearfix">
                 <div class="frise">
-                    <div id="slider-range">
-                        <div class="voile-left"></div>
-                        <div class="voile-right"></div>
-                    </div>
+                    <div class="streamgraph"></div>
+                    <div id="slider-range"></div>
                 </div><!-- frise -->
 
 
@@ -144,12 +142,12 @@
                         <div class="widget-wrap">
 
                             <div class="widget affichage">
-                                <h3><a href="">AFFICHAGE</a></h3>
+                                <h3><a href="#">AFFICHAGE</a></h3>
                                 <div class="widget-inner">
                                     
                                     <ul class="clearfix">
-                                        <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
-                                        <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+                                        <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+                                        <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
                                     </ul>
                                 </div>
                             </div><!-- affichage -->
@@ -161,7 +159,7 @@
                         <div class="articles">
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         48 articles
                                     </p>
@@ -181,11 +179,11 @@
                                        
                                             <ul class="annotations clearfix">
                                                <li>
-                                                    <a class="comment number" href="#"> 
+                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
                                                         <span class="number-value">354</span>
                                                     </a>
                                                 </li>
-                                               <li><a class="comment add" href="#"></a></li>
+                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
                                                <li><a class="value plus" href="#">
                                                     <span class="inner-signe"></span>
                                                     <span class="inner-value" style="height:20%;"></span>
@@ -209,7 +207,7 @@
 
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         48 articles
                                     </p>
@@ -230,108 +228,11 @@
                                        
                                        <ul class="annotations clearfix">
                                                <li>
-                                                    <a class="comment number" href="#"> 
+                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
                                                         <span class="number-value">354</span>
                                                     </a>
                                                 </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
+                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
                                                <li><a class="value plus" href="#">
                                                     <span class="inner-signe"></span>
                                                     <span class="inner-value" style="height:20%;"></span>
@@ -353,200 +254,7 @@
                                     </div>
                                 </div>
                             </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
+                            
                           
                            
                         </div><!-- articles -->
@@ -600,8 +308,11 @@
         <script src="js/vendor/jquery-1.8.0.min.js"></script>
         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
         <script src="js/vendor/dragslider.js"></script>
+        <script src="js/lib/raphael-min.js"></script>
+        <script src="js/lib/underscore-min.js"></script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/streamgraph.js"></script>
 
     </body>
 </html>