Changeset 8021


Ignore:
Timestamp:
12/29/13 13:14:29 (6 years ago)
Author:
kent1
Message:

refactoring du js

File:
1 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8013 r8021  
    1313[<link rel="canonical" href="(#URL_INFOGRAPHIE|url_absolue)" />]
    1414[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" />]
     15<link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
    1516[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
     17[<script type="application/javascript" src="(#CHEMIN{javascript/d3.min.js})"></script>]
    1618#INSERT_HEAD
    1719[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
    18 [<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
     20<BOUCLE_donnees(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
     21<script type="text/javascript" src="[(#URL_PAGE{infographie_lang.js}|parametre_url{id_infographies_data,#ENV{donnees}})]"></script>
     22<script type="text/javascript">
     23        var containerid='graph1',infobox_class='infobox',
     24                jeu_donnees = #ENV{donnees,1};
     25       
     26        var draw_perspectives_2_fichiers = ['#CHEMIN{csv/perspective_co2_rcp85_original.csv}','#CHEMIN{csv/perspective_co2_rcp3_original.csv}'],
     27                draw_perspectives_1_fichiers = ['#CHEMIN{csv/perspective_temp_rcp85_original.csv}','#CHEMIN{csv/perspective_temp_rcp26_original.csv}'];
     28        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
     29        [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
     30        [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
     31        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
     32        var image_demain = "[(#GET{image_demain}|extraire_attribut{src})]",
     33                image_demain_width = [(#GET{image_demain}|extraire_attribut{width})],
     34                image_demain_height = [(#GET{image_demain}|extraire_attribut{height})],
     35                image_naissance = "[(#GET{image_naissance}|extraire_attribut{src})]",
     36                image_naissance_width = [(#GET{image_naissance}|extraire_attribut{width})],
     37                image_naissance_height = [(#GET{image_naissance}|extraire_attribut{height})],
     38                image_depart = "[(#GET{image_depart}|extraire_attribut{src})]",
     39                image_depart_width = [(#GET{image_depart}|extraire_attribut{width})],
     40                image_depart_height = [(#GET{image_depart}|extraire_attribut{height})],
     41                image_aujd = "[(#GET{image_aujd}|extraire_attribut{src})]",
     42                image_aujd_width = [(#GET{image_aujd}|extraire_attribut{width})],
     43                image_aujd_height = [(#GET{image_aujd}|extraire_attribut{height})];
     44               
     45        var date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
     46                date_naissance = [(#ENV{naissance}|intval)],
     47                date_aujourdhui = [(#ENV{date}|annee)],
     48                ymax = ymax_origine = translate_defaut = step = 0,
     49                arrow_left = "[(#CHEMIN{images/fleche_gauche.png}|balise_img|texte_script)]",
     50                arrow_right = "[(#CHEMIN{images/fleche_droite.png}|balise_img|texte_script)]";
     51</script>
     52[<script type="text/javascript" src="(#CHEMIN{javascript/infographie.js})"></script>]
     53</BOUCLE_donnees>
    1954<script type="text/javascript">
    2055        jQuery(document).ready(function(){
     
    3671                        </div>
    3772                        <div class="menu_top">
    38                                 <a href="[(#SELF|parametre_url{naissance,''}|parametre_url{donnees,''})]" title="<:terraeco:title_lien_home|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_home.png}|balise_img{home}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_home_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_home.png})"]})]</a>
    39                                 <a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_terraeco.png}|balise_img{terraeco}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_terraeco_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_terraeco.png})"]})]</a>
    40                                 <a href="[(#VAL{http://www.twitter.com/share}|parametre_url{text,[(#TITRE|replace{'<br />',' '}|strip_tags)]}|parametre_url{url,[(#URL_INFOGRAPHIE|url_absolue)]})]" title="<:terraeco:title_lien_twitter|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_twitter.png}|balise_img{twitter}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_twitter_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_twitter.png})"]})]</a>
    41                                 <a href="[(#VAL{http://www.facebook.com/sharer/sharer.php}|parametre_url{t,[(#TITRE|replace{'<br />',' '}|strip_tags)]}|parametre_url{u,[(#URL_INFOGRAPHIE|url_absolue)]})]" title="<:terraeco:title_lien_facebook|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_facebook.png}|balise_img{facebook}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_facebook_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_facebook.png})"]})]</a>
     73                                <a href="[(#SELF|parametre_url{naissance,''}|parametre_url{donnees,''})]" title="<:terraeco:title_lien_home|attribut_html:>" class="lien_home"></a>
     74                                <a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco|attribut_html:>" class="spip_out lien_terraeco"></a>
     75                                <a href="[(#VAL{http://www.twitter.com/share}|parametre_url{text,[(#TITRE|replace{'<br />',' '}|strip_tags)]}|parametre_url{url,[(#URL_INFOGRAPHIE|url_absolue)]})]" title="<:terraeco:title_lien_twitter|attribut_html:>" class="spip_out lien_twitter"></a>
     76                                <a href="[(#VAL{http://www.facebook.com/sharer/sharer.php}|parametre_url{t,[(#TITRE|replace{'<br />',' '}|strip_tags)]}|parametre_url{u,[(#URL_INFOGRAPHIE|url_absolue)]})]" title="<:terraeco:title_lien_facebook|attribut_html:>" class="spip_out lien_facebook"></a>
    4277                        </div>
    4378                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
     
    98133                                        </BOUCLE_naissance_min>
    99134                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;height:500px"></div>
    100                                         <script>
    101                                                 var containerid='graph1',infobox_class='infobox',
    102                                                         values = [],values1 = [],values2 = [], values_commentaire= [], value_origine = [], value_actuelle = [],
    103                                                         values_perspective1_haute = [], values_perspective1_mediane = [], values_perspective_trou = [],
    104                                                         values_perspective2_haute = [], values_perspective2_mediane = [],
    105                                                         tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
    106                                                
    107                                                 var date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
    108                                                         naissance = [(#ENV{naissance}|intval)],
    109                                                         ymax = ymax_origine = 0, translate_defaut = step = 0;
    110                                                
    111                                                 var margin = {top: 0, right: 60, bottom: 60, left: 0},
    112                                                         graph_width = jQuery('#'+containerid).width(),
    113                                                         graph_height = jQuery('#'+containerid).height();
    114                                                         height = graph_height - margin.top - margin.bottom -60,
    115                                                         vitesse = 200,
    116                                                         infobox = tip = moving = infobox_bloquee = move_again = callback_infobox_close = progress_mousedown = perspective_ok = false;
    117 
    118                                                 // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
    119                                                 var x = d3.scale.linear(),
    120                                                         y = d3.scale.linear().range([height, 0]),
    121                                                         xAxis = d3.svg.axis().scale(x).ticks(50).tickFormat(d3.format(".0f")).orient("bottom"),
    122                                                         yAxis = d3.svg.axis().scale(y).ticks(10).tickFormat(d3.format(".2f")).orient("right");
    123                                                
    124                                                 // Un générateur de lignes
    125                                                 var line = d3.svg.line()
    126                                                         .x(function(d) { return x(d.axe_x); })
    127                                                         .y(function(d) { return y(d.axe_y); });
    128                                                
    129                                                 // Un générateur de zones
    130                                                 var area = d3.svg.area()
    131                                                         .x(function(d) { return x(d.axe_x); })
    132                                                         .y0(function(d) { return y(d.axe_y); })
    133                                                         .y1(function(d) { return y(d.axe_y1); });
    134 
    135                                                 jQuery('#'+containerid).on('mousewheel', function(event) {
    136                                                         if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    137                                                                 if(event.deltaY < 0 || event.deltaX > 0)
    138                                                                         var val = 1;
    139                                                                 else if(event.deltaY > 0 || event.deltaX > 0)
    140                                                                         var val = -1;
    141                                                                 graph_replace(val);
    142                                                         }else if(jQuery('.'+infobox_class).is(':hidden') && move_again == false)
    143                                                                 move_again = true;
    144                                                         return false;
     135                                        <script type="text/javascript">
     136                                                jQuery(document).ready(function(){
     137                                                        climat_load_datas("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]");
    145138                                                });
    146                                                
    147                                                 // Mise à jour de l'infobox si elle existe
    148                                                 function infobox_update(content,callback){
    149                                                         if(infobox){
    150                                                                 // On met le contenu
    151                                                                 jQuery('.'+infobox_class).html(content);
    152                                                                
    153                                                                 // Les lien en target="_blank"
    154                                                                 jQuery('.'+infobox_class+' a').click(function(){
    155                                                                         jQuery(this).attr('target','_blank');
    156                                                                 });
    157                                                                
    158                                                                 // Les oembed en 100%
    159                                                                 jQuery('.'+infobox_class+' iframe').each(function(){
    160                                                                         var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
    161                                                                         jQuery(this).width('100%').height(jQuery(this).height()*ratio);
    162                                                                 });
    163                                                                
    164                                                                 // On la replace en hauteur
    165                                                                 var margin_top = (jQuery('#'+containerid+' svg').outerHeight()-jQuery('.legende').height()-35-jQuery('.'+infobox_class).outerHeight())/2;
    166                                                                 jQuery('.'+infobox_class).css({'margin-top':margin_top});
    167                                                                
    168                                                                 // Si on a donné une fonction comme callback => on l'exécute
    169                                                                 if(typeof(callback) == 'function') callback();
    170                                                         }
    171                                                 }
    172 
    173                                                 // Avance le graph de 1 ou le recule de -1 (en année)
    174                                                 function graph_replace(valeur){
    175                                                         if(!perspective_ok && date_actuelle >= parseInt(values[values.length-1].axe_x))
    176                                                                 return false;
    177                                                        
    178                                                         if(perspective_ok && (parseInt(date_actuelle)+parseFloat(valeur)) > parseInt(values[values.length-1].axe_x))
    179                                                                 return false;
    180                                                        
    181                                                         moving = true;
    182                                                         date_actuelle = date_actuelle+valeur;
    183 
    184                                                         /**
    185                                                          * A essayer : values.filter
    186                                                          * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    187                                                          */
    188                                                         values.every(function(row, i){
    189                                                                 if(parseInt(row.axe_x) == date_actuelle){
    190                                                                         value_actuelle = d = row;
    191                                                                         return false;
    192                                                                 }
    193                                                                 return true;
    194                                                         });
    195                                                        
    196                                                         var translatex = x(value_origine.axe_x)-x(d.axe_x)+parseFloat(translate_defaut);
    197                                                         var valeur_tooltip = parseFloat(d.axe_y).toFixed(2).replace('.',',');
    198                                                         jQuery('.tooltip').text(valeur_tooltip+'#UNITE');
    199                                                        
    200                                                         // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
    201                                                         if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
    202                                                                 var show_info = function(){
    203                                                                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    204                                                                                 function(){
    205                                                                                         jQuery('.'+infobox_class).fadeIn(vitesse,function(){
    206                                                                                                 jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    207                                                                                                         event.preventDefault();
    208                                                                                                         event.stopPropagation();
    209                                                                                                         jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    210                                                                                                 });
    211                                                                                         }).trigger('infobox_open');
    212                                                                                 }
    213                                                                         );
    214                                                                 }
    215                                                                 setTimeout(show_info,vitesse-30);
    216                                                         }
    217                                                        
    218                                                         var tooltip_top = y(d.axe_y) - (jQuery('.tooltip').outerHeight()/2);
    219                                                         if(date_actuelle <= 2012){
    220                                                                 var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip').outerWidth();
    221                                                                 if(jQuery('.tooltip').is(':hidden'))
    222                                                                         jQuery('.tooltip').css({'top':tooltip_top,'left':left}).show();
    223                                                                 else
    224                                                                         jQuery('.tooltip').animate({'top':tooltip_top,'left':left},vitesse);
    225                                                                 d3.select(".paths")
    226                                                                         .transition()
    227                                                                         .duration(vitesse)
    228                                                                         .attr("transform", "translate("+translatex+", 0)").each("end", function(){
    229                                                                                 if(move_again && jQuery('.'+infobox_class).is(':hidden')){
    230                                                                                         move_again = false
    231                                                                                         graph_replace(valeur);
    232                                                                                 }else
    233                                                                                         move_again = moving = false;
    234                                                                         });
    235                                                                 d3.select(".interaction")
    236                                                                         .attr("transform", "translate(0, 0)")
    237                                                                 // Afficher le message de fin de données actuelles
    238                                                                 if(!perspective_ok && date_actuelle == parseInt(values2[values2.length-1].axe_x)){
    239                                                                         var show_info = function(){
    240                                                                                 if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 1){
    241                                                                                         var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    242                                                                                         if(degres.charAt(0) == '-'){
    243                                                                                                 degres = degres.replace('-','').replace('.',',');
    244                                                                                                 var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    245                                                                                         }else{
    246                                                                                                 degres = degres.replace('.',',');
    247                                                                                                 var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    248                                                                                         }
    249                                                                                 }
    250                                                                                 else if(naissance < values[0].axe_x && [(#ENV{donnees,1})] == 1){
    251                                                                                         var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    252                                                                                         var age = (parseInt(naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
    253                                                                                         if(degres.charAt(0) == '-'){
    254                                                                                                 degres = degres.replace('-','').replace('.',',');
    255                                                                                                 var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    256                                                                                         }else{
    257                                                                                                 degres = degres.replace('.',',');
    258                                                                                                 var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    259                                                                                         }
    260                                                                                 }
    261                                                                                 else if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    262                                                                                         var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    263                                                                                         ppm = ppm.replace('.',',');
    264                                                                                         var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.</p>";
    265                                                                                 }
    266                                                                                 else if(naissance < values[0].axe_x && [(#ENV{donnees,1})] == 2){
    267                                                                                         var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    268                                                                                         ppm = ppm.replace('.',',');
    269                                                                                         var age = (parseInt(naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
    270                                                                                         var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.</p>";
    271                                                                                 }
    272                                                                                
    273                                                                                 move_again = moving = false;
    274                                                                                
    275                                                                                 if(texte_fin){
    276                                                                                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>',
    277                                                                                                 function(){
    278                                                                                                         jQuery('.'+infobox_class).fadeIn(500,function(){
    279                                                                                                                 callback_infobox_close = function(){
    280                                                                                                                         jQuery('#'+containerid).fadeOut(1000,function(){
    281                                                                                                                                 jQuery('.tooltip').hide();
    282                                                                                                                                 var callback = jQuery('#'+containerid).fadeIn(1000);
    283                                                                                                                                 if(#ENV{donnees,1} == 1)
    284                                                                                                                                         draw_perspectives_1(callback);
    285                                                                                                                                 else
    286                                                                                                                                         draw_perspectives_2(callback);
    287                                                                                                                                 callback_infobox_close = false;
    288                                                                                                                         });
    289                                                                                                                 }
    290                                                                                                                 jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    291                                                                                                                         event.preventDefault();
    292                                                                                                                         event.stopPropagation();
    293                                                                                                                         jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    294                                                                                                                 });
    295                                                                                                         }).trigger('infobox_open');
    296                                                                                                 });
    297                                                                                 }
    298                                                                         }
    299                                                                         setTimeout(show_info,vitesse);
    300                                                                 }
    301                                                         }else{
    302                                                                 var translate_interactivite = ((date_actuelle-2012)*step);
    303                                                                 /**
    304                                                                  * le tooltip se déplace avec la barre, c'est la taille du déplacement moins la taille du groupe
    305                                                                  * .interaction
    306                                                                  */
    307                                                                 var tooltip_left = d3.select('.ligne_interactive').node().getBBox().x+translate_interactivite-jQuery('.tooltip').outerWidth();
    308                                                                 d3.select(".interaction")
    309                                                                         .transition()
    310                                                                         .duration(vitesse)
    311                                                                         .attr("transform", "translate("+translate_interactivite+", 0)").each("end", function(){
    312                                                                                 if(move_again && jQuery('.'+infobox_class).is(':hidden')){
    313                                                                                         move_again = false
    314                                                                                         graph_replace(valeur);
    315                                                                                 }else
    316                                                                                         move_again = moving = false;
    317                                                                         });
    318                                                                 if(jQuery('.tooltip').is(':hidden'))
    319                                                                         jQuery('.tooltip').css({'top':tooltip_top,'left':tooltip_left}).show();
    320                                                                 else
    321                                                                         jQuery('.tooltip').animate({'top':tooltip_top,'left':tooltip_left},vitesse);
    322                                                         }
    323                                                 }
    324 
    325                                                
    326                                                 function draw_perspectives_1(callback){
    327                                                         d3.text("#CHEMIN{csv/perspective_temp_rcp85_original.csv}", function(datasetText) {
    328                                                                 var parsedCSV = d3.csv.parseRows(datasetText);
    329                                                                 // On ajoute la ligne de données pour la période aprÚs naissance
    330                                                                 parsedCSV.forEach(function(row, i){
    331                                                                         /**
    332                                                                          * On va remplir les années manquantes
    333                                                                          */
    334                                                                         if((values[values.length-1].axe_x+1) < row[0]){
    335                                                                                 var j =  1, i = row[0] - values[values.length-1].axe_x;
    336                                                                                 value_haute = values_perspective1_haute[values_perspective1_haute.length-1];
    337                                                                                 value_mediane = values_perspective1_mediane[values_perspective1_mediane.length-1];
    338                                                                                 var moyenne_haute = (row[3] - value_haute.axe_y)/i, moyenne_basse = (row[1] - value_haute.axe_y1)/i, mediane = (row[2] - value_mediane.axe_y)/i;
    339                                                                                 while (j<i){
    340                                                                                         var axe_x = (parseFloat(values[values.length-1].axe_x)+1)
    341                                                                                         new_row_mediane =       {
    342                                                                                                                                         'axe_x':axe_x,
    343                                                                                                                                         'axe_y':parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j))
    344                                                                                                                                 };
    345                                                                                         values_perspective1_haute.push({
    346                                                                                                                                 'axe_x':axe_x,
    347                                                                                                                                 'axe_y':parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j)),
    348                                                                                                                                 'axe_y1':parseFloat(value_haute.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j))
    349                                                                                                                         });
    350                                                                                         values.push(new_row_mediane);
    351                                                                                         values_perspective1_mediane.push(new_row_mediane);
    352                                                                                         j++;
    353                                                                                 }
    354                                                                         }
    355                                                                         values_perspective1_haute.push({'axe_x':parseInt(row[0]),'axe_y':parseFloat(row[3]),'axe_y1':parseFloat(row[1])});
    356                                                                         new_row_mediane = {'axe_x':parseInt(row[0]),'axe_y':parseFloat(row[2])};
    357                                                                         values.push(new_row_mediane);
    358                                                                         values_perspective1_mediane.push(new_row_mediane);
    359                                                                 });
    360                                                                 /**
    361                                                                  * xmax devient la date maximale
    362                                                                  */
    363                                                                 xmax = values_perspective1_haute[values_perspective1_haute.length-1].axe_x;
    364                                                                 ymax = ymax_origine = values_perspective1_haute[values_perspective1_haute.length-1].axe_y;
    365                                                                 ymax = (ymax-ymin)*1.25;
    366                                                                
    367                                                                 /**
    368                                                                  * On change la taille du diagramme pour afficher :
    369                                                                  * - toute la perspective
    370                                                                  * - la date de naissance
    371                                                                  * - 7 années avant la date de naissance
    372                                                                  * - 3 années à la fin pour voir le "DEMAIN"
    373                                                                  */
    374                                                                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
    375                                                                 x.range([0, real_width]).domain([xmin,xmax]);
    376                                                                 y.domain([ymin, ymax]).nice();
    377                                                                
    378                                                                 step = x(values2[1].axe_x)-x(values2[0].axe_x);
    379                                                                 axis_translate = Math.ceil(30/step);
    380                                                                 translate_defaut = '-'+x(date_origine-((2012-date_origine)+7-axis_translate));
    381                                                                 translate_new = '-'+x(date_origine-7+axis_translate);
    382                                                                
    383                                                                 /**
    384                                                                  * On parse la perspective basse
    385                                                                  */
    386                                                                 d3.text("#CHEMIN{csv/perspective_temp_rcp26_original.csv}", function(datasetText) {
    387                                                                         var parsedCSV = d3.csv.parseRows(datasetText);
    388                                                                         // On ajoute la ligne de données pour la période aprÚs naissance
    389                                                                         parsedCSV.forEach(function(row, i){
    390                                                                                 /**
    391                                                                                  * On va remplir les années manquantes
    392                                                                                  */
    393                                                                                 if((values_perspective2_haute.length > 0) && (values_perspective2_haute[values_perspective2_haute.length-1].axe_x+1) < row[0]){
    394                                                                                         j =  1;
    395                                                                                         i = row[0] - values_perspective2_haute[values_perspective2_haute.length-1].axe_x;
    396                                                                                         var value_haute = values_perspective2_haute[values_perspective2_haute.length-1];
    397                                                                                         var value_mediane = values_perspective2_mediane[values_perspective2_mediane.length-1];
    398                                                                                         var moyenne_haute = (row[3] - value_haute.axe_y)/i;
    399                                                                                         var moyenne_basse = (row[1] - value_haute.axe_y1)/i;
    400                                                                                         var mediane = (row[2] - value_mediane.axe_y)/i;
    401                                                                                         while (j<i){
    402                                                                                                 var axe_x = (parseFloat(values_perspective2_haute[values_perspective2_haute.length-1].axe_x)+1);
    403                                                                                                 values_perspective2_haute.push({
    404                                                                                                         'axe_x':axe_x,
    405                                                                                                         'axe_y':parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j)),
    406                                                                                                         'axe_y1':parseFloat(value_haute.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j))
    407                                                                                                 });
    408                                                                                                 values_perspective2_mediane.push({
    409                                                                                                         'axe_x':axe_x,
    410                                                                                                         'axe_y':parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j))
    411                                                                                                 });
    412                                                                                                 j++;
    413                                                                                         }
    414                                                                                 }
    415                                                                                 values_perspective2_haute.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[3],'axe_y1':row[1]});
    416                                                                                 values_perspective2_mediane.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[2]});
    417                                                                         });
    418                                                                        
    419                                                                         values_perspective1_haute.forEach(function(row, i){
    420                                                                                 if(values_perspective1_haute[i].axe_y1 >= values_perspective2_haute[i].axe_y){
    421                                                                                         values_perspective_trou.push({
    422                                                                                                                                         'axe_x':values_perspective1_haute[i].axe_x,
    423                                                                                                                                         'axe_y':values_perspective1_haute[i].axe_y1,
    424                                                                                                                                         'axe_y1':values_perspective2_haute[i].axe_y
    425                                                                                                                                 });
    426                                                                                 }
    427                                                                                 values_perspective1_haute[i].axe_y1 = values_perspective2_haute[i].axe_y1;
    428                                                                         });
    429                                                                         /**
    430                                                                          * On retrace les diagrammes
    431                                                                          */
    432                                                                         draw(translate_new);
    433                                                                         drawlines_interaction(translate_new);
    434                                                                        
    435                                                                         /**
    436                                                                          * On ajoute les perspectives
    437                                                                          */
    438                                                                         var perspectives = svg.selectAll('.paths').append("g").attr('class','perspectives');
    439                                                                         perspectives.append("path")
    440                                                                                 .attr("class", "area perspective perspective1_haute")
    441                                                                                 .attr("d", area(values_perspective1_haute));
    442                                                                         perspectives.append("path")
    443                                                                                 .attr("class", "area perspective perspective_trou")
    444                                                                                 .attr("d", area(values_perspective_trou));
    445                                                                         perspectives.append("path")
    446                                                                                 .attr("class", "line perspective perspective1_mediane")
    447                                                                                 .attr("d", line(values_perspective1_mediane));
    448                                                                         perspectives.append("path")
    449                                                                                 .attr("class", "line perspective perspective2_mediane")
    450                                                                                 .attr("d", line(values_perspective2_mediane));
    451 
    452                                                                         [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
    453                                                                         // Ajout du groupe pour Aujourd'hui
    454                                                                         ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
    455                        
    456                                                                         // Ajout de la ligne d'aujourd'hui
    457                                                                         ligne_demain = ligne_demain_groupe
    458                                                                                 .datum(values[values.length-1])
    459                                                                                 .append("line")
    460                                                                                         .attr( 'class', 'ligne_demain second_plan' )
    461                                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    462                                                                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    463                                                                                         .attr("y1",[(#GET{image_demain}|extraire_attribut{height}|plus{10})]).attr("y2", height);
    464 
    465                                                                         // Ajout de l'image de la bougie
    466                                                                         ligne_demain_groupe
    467                                                                                 .datum(values[values.length-1])
    468                                                                                 .append("svg:image")
    469                                                                                         .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
    470                                                                                         .attr("x", function(d){
    471                                                                                                 return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
    472                                                                                         })
    473                                                                                         .attr("y", "2")
    474                                                                                         .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
    475                                                                                         .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
    476                                                                         var rectangle = svg.select('.paths').append("rect")
    477                                                                                 .attr("class","legende_perspective")
    478                                                                                 .attr("x", x(values2[values2.length-1].axe_x)+12)
    479                                                                                 .attr("y", height)
    480                                                                                 .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    481                                                                                 .attr("height", 35);
    482                                                                         var text_rectangle = svg.select('.paths').append("text")
    483                                                                                 .attr("x",x(values[values.length-1].axe_x)-20)
    484                                                                                 .attr("y",(height+20))
    485                                                                                 .attr("class", "legende_perspective_text")
    486                                                                                 .style("text-anchor", "end")
    487                                                                                 .text("Estimations du National Climatic Data Center (NCDC)");
    488                                                                         var texte_fin = "<div class='close_box'><a href='#' onclick='return false;'>x</a></div><div class='contenu contenu_fin'>Le Groupe d’experts intergouvernemental sur l’évolution du climat (Giec) travaille sur les changements climatiques depuis 1988. Voici les deux scénarios extrêmes de ses estimations pour l'évolution des températures à la surface du globe entre 2012 et 2100.</div>";
    489                                                                                 infobox_update(texte_fin,function(){
    490                                                                                         jQuery('.'+infobox_class).fadeIn(500).trigger('infobox_open');
    491                                                                                 });
    492                                                                        
    493                                                                         step = x(values[values.length-1].axe_x)-x(values[values.length-2].axe_x);
    494                                                                         perspective_ok = true;
    495                                                                         // Si on a donné une fonction comme callback => on l'exécute
    496                                                                         if(typeof(callback) == 'function') callback();
    497                                                                 });
    498                                                         });
    499                                                        
    500                                                 }
    501 
    502                                                 function draw_perspectives_2(callback){
    503                                                        
    504                                                         d3.text("#CHEMIN{csv/perspective_co2_rcp85_original.csv}", function(datasetText) {
    505                                                                 var parsedCSV = d3.csv.parseRows(datasetText);
    506                                                                 // On ajoute la ligne de données pour la période aprÚs naissance
    507                                                                 parsedCSV.forEach(function(row, i){
    508                                                                         new_row_mediane = {};
    509                                                                         new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
    510                                                                         new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
    511                                                                         values.push(new_row_mediane);
    512                                                                         values_perspective1_mediane.push(new_row_mediane);
    513                                                                 });
    514                                                                 /**
    515                                                                  * xmax devient la date maximale
    516                                                                  */
    517                                                                 xmax = values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x;
    518                                                                 ymax = ymax_origine = d3.max(values_perspective1_mediane, function(d) { return parseFloat(d.axe_y).toFixed(2); });
    519                                                                 ymax = (ymax*1.25);
    520 
    521                                                                 /**
    522                                                                  * On change la taille du diagramme pour afficher :
    523                                                                  * - toute la perspective
    524                                                                  * - la date de naissance
    525                                                                  * - 7 années avant la date de naissance
    526                                                                  */
    527                                                                  
    528                                                                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
    529                                                                 x.range([0, real_width]).domain([xmin,xmax]);
    530                                                                 y.domain([ymin, ymax]).nice();
    531                                                                
    532                                                                 step = x(values2[1].axe_x)-x(values2[0].axe_x);
    533                                                                 axis_translate = Math.ceil(30/step);
    534                                                                
    535                                                                 translate_defaut = '-'+x(date_origine-((2012-date_origine)+7-axis_translate));
    536                                                                 translate_new = '-'+x(date_origine-7+axis_translate);
    537                                                                
    538                                                                
    539                                                                 /**
    540                                                                  * On parse la perspective basse
    541                                                                  */
    542                                                                 d3.text("#CHEMIN{csv/perspective_co2_rcp3_original.csv}", function(datasetText) {
    543                                                                         var parsedCSV = d3.csv.parseRows(datasetText);
    544                                                                         // On ajoute la ligne de données pour la période aprÚs naissance
    545                                                                         parsedCSV.forEach(function(row, i){
    546                                                                                 new_row_mediane = {};
    547                                                                                 new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
    548                                                                                 new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
    549                                                                                 values_perspective2_mediane.push(new_row_mediane);
    550                                                                         });
    551                                                                        
    552                                                                         /**
    553                                                                          * On retrace les diagrammes
    554                                                                          */
    555                                                                         draw(translate_new);
    556                                                                         drawlines_interaction(translate_new);
    557                                                                        
    558                                                                         /**
    559                                                                          * On ajoute les perspectives
    560                                                                          */
    561                                                                         svg.selectAll('.paths').append("path")
    562                                                                                         .attr("class", "line perspective perspective1_mediane")
    563                                                                                         .attr("d", line(values_perspective1_mediane));
    564                                                                         svg.selectAll('.paths').append("path")
    565                                                                                         .attr("class", "line perspective perspective2_mediane")
    566                                                                                         .attr("d", line(values_perspective2_mediane));
    567                                                                         // Si on a donné une fonction comme callback => on l'exécute
    568                                                                         // Ajout du groupe pour Aujourd'hui
    569                                                                         ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
    570                        
    571                                                                         // Ajout de la ligne d'aujourd'hui
    572                                                                         ligne_demain = ligne_demain_groupe
    573                                                                                 .datum(values[values.length-1])
    574                                                                                 .append("line")
    575                                                                                         .attr("class","ligne_demain second_plan")
    576                                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    577                                                                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    578                                                                                         .attr("y1",80).attr("y2", height);
    579                
    580                                                                         [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
    581                                                                         // Ajout de l'image de la bougie
    582                                                                         ligne_demain_groupe
    583                                                                                 .datum(values[values.length-1])
    584                                                                                 .append("svg:image")
    585                                                                                         .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
    586                                                                                         .attr("x", function(d){
    587                                                                                                 return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
    588                                                                                         })
    589                                                                                         .attr("y", "2")
    590                                                                                         .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
    591                                                                                         .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
    592                                                                         var rectangle = svg.select('.paths').append("rect")
    593                                                                                 .attr("class","legende_perspective")
    594                                                                                 .attr("x", x(values2[values2.length-1].axe_x)+12)
    595                                                                                 .attr("y", height)
    596                                                                                 .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    597                                                                                 .attr("height", 35);
    598                                                                         var text_rectangle = svg.select('.paths').append("text")
    599                                                                                 .attr("x",x(values[values.length-1].axe_x)-20)
    600                                                                                 .attr("y",(height+20))
    601                                                                                 .attr("class", "legende_perspective_text")
    602                                                                                 .style("text-anchor", "end")
    603                                                                                 .text("Estimations du National Climatic Data Center (NCDC)");
    604                                                                         var texte_fin = "<div class='close_box'><a href='#' onclick='return false;'>x</a></div><div class='contenu contenu_fin'>Le Groupe d’experts intergouvernemental sur l’évolution du climat (Giec) travaille sur les changements climatiques depuis 1988. Voici les deux scénarios extrêmes de ses estimations pour l'évolution des températures à la surface du globe entre 2012 et 2100.</div>";
    605                                                                                 infobox_update(texte_fin,function(){
    606                                                                                         jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    607                                                                                 });
    608                                                                        
    609                                                                         perspective_ok = true;
    610                                                                         if(typeof(callback) == 'function') callback();
    611                                                                 });
    612                                                         });
    613                                                        
    614                                                 }
    615                                                 // Add an SVG element with the desired dimensions and margin.
    616                                                 var svg = d3.select("#"+containerid).append("svg")
    617                                                         .attr("width", graph_width )
    618                                                         .attr("height", height + margin.top + margin.bottom)
    619                                                         .append("g")
    620                                                         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    621 
    622                                                 var paths = svg.append("g").attr("class", "paths")
    623                                                
    624                                                 var defs = svg.append('defs');
    625                                                 var gradient_perspective1 = defs.append( 'linearGradient' )
    626                                                                         .attr( 'id', 'gradient_perspective1' )
    627                                                                         .attr( 'x1', '0' )
    628                                                                         .attr( 'x2', '0' )
    629                                                                         .attr( 'y1', '0' )
    630                                                                         .attr( 'y2', '1' );
    631 
    632                                                 gradient_perspective1.append( 'stop' )
    633                                                         .attr( 'class', 'gradient_perspective1_stop1' )
    634                                                         .attr( 'offset', '0%' );
    635 
    636                                                 gradient_perspective1.append( 'stop' )
    637                                                         .attr( 'class', 'gradient_perspective1_stop2')
    638                                                         .attr( 'offset', '100%' );
    639                                                
    640                                                 // Ajouter le tooltip que l'on cache automatiquement
    641                                                 tip = d3.select('#'+containerid).append("div")
    642                                                         .attr("class", "tooltip")
    643                                                         .style("display", 'none');
    644                                                
    645                                                 // Ajout de l'infobox'
    646                                                 infobox = d3.select('#'+containerid).append("div")
    647                                                                 .attr("class", infobox_class)
    648                                                                 .style("display", 'none');
    649 
    650                                                 // Au click sur le graph, on cache l'infobox si visible
    651                                                 jQuery('#'+containerid).on('click',function(event){
    652                                                         event.preventDefault();
    653                                                         event.stopPropagation();
    654                                                         if(jQuery('.'+infobox_class).is(':visible')){
    655                                                                 if(infobox_bloquee){
    656                                                                         jQuery('.'+infobox_class).fadeOut(500,function(){
    657                                                                                 infobox_bloquee = false;
    658                                                                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
    659                                                                                         jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    660                                                                                 });
    661                                                                                
    662                                                                         }).trigger('infobox_close');
    663                                                                 }
    664                                                                 else jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    665                                                         }
    666                                                 });
    667                                                
    668                                                 // Ajouter les flÚches pour avancer et reculer
    669                                                 arrow_nav = d3.select('#'+containerid).append("div")
    670                                                         .attr("class", "arrows_nav")
    671                                                         .html('<div class="left">[(#CHEMIN{images/fleche_gauche.png}|balise_img|texte_script)]</div><div class="right">[(#CHEMIN{images/fleche_droite.png}|balise_img|texte_script)]</div>');
    672                                                
    673                                                 /**
    674                                                  * Récupération des données et on fabrique nos groupes de valeurs
    675                                                  */
    676                                                 d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
    677                                                        
    678                                                         values = data;
    679                                                         var origine = 0;
    680        
    681                                                         values.forEach(function(row, i){
    682                                                                 row.axe_x = parseFloat(row.axe_x).toFixed();
    683                                                                 origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
    684                                                                 if(row.axe_x <= date_origine) values1.push(row);
    685                                                                 if(row.axe_x >= date_origine) values2.push(row);
    686                                                                 if(row.axe_x == date_origine) value_origine = value_actuelle = row;
    687                                                                 if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1) values_commentaire.push(row);
    688                                                         });
    689 
    690                                                         xmin = values[0].axe_x;
    691                                                         xmax = values[values.length-1].axe_x;
    692                                                                
    693                                                         ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
    694                                                         ymax = ymax_origine = d3.max(values, function(d) { return parseFloat(d.axe_y); });
    695                                                        
    696                                                         ymax = ymax + ((ymax-ymin)/3);
    697 
    698                                                         /**
    699                                                          * Si naissance - 7 ans est dans la visu, on part de là
    700                                                          */
    701                                                         if((date_origine - 7) > xmin){
    702                                                                 origine = date_origine -7;
    703                                                                 var diff = 0;
    704                                                         }
    705                                                         /**
    706                                                          * Sinon le centre sera toujours la valeur minimale + 11 ans
    707                                                          * et le point d'origine la valeur min
    708                                                          */
    709                                                         else{
    710                                                                 origine = xmin;
    711                                                                 var diff = 7-(date_origine - parseInt(xmin));
    712                                                         }
    713 
    714                                                         real_width = (graph_width/22)*(xmax-xmin);
    715                                                         x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    716                                                         y.domain([ymin, ymax]).nice();
    717                                                        
    718                                                         // Utilisation de every pour couper lorsque l'on a trouvé
    719                                                         values.every(function(row,i){
    720                                                                 if(parseInt(row.axe_x) == origine){
    721                                                                         d = row;
    722                                                                         return false;
    723                                                                 }
    724                                                                 return true;
    725                                                         });
    726                                                        
    727                                                         step = x(values2[1].axe_x)-x(values2[0].axe_x);
    728                                                        
    729                                                         translate_defaut = '-'+x(d.axe_x);
    730 
    731                                                         if(diff > 0)
    732                                                                 translate_defaut = parseFloat(translate_defaut)+(diff*step);
    733 
    734                                                         // Afficher le premier slide ou les infos de scroll
    735                                                         var annee_debut =  values[0].axe_x;
    736                                                         if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 1){
    737                                                                 var degres = (parseFloat(value_origine.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
    738                                                                 if(degres.charAt(0) == '-'){
    739                                                                         degres = degres.replace('-','').replace('.',',');
    740                                                                         var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
    741                                                                 }else{
    742                                                                         degres = degres.replace('-','').replace('.',',');
    743                                                                         var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
    744                                                                 }
    745                                                         }
    746                                                         else if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    747                                                                 var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    748                                                                 ppm = ppm.replace('-','').replace('.',',');
    749                                                                 var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> a concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par million.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
    750                                                         }
    751                                                        
    752                                                         if(texte_debut){
    753                                                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
    754                                                                         infobox_bloquee = true;
    755                                                                         jQuery('.'+infobox_class).fadeIn(500,function(){
    756                                                                                 jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    757                                                                                         event.preventDefault();
    758                                                                                         event.stopPropagation();
    759                                                                                         jQuery('.'+infobox_class).fadeOut(500,function(){
    760                                                                                                 infobox_bloquee = false;
    761                                                                                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
    762                                                                                                 jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    763                                                                                         }).trigger('infobox_close');
    764                                                                                 });
    765                                                                         }).trigger('infobox_open');
    766                                                                 });
    767                                                         }
    768                                                         else{
    769                                                                 // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
    770                                                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
    771                                                                         jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    772                                                                 });
    773                                                         }
    774                                                         draw(translate_defaut);
    775                                                         drawlines_interaction(translate_defaut);
    776                                                 });
    777                                                
    778                                                 // Au click sur les fleches on avance d'un cran ou on recule
    779                                                 jQuery('.arrows_nav > div')
    780                                                         .on('click',function(event){
    781                                                                 event.stopPropagation();
    782                                                         })
    783                                                         .on('mouseenter',function(event){
    784                                                                 event.stopPropagation();
    785                                                                 if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    786                                                                         if(jQuery(this).is('.left')){
    787                                                                                 graph_replace(-1);
    788                                                                                 progress_mousedown = setInterval(function(){
    789                                                                                                                                 if(jQuery('.'+infobox_class).is(':hidden'))
    790                                                                                                                                         graph_replace(-1);
    791                                                                                                                         }, vitesse);
    792                                                                         }else{
    793                                                                                 graph_replace(1);
    794                                                                                 progress_mousedown = setInterval(function(){
    795                                                                                                                                 if(jQuery('.'+infobox_class).is(':hidden'))
    796                                                                                                                                         graph_replace(1);
    797                                                                                                                         }, vitesse);
    798                                                                         }
    799                                                                 }
    800                                                         })
    801                                                         .on('mouseleave',function(event){
    802                                                                 event.stopPropagation();
    803                                                                 clearInterval(progress_mousedown);
    804                                                         });
    805                                                
    806                                                 jQuery(window).on('keydown',function(e) {
    807                                                         var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
    808                                                         switch (e.keyCode) {
    809                                                                 case 27 :
    810                                                                         /**
    811                                                                          * Touche esc : ferme les anecdotes
    812                                                                          */
    813                                                                         clearInterval(progress_mousedown);
    814                                                                         if(jQuery('.'+infobox_class).is(':visible'))
    815                                                                                 jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    816                                                                         e.preventDefault();
    817                                                                         break;
    818                                                                 case 32 :
    819                                                                          /**
    820                                                                           * Touche Space : avance sur la ligne de temps
    821                                                                           */
    822                                                                         clearInterval(progress_mousedown);
    823                                                                         if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    824                                                                                 graph_replace(1);
    825                                                                                 progress_mousedown = setInterval(function(){
    826                                                                                                                                 if(jQuery('.'+infobox_class).is(':hidden'))
    827                                                                                                                                         graph_replace(1);
    828                                                                                                                         }, vitesse);
    829                                                                         }
    830                                                                         e.preventDefault();
    831                                                                         break;
    832                                                                 case 37 : case 39 : case 38 : case 40 :
    833                                                                         /**
    834                                                                          * Gauche (37), droite (39), haut (38), bas (40)
    835                                                                          * Avance ou recule sur la ligne de temps
    836                                                                          */
    837                                                                         clearInterval(progress_mousedown);
    838                                                                         if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    839                                                                                 if(e.keyCode == 37 || e.keyCode == 40){
    840                                                                                         graph_replace(-1);
    841                                                                                         progress_mousedown = setInterval(function(){
    842                                                                                                                                         if(jQuery('.'+infobox_class).is(':hidden'))
    843                                                                                                                                                 graph_replace(-1);
    844                                                                                                                                 }, vitesse);
    845                                                                                 }else{
    846                                                                                         graph_replace(1);
    847                                                                                         progress_mousedown = setInterval(function(){
    848                                                                                                                                         if(jQuery('.'+infobox_class).is(':hidden'))
    849                                                                                                                                                 graph_replace(1);
    850                                                                                                                                 }, vitesse);
    851                                                                                 }
    852                                                                         }
    853                                                                         e.preventDefault();
    854                                                                         break;
    855                                                         }
    856                                                 }).on('keyup',function(e){
    857                                                         switch (e.keyCode) {
    858                                                                 /**
    859                                                                  * On arrÚte le setInterval à chaque nouvelle itération
    860                                                                  */
    861                                                                 case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
    862                                                                         clearInterval(progress_mousedown);
    863                                                                         e.preventDefault();
    864                                                                 break;
    865                                                         }
    866                                                 });
    867                                                 /**
    868                                                  * Fonction de création des objets du diagramme
    869                                                  */
    870                                                 function draw(translatex){
    871                                                         d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende,.start-line,.bloc_yaxis").remove();
    872                                                         d3.select(".paths")
    873                                                                 .attr("transform", "translate("+translatex+", 0)")
    874                                                        
    875                                                         // On ajoute la ligne de données pour la période aprÚs naissance
    876                                                         svg.selectAll('.paths').append("path")
    877                                                                 .attr("class", "line apresnaissance")
    878                                                                 .attr("d", line(values2));
    879        
    880                                                         // Ajout la ligne de données avant la naissance
    881                                                         svg.selectAll('.paths').append("path")
    882                                                                 .attr("class", "line avtnaissance")
    883                                                                 .attr("d", line(values1));
    884        
    885                                                         // Ajout de l'axe X, on fait une rotation des textes à -270°
    886                                                         svg.selectAll('.paths').append("g")
    887                                                                 .attr("class", "x axis")
    888                                                                 .attr("transform", "translate(0," + height + ")")
    889                                                                 .call(xAxis)
    890                                                                 .selectAll("text")
    891                                                                         .style("text-anchor", "start")
    892                                                                         .attr("dy", "-0.6em")
    893                                                                         .attr("dx", "1em")
    894                                                                         .attr("transform", function(d) { return "rotate(-270)" });
    895                                                        
    896                                                         svg.select('.x.axis')
    897                                                                 .datum( value_origine )
    898                                                                 .append("line")
    899                                                                         .attr( 'class', 'axis_postnaissance' )
    900                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    901                                                                         .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }) // vertical line so same value on each
    902                                                                         .attr("y1",0).attr("y1",0);
    903 
    904                                                         // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
    905                                                         jQuery('.x .tick text').each(function(){
    906                                                                 // On enlÚve tous les ticks > aujourd'hui sauf le dernier'
    907                                                                 if(parseInt(jQuery(this).text()) > values2[values2.length-1].axe_x && parseInt(jQuery(this).text()) != values[values.length-1].axe_x){
    908                                                                         jQuery(this).remove();
    909                                                                 }else{
    910                                                                         var classe = 'tick';
    911                                                                         if(parseInt(jQuery(this).text()) < value_origine.axe_x)
    912                                                                                 classe = classe+' tickold';
    913                                                                         if(jQuery(this).text().charAt(3) == 0){
    914                                                                                 classe = classe+' tick_important';
    915                                                                                 jQuery(this).attr("dy",'-0.5em');
    916                                                                         }
    917                                                                         if(classe != 'tick')
    918                                                                                 jQuery(this).parent('.tick').attr('class',classe);
    919                                                                 }
    920                                                         });
    921                                                        
    922                                                         var rectangle = svg.append("rect")
    923                                                                                 .attr("class","bloc_yaxis")
    924                                                                                 .attr("x", graph_width-35)
    925                                                                                 .attr("y", 0)
    926                                                                                 .attr("fill","#ffffff")
    927                                                                                 .attr("width", 35)
    928                                                                                 .attr("height", graph_height);
    929 
    930                                                         // Ajout de l'axe Y
    931                                                         var right = graph_width-35;
    932                                                         svg.append("g")
    933                                                                 .attr("class", "y axis")
    934                                                                 .attr("transform", "translate("+right+",0)")
    935                                                                 .call(yAxis);
    936 
    937                                                         // On enlÚve les ticks de l'axe y trop haut
    938                                                         jQuery('.y .tick text').each(function(i){
    939                                                                 if(parseFloat(jQuery(this).text()) > ymax_origine)
    940                                                                         jQuery(this).parent().remove();
    941                                                         });
    942 
    943                                                         // Ajout de la légende des axes
    944                                                         svg.append("text")
    945                                                                 .attr("x",0)
    946                                                                 .attr("y",height+60)
    947                                                                 .attr("class", "legende")
    948                                                                 .style("text-anchor", "start")
    949                                                                 .text("#AXE_Y");
    950 
    951                                                         // Ajout des points d'Anecdotes cliquables
    952                                                         // sera certainement à supprimer aprÚs debug
    953                                                         d3.select("#"+containerid).select('.paths')
    954                                                                 .selectAll(".dot")
    955                                                                 .data(values_commentaire)
    956                                                                 .enter()
    957                                                                         .append('circle')
    958                                                                         .attr("class","infos_dots")
    959                                                                         .attr("cx", function(d) { return x(d.axe_x); })
    960                                                                         .attr("cy",function(d) { return y(d.axe_y); })
    961                                                                         .attr('r',6)
    962                                                                         .on('click',function(d){
    963                                                                                 d3.event.stopPropagation();
    964                                                                                 if(jQuery('.'+infobox_class).is(':visible'))
    965                                                                                         return false;
    966                                                                                
    967                                                                                 jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
    968                                                                                 jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
    969                                                                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    970                                                                                         function(){
    971                                                                                                 jQuery('.'+infobox_class).fadeIn(500,function(){
    972                                                                                                         jQuery(this).find('.close_box').on('click',function(){
    973                                                                                                                 event.preventDefault();
    974                                                                                                                 event.stopPropagation();
    975                                                                                                                 jQuery('.infos_dots.active').attr('class','infos_dots')
    976                                                                                                                         .animate({'stroke-width':'3'},300);
    977                                                                                                                 jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    978                                                                                                         });
    979                                                                                                 }).trigger('infobox_open');
    980                                                                                         }
    981                                                                                 );
    982                                                                         });
    983                                                        
    984                                                         if(naissance > parseInt(values[0].axe_x)){
    985                                                                 // Ajout du groupe qui contiendra les éléments de la date de naissance
    986                                                                 ligne_naissance_groupe = svg.select('.paths').append("g")
    987                                                                         .attr("class", "birth-line");
    988                
    989                                                                 // Ajout de la ligne de naissance
    990                                                                 ligne_naissance = ligne_naissance_groupe
    991                                                                         .datum( value_origine )
    992                                                                         .append("line")
    993                                                                                 .attr( 'class', 'ligne_naissance second_plan' )
    994                                                                                 .attr("x1", function( d ) { return x( d.axe_x ); })
    995                                                                                 .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
    996                                                                                 .attr("y1",80).attr("y2", height);
    997        
    998                                                                 [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
    999                                                                 // Ajout de l'image de la bougie
    1000                                                                 ligne_naissance_groupe
    1001                                                                         .datum(value_origine)
    1002                                                                         .append("svg:image")
    1003                                                                                 .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
    1004                                                                                 .attr("x", function(d){
    1005                                                                                         return x(value_origine.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
    1006                                                                                 })
    1007                                                                                 .attr("y", "2")
    1008                                                                                 .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
    1009                                                                                 .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
    1010                                                         }
    1011                                                        
    1012                                                         [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
    1013                                                         // Ajout du groupe pour le depart
    1014                                                         ligne_depart_groupe = svg.select('.paths').append("g").attr("class", "start-line");
    1015        
    1016                                                         // Ajout de la ligne de depart
    1017                                                         ligne_depart_aujd = ligne_depart_groupe
    1018                                                                 .datum(values[0])
    1019                                                                 .append("line")
    1020                                                                         .attr("class","ligne_depart second_plan")
    1021                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    1022                                                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    1023                                                                         .attr("y1",[(#GET{image_depart}|extraire_attribut{height}|plus{10})]).attr("y2", height);
    1024 
    1025                                                         // Ajout de l'image de depart
    1026                                                         ligne_depart_groupe
    1027                                                                 .datum(values[0])
    1028                                                                 .append("svg:image")
    1029                                                                         .attr("xlink:href", "[(#GET{image_depart}|extraire_attribut{src})]")
    1030                                                                         .attr("x", function(d){
    1031                                                                                 return x(d.axe_x)-[(#GET{image_depart}|extraire_attribut{width}|div{2})];
    1032                                                                         })
    1033                                                                         .attr("y", "2")
    1034                                                                         .attr("width", "[(#GET{image_depart}|extraire_attribut{width})]")
    1035                                                                         .attr("height", "[(#GET{image_depart}|extraire_attribut{height})]");
    1036        
    1037                                                         [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
    1038                                                         // Ajout du groupe pour Aujourd'hui
    1039                                                         ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
    1040        
    1041                                                         // Ajout de la ligne d'aujourd'hui
    1042                                                         ligne_aujd = ligne_aujd_groupe
    1043                                                                 .datum(values2[values2.length-1])
    1044                                                                 .append("line")
    1045                                                                         .attr("class","ligne_aujd second_plan")
    1046                                                                         .attr("x1", function( d ) { return x(d.axe_x);})
    1047                                                                         .attr("x2",function( d ) { return x(d.axe_x); })
    1048                                                                         .attr("y1",[(#GET{image_aujd}|extraire_attribut{height}|plus{10})]).attr("y2", height);
    1049 
    1050                                                         // Ajout de l'image de la bougie
    1051                                                         ligne_aujd_groupe
    1052                                                                 .datum(values2[values2.length-1])
    1053                                                                 .append("svg:image")
    1054                                                                         .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
    1055                                                                         .attr("x", function(d){
    1056                                                                                 return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
    1057                                                                         })
    1058                                                                         .attr("y", "2")
    1059                                                                         .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
    1060                                                                         .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
    1061                                                        
    1062                                                 }
    1063 
    1064                                                 /**
    1065                                                  * Afficher le bloc d'interaction
    1066                                                  *
    1067                                                  * @param translatex
    1068                                                  */
    1069                                                 function drawlines_interaction(translatex){
    1070                                                         d3.selectAll(".interaction").remove();
    1071                                                         ligne_interactive_groupe = svg.append("g")
    1072                                                                 .attr("class", "interaction");
    1073                                                                
    1074                                                         /**
    1075                                                          * Ajouter la ligne d'interaction
    1076                                                          */
    1077                                                         ligne_interactive =  ligne_interactive_groupe
    1078                                                                 .datum(value_actuelle)
    1079                                                                         .append("line")
    1080                                                                                 .attr('class', 'ligne_interactive')
    1081                                                                                 .attr("x1", function(d) { return x( d.axe_x )+parseFloat(translatex); })
    1082                                                                                 .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    1083                                                                                 .attr("y1",100)
    1084                                                                                 .attr("y2", height);
    1085                                                         /**
    1086                                                          * Ajouter le triangle
    1087                                                          */
    1088                                                         ligne_interactive_groupe.append('path')
    1089                                                                 .attr('class','triangle')
    1090                                                                 .attr('d', function(d) {
    1091                                                                         var x1 = (x( value_actuelle.axe_x )+parseFloat(translatex)-14), x2 = x( value_actuelle.axe_x)+parseFloat(translatex)+14,x3 = x( value_actuelle.axe_x )+parseFloat(translatex);
    1092                                                                         var x4 = 'M '+ x1 +' '+height+' L '+x2+' '+height+' L '+x3+' '+(height-25)+' z';
    1093                                                                         return x4;
    1094                                                                 });
    1095                                                 }
    1096                                                 jQuery('.'+infobox_class).on('infobox_close',function(){
    1097                                                         if(typeof(callback_infobox_close) == 'function'){
    1098                                                                 callback_infobox_close()
    1099                                                         }
    1100                                                 });
    1101                                                 jQuery('.'+infobox_class).on('infobox_open',function(){
    1102 
    1103                                                 });
    1104                                                 </script>
     139                                        </script>
    1105140                                </div>
    1106141                                [<div class="logo_terraeco">
Note: See TracChangeset for help on using the changeset viewer.