source: plugins_spip/terraeco_infographie/trunk/infographie.html @ 8012

Last change on this file since 8012 was 8012, checked in by kent1, 6 years ago

Remplacer les "." par des virgules "," dans les tooltips et les messages de début et de fin

File size: 52.6 KB
Line 
1<BOUCLE_principale(INFOGRAPHIES) {id_infographie}>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
4]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
5<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
6<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
7<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
8<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
9<head>
10<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
11<title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
12[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
13[<link rel="canonical" href="(#URL_INFOGRAPHIE|url_absolue)" />]
14[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" />]
15[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
16#INSERT_HEAD
17[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
18[<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
19<script type="text/javascript">
20        jQuery(document).ready(function(){
21                jQuery('a.spip_out').click(function(){
22                        jQuery(this).attr('target','_blank');
23                });
24        });
25</script>
26</head>
27
28<body class="pas_surlignable page_infographie">
29<div class="page">
30       
31        <div class="main infographie[ (#INFO_CSS_CLASS{infographies_data,#ENV{donnees}})]">
32                <div class="wrapper hfeed">
33                <div class="content hentry" id="content">
34                        <div class="cartouche">
35                                <h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{40,*}) ]#TITRE</h1>
36                        </div>
37                        <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>
42                        </div>
43                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
44                        <div class="formulaire_spip[(#ENV{naissance}|strlen|et{#ENV{naissance}|<{1900}|ou{#ENV{naissance}|>{2010}}}|oui)erreur #SET{erreur_naissance,oui}]">
45                                <form  action="[(#SELF)]" method="get">
46                                        [(#SELF|form_hidden)]
47                                        <div class="champ">
48                                                <label for="naissance"><:terraeco:label_naissance:></label>
49                                                [(#GET{erreur_naissance}|=={oui}|oui)<span class="message_erreur"><:terraeco:erreur_naissance{naissance=#ENV{naissance}}:></span>]
50                                                <input type="text" class="texte" id="naissance" name="naissance" maxlength="4" size="4" value="#ENV{naissance,''}" />
51                                        </div>
52                                        <div class="boutons">
53                                                <input type="submit" class="submit" id="submit" value="OK" />
54                                        </div>
55                                </form>
56                        </div>
57                        </BOUCLE_si_pas_naissance>
58                        </B_si_pas_naissance>
59                                <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
60                                <div class="formulaire_spip">
61                                        <form  action="[(#SELF)]" method="get">
62                                                [(#SELF|form_hidden)]
63                                                <input type="hidden" name="avt_naissance" value="oui" />
64                                                <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
65                                                [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
66                                                </div>
67                                                <div class="boutons">
68                                                        <input type="submit" class="submit" id="submit" value="OK" />
69                                                </div>
70                                        </form>
71                                </div>
72                                </BOUCLE_si_naissance_1951>
73                                </B_si_naissance_1951>
74                                <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
75                                <div class="infographie[ (#CSS_CLASS)]">
76                                        <div class="description_donnees">
77                                                [<h3 class="#EDIT{titre}">(#TITRE)</h3>]
78                                                [<div class="texte #EDIT{texte}">
79                                                (#TEXTE)
80                                                </div>]
81                                                [<div class="credits #EDIT{credits}">
82                                                (#CREDITS)
83                                                </div>]
84                                        </div>
85                                       
86                                        <B_infographies_logo>
87                                        <div class="infographies_logo">
88                                        <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
89                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|non)
90                                        <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]</a>]
91                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)
92                                        <strong class="on">[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})]</strong>]
93                                        </BOUCLE_infographies_logo>
94                                        </div>
95                                        </B_infographies_logo>
96                                        <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
97                                        #SET{naissance_min,#AXE_X}
98                                        </BOUCLE_naissance_min>
99                                        <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_basse = [], values_perspective1_mediane = [],
104                                                        values_perspective2_haute = [], values_perspective2_basse = [], 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;
145                                                });
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                                                                                j =  1;
336                                                                                i = row[0] - values[values.length-1].axe_x;
337                                                                                value_haute = values_perspective1_haute[values_perspective1_haute.length-1];
338                                                                                value_basse = values_perspective1_basse[values_perspective1_basse.length-1];
339                                                                                value_mediane = values_perspective1_mediane[values_perspective1_mediane.length-1];
340                                                                                moyenne_haute = (row[3] - value_haute.axe_y)/i;
341                                                                                moyenne_basse = (row[1] - value_basse.axe_y1)/i;
342                                                                                mediane = (row[2] - value_mediane.axe_y)/i;
343                                                                                while (j<i){
344                                                                                        new_row_haute = {};
345                                                                                        new_row_basse = {};
346                                                                                        new_row_mediane = {};
347                                                                                        new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = (parseFloat(values[values.length-1].axe_x)+1);
348                                                                                        new_row_haute.axe_y = parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j));
349                                                                                        new_row_basse.axe_y1 = parseFloat(value_basse.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j));
350                                                                                        new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j));
351                                                                                        values_perspective1_haute.push(new_row_haute);
352                                                                                        values.push(new_row_haute);
353                                                                                        values_perspective1_basse.push(new_row_basse);
354                                                                                        values_perspective1_mediane.push(new_row_mediane);
355                                                                                        j++;
356                                                                                }
357                                                                        }
358                                                                        new_row_haute = {};
359                                                                        new_row_basse = {};
360                                                                        new_row_mediane = {};
361                                                                        new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseInt(row[0]);
362                                                                        new_row_haute.axe_y = parseFloat(row[3]);
363                                                                        new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(row[2]);
364                                                                        new_row_basse.axe_y1 = parseFloat(row[1]);
365                                                                        values_perspective1_haute.push(new_row_haute);
366                                                                        values.push(new_row_haute);
367                                                                        values_perspective1_basse.push(new_row_basse);
368                                                                        values_perspective1_mediane.push(new_row_mediane);
369                                                                });
370                                                                /**
371                                                                 * xmax devient la date maximale
372                                                                 */
373                                                                xmax = values_perspective1_haute[values_perspective1_haute.length-1].axe_x;
374                                                                ymax = ymax_origine = values_perspective1_haute[values_perspective1_haute.length-1].axe_y;
375                                                                ymax = (ymax-ymin)*1.25;
376                                                               
377                                                                /**
378                                                                 * On change la taille du diagramme pour afficher :
379                                                                 * - toute la perspective
380                                                                 * - la date de naissance
381                                                                 * - 7 années avant la date de naissance
382                                                                 * - 3 années à la fin pour voir le "DEMAIN"
383                                                                 */ 
384                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
385                                                                x.range([0, real_width]).domain([xmin,xmax]);
386                                                                y.domain([ymin, ymax]).nice();
387                                                               
388                                                                step = x(values2[1].axe_x)-x(values2[0].axe_x);
389                                                                axis_translate = Math.ceil(30/step);
390                                                                translate_defaut = '-'+x(date_origine-((2012-date_origine)+7-axis_translate));
391                                                                translate_new = '-'+x(date_origine-7+axis_translate);
392                                                               
393                                                                /**
394                                                                 * On parse la perspective basse
395                                                                 */
396                                                                d3.text("#CHEMIN{csv/perspective_temp_rcp26_original.csv}", function(datasetText) {
397                                                                        var parsedCSV = d3.csv.parseRows(datasetText);
398                                                                        // On ajoute la ligne de données pour la période aprÚs naissance
399                                                                        parsedCSV.forEach(function(row, i){
400                                                                                /**
401                                                                                 * On va remplir les années manquantes
402                                                                                 */
403                                                                                if((values_perspective2_basse.length > 0) && (values_perspective2_basse[values_perspective2_basse.length-1].axe_x+1) < row[0]){
404                                                                                        j =  1;
405                                                                                        i = row[0] - values_perspective2_basse[values_perspective2_basse.length-1].axe_x;
406                                                                                        var value_haute = values_perspective2_haute[values_perspective2_haute.length-1];
407                                                                                        var value_basse = values_perspective2_basse[values_perspective2_basse.length-1];
408                                                                                        var value_mediane = values_perspective2_mediane[values_perspective2_mediane.length-1];
409                                                                                        var moyenne_haute = (row[3] - value_haute.axe_y)/i;
410                                                                                        var moyenne_basse = (row[1] - value_basse.axe_y1)/i;
411                                                                                        var mediane = (row[2] - value_mediane.axe_y)/i;
412                                                                                        while (j<i){
413                                                                                                var new_row_haute = {};
414                                                                                                var new_row_basse = {};
415                                                                                                var new_row_mediane = {};
416                                                                                                new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = (parseFloat(values_perspective2_basse[values_perspective2_basse.length-1].axe_x)+1);
417                                                                                                new_row_haute.axe_y = parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j));
418                                                                                                new_row_basse.axe_y1 = parseFloat(value_basse.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j));
419                                                                                                new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j));
420                                                                                                values_perspective2_haute.push(new_row_haute);
421                                                                                                values_perspective2_basse.push(new_row_basse);
422                                                                                                values_perspective2_mediane.push(new_row_mediane);
423                                                                                                j++;
424                                                                                        }
425                                                                                }
426                                                                                new_row_haute = {};
427                                                                                new_row_basse = {};
428                                                                                new_row_mediane = {};
429                                                                                new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
430                                                                                new_row_haute.axe_y = row[3];
431                                                                                new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = row[2];
432                                                                                new_row_basse.axe_y1 = row[1];
433                                                                                values_perspective2_haute.push(new_row_haute);
434                                                                                values_perspective2_basse.push(new_row_basse);
435                                                                                values_perspective2_mediane.push(new_row_mediane);
436                                                                        });
437                                                                       
438                                                                        /**
439                                                                         * On retrace les diagrammes
440                                                                         */
441                                                                        draw(translate_new);
442                                                                        drawlines_interaction(translate_new);
443                                                                       
444                                                                        /**
445                                                                         * On ajoute les perspectives
446                                                                         */
447                                                                        svg.selectAll('.paths').append("path")
448                                                                                .attr("class", "area perspective perspective1_haute")
449                                                                                .attr("d", area(values_perspective1_haute));
450                                                                        svg.selectAll('.paths').append("path")
451                                                                                .attr("class", "area perspective perspective1_basse")
452                                                                                .attr("d", area(values_perspective1_basse));
453                                                                        svg.selectAll('.paths').append("path")
454                                                                                .attr("class", "area perspective perspective2_haute")
455                                                                                .attr("d", area(values_perspective2_haute));
456                                                                        svg.selectAll('.paths').append("path")
457                                                                                .attr("class", "area perspective perspective2_basse")
458                                                                                .attr("d", area(values_perspective2_basse));
459                                                                        svg.selectAll('.paths').append("path")
460                                                                                .attr("class", "line perspective perspective2_mediane")
461                                                                                .attr("d", line(values_perspective2_mediane));
462                                                                        svg.selectAll('.paths').append("path")
463                                                                                .attr("class", "line perspective perspective1_mediane")
464                                                                                .attr("d", line(values_perspective1_mediane));
465                                                                       
466                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
467                                                                        // Ajout du groupe pour Aujourd'hui
468                                                                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
469                       
470                                                                        // Ajout de la ligne d'aujourd'hui
471                                                                        ligne_demain = ligne_demain_groupe
472                                                                                .datum(values[values.length-1])
473                                                                                .append("line")
474                                                                                        .attr( 'class', 'ligne_demain second_plan' )
475                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
476                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
477                                                                                        .attr("y1",[(#GET{image_demain}|extraire_attribut{height}|plus{10})]).attr("y2", height);
478
479                                                                        // Ajout de l'image de la bougie
480                                                                        ligne_demain_groupe
481                                                                                .datum(values[values.length-1])
482                                                                                .append("svg:image")
483                                                                                        .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
484                                                                                        .attr("x", function(d){
485                                                                                                return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
486                                                                                        })
487                                                                                        .attr("y", "2")
488                                                                                        .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
489                                                                                        .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
490                                                                        var rectangle = svg.select('.paths').append("rect")
491                                                                                .attr("class","legende_perspective")
492                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
493                                                                                .attr("y", height)
494                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
495                                                                                .attr("height", 35);
496                                                                        var text_rectangle = svg.select('.paths').append("text") 
497                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
498                                                                                .attr("y",(height+20))
499                                                                                .attr("class", "legende_perspective_text")
500                                                                                .style("text-anchor", "end")
501                                                                                .text("Estimations du National Climatic Data Center (NCDC)");
502                                                                        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>";
503                                                                                infobox_update(texte_fin,function(){
504                                                                                        jQuery('.'+infobox_class).fadeIn(500).trigger('infobox_open');
505                                                                                });
506                                                                       
507                                                                        step = x(values[values.length-1].axe_x)-x(values[values.length-2].axe_x);
508                                                                        perspective_ok = true;
509                                                                        // Si on a donné une fonction comme callback => on l'exécute
510                                                                        if(typeof(callback) == 'function') callback();
511                                                                });
512                                                        });
513                                                       
514                                                }
515
516                                                function draw_perspectives_2(callback){
517                                                       
518                                                        d3.text("#CHEMIN{csv/perspective_co2_rcp85_original.csv}", function(datasetText) {
519                                                                var parsedCSV = d3.csv.parseRows(datasetText);
520                                                                // On ajoute la ligne de données pour la période aprÚs naissance
521                                                                parsedCSV.forEach(function(row, i){
522                                                                        new_row_mediane = {};
523                                                                        new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
524                                                                        new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
525                                                                        values.push(new_row_mediane);
526                                                                        values_perspective1_mediane.push(new_row_mediane);
527                                                                });
528                                                                /**
529                                                                 * xmax devient la date maximale
530                                                                 */
531                                                                xmax = values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x;
532                                                                ymax = ymax_origine = d3.max(values_perspective1_mediane, function(d) { return parseFloat(d.axe_y).toFixed(2); });
533                                                                ymax = (ymax*1.25);
534
535                                                                /**
536                                                                 * On change la taille du diagramme pour afficher :
537                                                                 * - toute la perspective
538                                                                 * - la date de naissance
539                                                                 * - 7 années avant la date de naissance
540                                                                 */ 
541                                                                 
542                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
543                                                                x.range([0, real_width]).domain([xmin,xmax]);
544                                                                y.domain([ymin, ymax]).nice();
545                                                               
546                                                                step = x(values2[1].axe_x)-x(values2[0].axe_x);
547                                                                axis_translate = Math.ceil(30/step);
548                                                               
549                                                                translate_defaut = '-'+x(date_origine-((2012-date_origine)+7-axis_translate));
550                                                                translate_new = '-'+x(date_origine-7+axis_translate);
551                                                               
552                                                               
553                                                                /**
554                                                                 * On parse la perspective basse
555                                                                 */
556                                                                d3.text("#CHEMIN{csv/perspective_co2_rcp3_original.csv}", function(datasetText) {
557                                                                        var parsedCSV = d3.csv.parseRows(datasetText);
558                                                                        // On ajoute la ligne de données pour la période aprÚs naissance
559                                                                        parsedCSV.forEach(function(row, i){
560                                                                                new_row_mediane = {};
561                                                                                new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
562                                                                                new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
563                                                                                values_perspective2_mediane.push(new_row_mediane);
564                                                                        });
565                                                                       
566                                                                        /**
567                                                                         * On retrace les diagrammes
568                                                                         */
569                                                                        draw(translate_new);
570                                                                        drawlines_interaction(translate_new);
571                                                                       
572                                                                        /**
573                                                                         * On ajoute les perspectives
574                                                                         */
575                                                                        svg.selectAll('.paths').append("path")
576                                                                                        .attr("class", "line perspective perspective1_mediane")
577                                                                                        .attr("d", line(values_perspective1_mediane));
578                                                                        svg.selectAll('.paths').append("path")
579                                                                                        .attr("class", "line perspective perspective2_mediane")
580                                                                                        .attr("d", line(values_perspective2_mediane));
581                                                                        // Si on a donné une fonction comme callback => on l'exécute
582                                                                        // Ajout du groupe pour Aujourd'hui
583                                                                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
584                       
585                                                                        // Ajout de la ligne d'aujourd'hui
586                                                                        ligne_demain = ligne_demain_groupe
587                                                                                .datum(values[values.length-1])
588                                                                                .append("line")
589                                                                                        .attr("class","ligne_demain second_plan")
590                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
591                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
592                                                                                        .attr("y1",80).attr("y2", height);
593               
594                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
595                                                                        // Ajout de l'image de la bougie
596                                                                        ligne_demain_groupe
597                                                                                .datum(values[values.length-1])
598                                                                                .append("svg:image")
599                                                                                        .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
600                                                                                        .attr("x", function(d){
601                                                                                                return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
602                                                                                        })
603                                                                                        .attr("y", "2")
604                                                                                        .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
605                                                                                        .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
606                                                                        var rectangle = svg.select('.paths').append("rect")
607                                                                                .attr("class","legende_perspective")
608                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
609                                                                                .attr("y", height)
610                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
611                                                                                .attr("height", 35);
612                                                                        var text_rectangle = svg.select('.paths').append("text") 
613                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
614                                                                                .attr("y",(height+20))
615                                                                                .attr("class", "legende_perspective_text")
616                                                                                .style("text-anchor", "end")
617                                                                                .text("Estimations du National Climatic Data Center (NCDC)");
618                                                                        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>";
619                                                                                infobox_update(texte_fin,function(){
620                                                                                        jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
621                                                                                });
622                                                                       
623                                                                        perspective_ok = true;
624                                                                        if(typeof(callback) == 'function') callback();
625                                                                });
626                                                        });
627                                                       
628                                                }
629                                                // Add an SVG element with the desired dimensions and margin.
630                                                var svg = d3.select("#"+containerid).append("svg")
631                                                        .attr("width", graph_width )
632                                                        .attr("height", height + margin.top + margin.bottom)
633                                                        .append("g")
634                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
635
636                                                var paths = svg.append("g").attr("class", "paths")
637                                                       
638                                                // Ajouter le tooltip que l'on cache automatiquement
639                                                tip = d3.select('#'+containerid).append("div")
640                                                        .attr("class", "tooltip")
641                                                        .style("display", 'none');
642                                               
643                                                // Ajout de l'infobox'
644                                                infobox = d3.select('#'+containerid).append("div")
645                                                                .attr("class", infobox_class)
646                                                                .style("display", 'none');
647
648                                                // Au click sur le graph, on cache l'infobox si visible
649                                                jQuery('#'+containerid).on('click',function(event){
650                                                        event.preventDefault();
651                                                        event.stopPropagation();
652                                                        if(jQuery('.'+infobox_class).is(':visible')){
653                                                                if(infobox_bloquee){
654                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
655                                                                                infobox_bloquee = false;
656                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
657                                                                                        jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
658                                                                                });
659                                                                               
660                                                                        }).trigger('infobox_close');
661                                                                }
662                                                                else jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
663                                                        }
664                                                });
665                                               
666                                                // Ajouter les flÚches pour avancer et reculer
667                                                arrow_nav = d3.select('#'+containerid).append("div")
668                                                        .attr("class", "arrows_nav")
669                                                        .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>');
670                                               
671                                                /**
672                                                 * Récupération des données et on fabrique nos groupes de valeurs
673                                                 */
674                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
675                                                       
676                                                        values = data;
677                                                        var origine = 0;
678       
679                                                        values.forEach(function(row, i){
680                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
681                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
682                                                                if(row.axe_x <= date_origine) values1.push(row);
683                                                                if(row.axe_x >= date_origine) values2.push(row);
684                                                                if(row.axe_x == date_origine) value_origine = value_actuelle = row;
685                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1) values_commentaire.push(row);
686                                                        });
687
688                                                        xmin = values[0].axe_x;
689                                                        xmax = values[values.length-1].axe_x;
690                                                               
691                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
692                                                        ymax = ymax_origine = d3.max(values, function(d) { return parseFloat(d.axe_y); });
693                                                       
694                                                        ymax = ymax + ((ymax-ymin)/3);
695
696                                                        /**
697                                                         * Si naissance - 7 ans est dans la visu, on part de là
698                                                         */
699                                                        if((date_origine - 7) > xmin){
700                                                                origine = date_origine -7;
701                                                                var diff = 0;
702                                                        }
703                                                        /**
704                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
705                                                         * et le point d'origine la valeur min
706                                                         */
707                                                        else{
708                                                                origine = xmin;
709                                                                var diff = 7-(date_origine - parseInt(xmin));
710                                                        }
711
712                                                        real_width = (graph_width/22)*(xmax-xmin);
713                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
714                                                        y.domain([ymin, ymax]).nice();
715                                                       
716                                                        // Utilisation de every pour couper lorsque l'on a trouvé
717                                                        values.every(function(row,i){
718                                                                if(parseInt(row.axe_x) == origine){
719                                                                        d = row;
720                                                                        return false;
721                                                                }
722                                                                return true;
723                                                        });
724                                                       
725                                                        step = x(values2[1].axe_x)-x(values2[0].axe_x);
726                                                       
727                                                        translate_defaut = '-'+x(d.axe_x);
728
729                                                        if(diff > 0)
730                                                                translate_defaut = parseFloat(translate_defaut)+(diff*step);
731
732                                                        // Afficher le premier slide ou les infos de scroll
733                                                        var annee_debut =  values[0].axe_x;
734                                                        if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 1){
735                                                                var degres = (parseFloat(value_origine.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
736                                                                if(degres.charAt(0) == '-'){
737                                                                        degres = degres.replace('-','').replace('.',',');
738                                                                        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>";
739                                                                }else{
740                                                                        degres = degres.replace('-','').replace('.',',');
741                                                                        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>";
742                                                                }
743                                                        }
744                                                        else if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 2){
745                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
746                                                                ppm = ppm.replace('-','').replace('.',',');
747                                                                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>";
748                                                        }
749                                                       
750                                                        if(texte_debut){
751                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
752                                                                        infobox_bloquee = true;
753                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
754                                                                                jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
755                                                                                        event.preventDefault();
756                                                                                        event.stopPropagation();
757                                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
758                                                                                                infobox_bloquee = false;
759                                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
760                                                                                                jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
761                                                                                        }).trigger('infobox_close');
762                                                                                });
763                                                                        }).trigger('infobox_open');
764                                                                });
765                                                        }
766                                                        else{
767                                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
768                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
769                                                                        jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
770                                                                });
771                                                        }
772                                                        draw(translate_defaut);
773                                                        drawlines_interaction(translate_defaut);
774                                                });
775                                               
776                                                // Au click sur les fleches on avance d'un cran ou on recule
777                                                jQuery('.arrows_nav > div')
778                                                        .on('click',function(event){
779                                                                event.stopPropagation();
780                                                        })
781                                                        .on('mouseenter',function(event){
782                                                                event.stopPropagation();
783                                                                if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
784                                                                        if(jQuery(this).is('.left')){
785                                                                                graph_replace(-1);
786                                                                                progress_mousedown = setInterval(function(){
787                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
788                                                                                                                                        graph_replace(-1);
789                                                                                                                        }, vitesse);
790                                                                        }else{
791                                                                                graph_replace(1);
792                                                                                progress_mousedown = setInterval(function(){
793                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
794                                                                                                                                        graph_replace(1);
795                                                                                                                        }, vitesse);
796                                                                        }
797                                                                }
798                                                        })
799                                                        .on('mouseleave',function(event){
800                                                                event.stopPropagation();
801                                                                clearInterval(progress_mousedown);
802                                                        });
803                                               
804                                                jQuery(window).on('keydown',function(e) {
805                                                        var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
806                                                        switch (e.keyCode) {
807                                                                case 27 :
808                                                                        /**
809                                                                         * Touche esc : ferme les anecdotes
810                                                                         */
811                                                                        clearInterval(progress_mousedown);
812                                                                        if(jQuery('.'+infobox_class).is(':visible'))
813                                                                                jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
814                                                                        e.preventDefault();
815                                                                        break;
816                                                                case 32 :
817                                                                         /**
818                                                                          * Touche Space : avance sur la ligne de temps
819                                                                          */
820                                                                        clearInterval(progress_mousedown);
821                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
822                                                                                graph_replace(1);
823                                                                                progress_mousedown = setInterval(function(){
824                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
825                                                                                                                                        graph_replace(1);
826                                                                                                                        }, vitesse);
827                                                                        }
828                                                                        e.preventDefault();
829                                                                        break;
830                                                                case 37 : case 39 : case 38 : case 40 :
831                                                                        /**
832                                                                         * Gauche (37), droite (39), haut (38), bas (40)
833                                                                         * Avance ou recule sur la ligne de temps
834                                                                         */
835                                                                        clearInterval(progress_mousedown);
836                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
837                                                                                if(e.keyCode == 37 || e.keyCode == 40){
838                                                                                        graph_replace(-1);
839                                                                                        progress_mousedown = setInterval(function(){
840                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
841                                                                                                                                                graph_replace(-1);
842                                                                                                                                }, vitesse);
843                                                                                }else{
844                                                                                        graph_replace(1);
845                                                                                        progress_mousedown = setInterval(function(){
846                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
847                                                                                                                                                graph_replace(1);
848                                                                                                                                }, vitesse);
849                                                                                }
850                                                                        }
851                                                                        e.preventDefault();
852                                                                        break;
853                                                        }
854                                                }).on('keyup',function(e){
855                                                        switch (e.keyCode) {
856                                                                /**
857                                                                 * On arrÚte le setInterval à chaque nouvelle itération
858                                                                 */
859                                                                case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
860                                                                        clearInterval(progress_mousedown);
861                                                                        e.preventDefault();
862                                                                break;
863                                                        }
864                                                });
865                                                /**
866                                                 * Fonction de création des objets du diagramme
867                                                 */
868                                                function draw(translatex){
869                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende,.start-line,.bloc_yaxis").remove();
870                                                        d3.select(".paths")
871                                                                .attr("transform", "translate("+translatex+", 0)")
872                                                       
873                                                        // On ajoute la ligne de données pour la période aprÚs naissance
874                                                        svg.selectAll('.paths').append("path")
875                                                                .attr("class", "line apresnaissance")
876                                                                .attr("d", line(values2));
877       
878                                                        // Ajout la ligne de données avant la naissance
879                                                        svg.selectAll('.paths').append("path")
880                                                                .attr("class", "line avtnaissance")
881                                                                .attr("d", line(values1));
882       
883                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
884                                                        svg.selectAll('.paths').append("g")
885                                                                .attr("class", "x axis")
886                                                                .attr("transform", "translate(0," + height + ")")
887                                                                .call(xAxis)
888                                                                .selectAll("text")
889                                                                        .style("text-anchor", "start")
890                                                                        .attr("dy", "-0.6em")
891                                                                        .attr("dx", "1em")
892                                                                        .attr("transform", function(d) { return "rotate(-270)" });
893                                                       
894                                                        svg.select('.x.axis')
895                                                                .datum( value_origine )
896                                                                .append("line")
897                                                                        .attr( 'class', 'axis_postnaissance' )
898                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
899                                                                        .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }) // vertical line so same value on each
900                                                                        .attr("y1",0).attr("y1",0);
901
902                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
903                                                        jQuery('.x .tick text').each(function(){
904                                                                // On enlÚve tous les ticks > aujourd'hui sauf le dernier'
905                                                                if(parseInt(jQuery(this).text()) > values2[values2.length-1].axe_x && parseInt(jQuery(this).text()) != values[values.length-1].axe_x){
906                                                                        jQuery(this).remove();
907                                                                }else{
908                                                                        var classe = 'tick';
909                                                                        if(parseInt(jQuery(this).text()) < value_origine.axe_x)
910                                                                                classe = classe+' tickold';
911                                                                        if(jQuery(this).text().charAt(3) == 0){
912                                                                                classe = classe+' tick_important';
913                                                                                jQuery(this).attr("dy",'-0.5em');
914                                                                        }
915                                                                        if(classe != 'tick')
916                                                                                jQuery(this).parent('.tick').attr('class',classe);
917                                                                }
918                                                        });
919                                                       
920                                                        var rectangle = svg.append("rect")
921                                                                                .attr("class","bloc_yaxis")
922                                                                                .attr("x", graph_width-35)
923                                                                                .attr("y", 0)
924                                                                                .attr("fill","#ffffff")
925                                                                                .attr("width", 35)
926                                                                                .attr("height", graph_height);
927
928                                                        // Ajout de l'axe Y
929                                                        var right = graph_width-35;
930                                                        svg.append("g")
931                                                                .attr("class", "y axis")
932                                                                .attr("transform", "translate("+right+",0)")
933                                                                .call(yAxis);
934
935                                                        // On enlÚve les ticks de l'axe y trop haut
936                                                        jQuery('.y .tick text').each(function(){
937                                                                if(parseFloat(jQuery(this).text()) > ymax_origine)
938                                                                        jQuery(this).parent().remove();
939                                                        });
940
941                                                        // Ajout de la légende des axes
942                                                        svg.append("text") 
943                                                                .attr("x",0)
944                                                                .attr("y",height+60)
945                                                                .attr("class", "legende")
946                                                                .style("text-anchor", "start")
947                                                                .text("#AXE_Y");
948
949                                                        // Ajout des points d'Anecdotes cliquables
950                                                        // sera certainement à supprimer aprÚs debug
951                                                        d3.select("#"+containerid).select('.paths')
952                                                                .selectAll(".dot")
953                                                                .data(values_commentaire)
954                                                                .enter()
955                                                                        .append('circle')
956                                                                        .attr("class","infos_dots")
957                                                                        .attr("cx", function(d) { return x(d.axe_x); })
958                                                                        .attr("cy",function(d) { return y(d.axe_y); })
959                                                                        .attr('r',6)
960                                                                        .on('click',function(d){
961                                                                                d3.event.stopPropagation();
962                                                                                if(jQuery('.'+infobox_class).is(':visible'))
963                                                                                        return false;
964                                                                               
965                                                                                jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
966                                                                                jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
967                                                                                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>',
968                                                                                        function(){
969                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
970                                                                                                        jQuery(this).find('.close_box').on('click',function(){
971                                                                                                                event.preventDefault();
972                                                                                                                event.stopPropagation();
973                                                                                                                jQuery('.infos_dots.active').attr('class','infos_dots')
974                                                                                                                        .animate({'stroke-width':'3'},300);
975                                                                                                                jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
976                                                                                                        });
977                                                                                                }).trigger('infobox_open');
978                                                                                        }
979                                                                                );
980                                                                        });
981                                                       
982                                                        if(naissance > parseInt(values[0].axe_x)){
983                                                                // Ajout du groupe qui contiendra les éléments de la date de naissance
984                                                                ligne_naissance_groupe = svg.select('.paths').append("g")
985                                                                        .attr("class", "birth-line");
986               
987                                                                // Ajout de la ligne de naissance
988                                                                ligne_naissance = ligne_naissance_groupe
989                                                                        .datum( value_origine )
990                                                                        .append("line")
991                                                                                .attr( 'class', 'ligne_naissance second_plan' )
992                                                                                .attr("x1", function( d ) { return x( d.axe_x ); })
993                                                                                .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
994                                                                                .attr("y1",80).attr("y2", height);
995       
996                                                                [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
997                                                                // Ajout de l'image de la bougie
998                                                                ligne_naissance_groupe
999                                                                        .datum(value_origine)
1000                                                                        .append("svg:image")
1001                                                                                .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
1002                                                                                .attr("x", function(d){
1003                                                                                        return x(value_origine.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
1004                                                                                })
1005                                                                                .attr("y", "2")
1006                                                                                .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
1007                                                                                .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
1008                                                        }
1009                                                       
1010                                                        [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
1011                                                        // Ajout du groupe pour le depart
1012                                                        ligne_depart_groupe = svg.select('.paths').append("g").attr("class", "start-line");
1013       
1014                                                        // Ajout de la ligne de depart
1015                                                        ligne_depart_aujd = ligne_depart_groupe
1016                                                                .datum(values[0])
1017                                                                .append("line")
1018                                                                        .attr("class","ligne_depart second_plan")
1019                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
1020                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
1021                                                                        .attr("y1",[(#GET{image_depart}|extraire_attribut{height}|plus{10})]).attr("y2", height);
1022
1023                                                        // Ajout de l'image de depart
1024                                                        ligne_depart_groupe
1025                                                                .datum(values[0])
1026                                                                .append("svg:image")
1027                                                                        .attr("xlink:href", "[(#GET{image_depart}|extraire_attribut{src})]")
1028                                                                        .attr("x", function(d){
1029                                                                                return x(d.axe_x)-[(#GET{image_depart}|extraire_attribut{width}|div{2})];
1030                                                                        })
1031                                                                        .attr("y", "2")
1032                                                                        .attr("width", "[(#GET{image_depart}|extraire_attribut{width})]")
1033                                                                        .attr("height", "[(#GET{image_depart}|extraire_attribut{height})]");
1034       
1035                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
1036                                                        // Ajout du groupe pour Aujourd'hui
1037                                                        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
1038       
1039                                                        // Ajout de la ligne d'aujourd'hui
1040                                                        ligne_aujd = ligne_aujd_groupe
1041                                                                .datum(values2[values2.length-1])
1042                                                                .append("line")
1043                                                                        .attr("class","ligne_aujd second_plan")
1044                                                                        .attr("x1", function( d ) { return x(d.axe_x);})
1045                                                                        .attr("x2",function( d ) { return x(d.axe_x); })
1046                                                                        .attr("y1",[(#GET{image_aujd}|extraire_attribut{height}|plus{10})]).attr("y2", height);
1047
1048                                                        // Ajout de l'image de la bougie
1049                                                        ligne_aujd_groupe
1050                                                                .datum(values2[values2.length-1])
1051                                                                .append("svg:image")
1052                                                                        .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
1053                                                                        .attr("x", function(d){
1054                                                                                return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
1055                                                                        })
1056                                                                        .attr("y", "2")
1057                                                                        .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
1058                                                                        .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
1059                                                       
1060                                                }
1061
1062                                                /**
1063                                                 * Afficher le bloc d'interaction
1064                                                 *
1065                                                 * @param translatex
1066                                                 */
1067                                                function drawlines_interaction(translatex){
1068                                                        d3.selectAll(".interaction").remove();
1069                                                        ligne_interactive_groupe = svg.append("g")
1070                                                                .attr("class", "interaction");
1071                                                               
1072                                                        /**
1073                                                         * Ajouter la ligne d'interaction
1074                                                         */
1075                                                        ligne_interactive =  ligne_interactive_groupe
1076                                                                .datum(value_actuelle)
1077                                                                        .append("line")
1078                                                                                .attr('class', 'ligne_interactive')
1079                                                                                .attr("x1", function(d) { return x( d.axe_x )+parseFloat(translatex); })
1080                                                                                .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
1081                                                                                .attr("y1",100)
1082                                                                                .attr("y2", height);
1083                                                        /**
1084                                                         * Ajouter le triangle
1085                                                         */
1086                                                        ligne_interactive_groupe.append('path')
1087                                                                .attr('class','triangle')
1088                                                                .attr('d', function(d) { 
1089                                                                        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);
1090                                                                        var x4 = 'M '+ x1 +' '+height+' L '+x2+' '+height+' L '+x3+' '+(height-25)+' z';
1091                                                                        return x4;
1092                                                                });
1093                                                }
1094                                                jQuery('.'+infobox_class).on('infobox_close',function(){
1095                                                        if(typeof(callback_infobox_close) == 'function'){
1096                                                                callback_infobox_close()
1097                                                        }
1098                                                });
1099                                                jQuery('.'+infobox_class).on('infobox_open',function(){
1100
1101                                                });
1102                                                </script>
1103                                </div>
1104                                [<div class="logo_terraeco">
1105                                        <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
1106                                </div>]
1107                                </BOUCLE_jeu_selectionne>
1108                                </B_jeu_selectionne>
1109                                <B_jeux>
1110                                <div class="texte">#TEXTE</div>
1111                                <div class="liste_infographies">
1112                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
1113                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
1114                                </BOUCLE_jeux>
1115                                </div>
1116                                </B_jeux>
1117                                <//B_jeu_selectionne>
1118                                <//B_si_naissance_1951>
1119                        <//B_si_pas_naissance>
1120                </div>
1121                </div>
1122        </div>
1123        [(#ENV{donnees}|non)[<footer class="footer clearfix #EDIT{credits}">
1124                (#CREDITS|image_reduire{100,100})
1125        </footer>]]
1126</div>
1127</body>
1128</html>
1129</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.