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

Last change on this file since 8003 was 8003, checked in by kent1, 7 years ago

Pas de logs

On trig un évènement infobox_close, infobox_open

Cela peut être utile

File size: 43.8 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</head>
20
21<body class="pas_surlignable page_infographie">
22<div class="page">
23       
24        <div class="main infographie[ (#INFO_CSS_CLASS{infographies_data,#ENV{donnees}})]">
25                <div class="wrapper hfeed">
26                <div class="content hentry" id="content">
27                        <div class="cartouche">
28                                <h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{40,*}) ]#TITRE</h1>
29                        </div>
30                        <div class="menu_top">
31                                <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>
32                                <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>
33                                <a href="http://www.twitter.com" 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>
34                                <a href="http://www.facebook.com" 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>
35                        </div>
36                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
37                        <div class="formulaire_spip[(#ENV{naissance}|strlen|et{#ENV{naissance}|<{1900}|ou{#ENV{naissance}|>{2010}}}|oui)erreur #SET{erreur_naissance,oui}]">
38                                <form  action="[(#SELF)]" method="get">
39                                        [(#SELF|form_hidden)]
40                                        <div class="champ">
41                                                <label for="naissance"><:terraeco:label_naissance:></label>
42                                                [(#GET{erreur_naissance}|=={oui}|oui)<span class="message_erreur">Êtes-vous sûr d'être né en #ENV{naissance} ?</span>]
43                                                <input type="text" class="texte" id="naissance" name="naissance" maxlength="4" size="4" value="#ENV{naissance,''}" />
44                                        </div>
45                                        <div class="boutons">
46                                                <input type="submit" class="submit" id="submit" value="OK" />
47                                        </div>
48                                </form>
49                        </div>
50                        </BOUCLE_si_pas_naissance>
51                        </B_si_pas_naissance>
52                                <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
53                                <div class="formulaire_spip">
54                                        <form  action="[(#SELF)]" method="get">
55                                                [(#SELF|form_hidden)]
56                                                <input type="hidden" name="avt_naissance" value="oui" />
57                                                <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
58                                                [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
59                                                </div>
60                                                <div class="boutons">
61                                                        <input type="submit" class="submit" id="submit" value="OK" />
62                                                </div>
63                                        </form>
64                                </div>
65                                </BOUCLE_si_naissance_1951>
66                                </B_si_naissance_1951>
67                                <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
68                                <div class="infographie[ (#CSS_CLASS)]">
69                                        <div class="description_donnees">
70                                                [<h3 class="#EDIT{titre}">(#TITRE)</h3>]
71                                                [<div class="texte #EDIT{texte}">
72                                                (#TEXTE)
73                                                </div>]
74                                                [<div class="credits #EDIT{credits}">
75                                                (#CREDITS)
76                                                </div>]
77                                        </div>
78                                       
79                                        <B_infographies_logo>
80                                        <div class="infographies_logo">
81                                        <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
82                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|non)
83                                        <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]</a>]
84                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)
85                                        <strong class="on">[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})]</strong>]
86                                        </BOUCLE_infographies_logo>
87                                        </div>
88                                        </B_infographies_logo>
89                                        <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
90                                        #SET{naissance_min,#AXE_X}
91                                        </BOUCLE_naissance_min>
92                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;"></div>
93                                        <script>
94                                                var containerid='graph1',infobox_class='infobox',
95                                                        values = [],values1 = [],values2 = [], values_commentaire= [], value_naissance = [], value_origine = [],
96                                                        values_perspective1_haute = [], values_perspective1_basse = [], values_perspective1_mediane = [],
97                                                        values_perspective2_haute = [], values_perspective2_basse = [], values_perspective2_mediane = [],
98                                                        tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
99                                               
100                                                var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
101                                                        centre_origine = 1962, translate_defaut = 0;
102                                               
103                                                var margin = {top: 0, right: 5, bottom: 60, left: 5},
104                                                        graph_width = jQuery('#'+containerid).width() - margin.left - margin.right,
105                                                        step = graph_width/22,
106                                                        height = 450 - margin.top - margin.bottom,
107                                                        vitesse = 200,
108                                                        infobox = tip = moving = infobox_bloquee = move_again = progress_mousedown = false;
109
110                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
111                                                var x = d3.scale.linear(),
112                                                        y = d3.scale.linear().range([height, 0]),
113                                                        xAxis = d3.svg.axis().scale(x).ticks(50).tickFormat(d3.format(".0f")).orient("bottom");
114                                               
115                                                // Un générateur de lignes
116                                                var line = d3.svg.line()
117                                                        .x(function(d) { return x(d.axe_x); })
118                                                        .y(function(d) { return y(d.axe_y); });
119                                               
120                                                // Un générateur de zones
121                                                var area = d3.svg.area()
122                                                        .x(function(d) { return x(d.axe_x); })
123                                                        .y0(function(d) { return y(d.axe_y); })
124                                                        .y1(function(d) { return y(d.axe_y1); });
125
126                                                jQuery('#'+containerid).on('mousewheel', function(event) {
127                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
128                                                                if(event.deltaX > 0 || event.deltaY > 0)
129                                                                        var val = 1;
130                                                                else if(event.deltaX < 0 || event.deltaY < 0)
131                                                                        var val = -1;
132                                                                graph_replace(val);
133                                                        }else if(jQuery('.'+infobox_class).is(':hidden') && move_again == false)
134                                                                move_again = true;
135                                                        return false;
136                                                });
137                                               
138                                                // Mise à jour de l'infobox si elle existe
139                                                function infobox_update(content,callback){
140                                                        if(infobox){
141                                                                // On met le contenu
142                                                                jQuery('.'+infobox_class).html(content);
143                                                               
144                                                                // Les lien en target="_blank"
145                                                                jQuery('.'+infobox_class+' a').click(function(){
146                                                                        jQuery(this).attr('target','_blank');
147                                                                });
148                                                               
149                                                                // Les oembed en 100%
150                                                                jQuery('.'+infobox_class+' iframe').each(function(){
151                                                                        var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
152                                                                        jQuery(this).width('100%').height(jQuery(this).height()*ratio);
153                                                                });
154                                                               
155                                                                // On la replace en hauteur
156                                                                var margin_top = (jQuery('#'+containerid+' svg').outerHeight()-jQuery('.legende').height()-35-jQuery('.'+infobox_class).outerHeight())/2;
157                                                                jQuery('.'+infobox_class).css({'margin-top':margin_top});
158                                                               
159                                                                // Si on a donné une fonction comme callback => on l'exécute
160                                                                if(typeof(callback) == 'function') callback();
161                                                        }
162                                                }
163
164                                                // Avance le graph de 1 ou le recule de -1 (en année)
165                                                function graph_replace(valeur){
166                                                        if(((valeur == '+1') && date_origine >= values2[values2.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
167                                                                return false;
168                                                        if(date_origine >= values2[values2.length-1].axe_x)
169                                                                return false;
170                                                        moving = true;
171                                                        date_origine = date_origine+valeur;
172
173                                                        /**
174                                                         * A essayer : values.filter
175                                                         * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
176                                                         */
177                                                        values.every(function(row, i){
178                                                                if(parseInt(row.axe_x) == date_origine){
179                                                                        value_origine = d = row;
180                                                                        return false;
181                                                                }
182                                                                return true;
183                                                        });
184                                                       
185                                                        var translatex = x(value_naissance.axe_x)-x(d.axe_x)-translate_defaut;
186
187                                                        jQuery('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
188                                                        var left = x(value_naissance.axe_x)-translate_defaut-jQuery('.tooltip').outerWidth()+5;
189                                                        var top = y(d.axe_y) - (jQuery('.tooltip').outerHeight()/2);
190                                                        if(jQuery('.tooltip').is(':hidden'))
191                                                                jQuery('.tooltip').css({'top':top,'left':left}).show();
192                                                        else
193                                                                jQuery('.tooltip').animate({'top':top,'left':left},vitesse);
194                                                       
195                                                        // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
196                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
197                                                                var show_info = function(){
198                                                                        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>',
199                                                                                function(){
200                                                                                        jQuery('.'+infobox_class).fadeIn(vitesse,function(){
201                                                                                                jQuery(this).trigger('infobox_open');
202                                                                                                jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(){
203                                                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
204                                                                                                                jQuery(this).trigger('infobox_close');
205                                                                                                        });
206                                                                                                });
207                                                                                        });
208                                                                                }
209                                                                        );
210                                                                }
211                                                                setTimeout(show_info,vitesse-30);
212                                                        }
213                                                       
214                                                        d3.select(".paths").transition()
215                                                                .duration(vitesse)
216                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
217                                                                        if(move_again && jQuery('.'+infobox_class).is(':hidden')){
218                                                                                move_again = false
219                                                                                graph_replace(valeur);
220                                                                        }else
221                                                                                move_again = moving = false;
222                                                                });
223
224                                                        // Afficher le message de fin de données actuelles
225                                                        if(date_origine == values[values.length-1].axe_x){
226                                                                var show_info = function(){
227                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
228                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
229                                                                                if(degres.charAt(0) == '-'){
230                                                                                        degres = degres.replace('-','');
231                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
232                                                                                }else
233                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
234                                                                        }
235                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
236                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
237                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
238                                                                                if(degres.charAt(0) == '-'){
239                                                                                        degres = degres.replace('-','');
240                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
241                                                                                }else
242                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
243                                                                        }
244                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
245                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
246                                                                                var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.</p>";
247                                                                        }
248                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
249                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
250                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
251                                                                                var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.</p>";
252                                                                        }
253                                                                       
254                                                                        move_again = moving = false;
255                                                                       
256                                                                        if(texte_fin){
257                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>',
258                                                                                        function(){
259                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
260                                                                                                        jQuery(this).trigger('infobox_open');
261                                                                                                        jQuery('.'+infobox_class+' .close_box').unbind('click').unbind('click').on('click',function(){
262                                                                                                                jQuery('.'+infobox_class).fadeOut(500,function(){
263                                                                                                                        jQuery(this).trigger('infobox_close');
264                                                                                                                });
265                                                                                                                jQuery('#'+containerid).fadeOut(1000,function(){
266                                                                                                                        jQuery('.tooltip').hide();
267                                                                                                                        var callback = jQuery('#'+containerid).fadeIn(1000);
268                                                                                                                        if(#ENV{donnees,1} == 1){
269                                                                                                                                draw_perspectives_1(callback);
270                                                                                                                        }else{
271                                                                                                                                draw_perspectives_2(callback);
272                                                                                                                        }
273                                                                                                                });
274                                                                                                        });
275                                                                                                });
276                                                                                        });
277                                                                        }
278                                                                       
279                                                                }
280                                                                setTimeout(show_info,vitesse);
281                                                        }
282                                                }
283                                               
284                                                function draw_perspectives_1(callback){
285                                                       
286                                                        d3.text("#CHEMIN{csv/perspective_temp_rcp85_original.csv}", function(datasetText) {
287                                                                var parsedCSV = d3.csv.parseRows(datasetText);
288                                                                // On ajoute la ligne de données pour la période aprÚs naissance
289                                                                parsedCSV.forEach(function(row, i){
290                                                                        new_row_haute = {};
291                                                                        new_row_basse = {};
292                                                                        new_row_mediane = {};
293                                                                        new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
294                                                                        new_row_haute.axe_y = row[3];
295                                                                        new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = row[2];
296                                                                        new_row_basse.axe_y1 = row[1];
297                                                                        values_perspective1_haute.push(new_row_haute);
298                                                                        values.push(new_row_haute);
299                                                                        values_perspective1_basse.push(new_row_basse);
300                                                                        values_perspective1_mediane.push(new_row_mediane);
301                                                                });
302                                                                /**
303                                                                 * xmax devient la date maximale
304                                                                 */
305                                                                xmax = values_perspective1_haute[values_perspective1_haute.length-1].axe_x;
306                                                                ymax = values_perspective1_haute[values_perspective1_haute.length-1].axe_y;
307                                                                ymax = (ymax-ymin)*1.25;
308                                                               
309                                                                /**
310                                                                 * On change la taille du diagramme pour afficher :
311                                                                 * - toute la perspective
312                                                                 * - la date de naissance
313                                                                 * - 7 années avant la date de naissance
314                                                                 * - 3 années à la fin pour voir le "DEMAIN"
315                                                                 */ 
316                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-naissance+10))*(xmax-xmin);
317                                                               
318                                                                x.range([0, real_width]).domain([xmin, xmax]);
319                                                                y.domain([ymin, ymax]).nice();
320                                                               
321                                                                translate_defaut = x(value_origine.axe_x);
322                                                                translate_new = x(value_naissance.axe_x-7);
323                                                                /**
324                                                                 * On parse la perspective basse
325                                                                 */
326                                                                d3.text("#CHEMIN{csv/perspective_temp_rcp26_original.csv}", function(datasetText) {
327                                                                        var parsedCSV = d3.csv.parseRows(datasetText);
328                                                                        // On ajoute la ligne de données pour la période aprÚs naissance
329                                                                        parsedCSV.forEach(function(row, i){
330                                                                                new_row_haute = {};
331                                                                                new_row_basse = {};
332                                                                                new_row_mediane = {};
333                                                                                new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
334                                                                                new_row_haute.axe_y = row[3];
335                                                                                new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = row[2];
336                                                                                new_row_basse.axe_y1 = row[1];
337                                                                                values_perspective2_haute.push(new_row_haute);
338                                                                                values_perspective2_basse.push(new_row_basse);
339                                                                                values_perspective2_mediane.push(new_row_mediane);
340                                                                        });
341                                                                       
342                                                                        /**
343                                                                         * On retrace les diagrammes
344                                                                         */
345                                                                        draw(translate_new);
346                                                                        drawlines_interaction(translate_new);
347                                                                       
348                                                                        /**
349                                                                         * On ajoute les perspectives
350                                                                         */
351                                                                        svg.selectAll('.paths').append("path")
352                                                                                .attr("class", "area perspective perspective1_haute")
353                                                                                .attr("d", area(values_perspective1_haute));
354                                                                        svg.selectAll('.paths').append("path")
355                                                                                .attr("class", "area perspective perspective1_basse")
356                                                                                .attr("d", area(values_perspective1_basse));
357                                                                        svg.selectAll('.paths').append("path")
358                                                                                .attr("class", "area perspective perspective2_haute")
359                                                                                .attr("d", area(values_perspective2_haute));
360                                                                        svg.selectAll('.paths').append("path")
361                                                                                .attr("class", "area perspective perspective2_basse")
362                                                                                .attr("d", area(values_perspective2_basse));
363                                                                        svg.selectAll('.paths').append("path")
364                                                                                .attr("class", "line perspective perspective2_mediane")
365                                                                                .attr("d", line(values_perspective2_mediane));
366                                                                        svg.selectAll('.paths').append("path")
367                                                                                .attr("class", "line perspective perspective1_mediane")
368                                                                                .attr("d", line(values_perspective1_mediane));
369                                                                        // Si on a donné une fonction comme callback => on l'exécute
370                                                                        // Ajout du groupe pour Aujourd'hui
371                                                                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
372                       
373                                                                        // Ajout de la ligne d'aujourd'hui
374                                                                        ligne_demain = ligne_demain_groupe
375                                                                                .datum(values[values.length-1])
376                                                                                .append("line")
377                                                                                        .attr( 'class', 'ligne_demain' )
378                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
379                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
380                                                                                        .attr("y1",80).attr("y2", height);
381               
382                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
383                                                                        // Ajout de l'image de la bougie
384                                                                        ligne_demain_groupe
385                                                                                .datum(values[values.length-1])
386                                                                                .append("svg:image")
387                                                                                        .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
388                                                                                        .attr("x", function(d){
389                                                                                                return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
390                                                                                        })
391                                                                                        .attr("y", "2")
392                                                                                        .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
393                                                                                        .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
394                                                                        var rectangle = svg.select('.paths').append("rect")
395                                                                                .attr("class","legende_perspective")
396                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
397                                                                                .attr("y", 390)
398                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
399                                                                                .attr("height", 35);
400                                                                        var text_rectangle = svg.select('.paths').append("text") 
401                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
402                                                                                .attr("y",410)
403                                                                                .attr("class", "legende_perspective_text")
404                                                                                .style("text-anchor", "end")
405                                                                                .text("Estimations du National Climatic Data Center (NCDC)");
406                                                                        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>";
407                                                                                infobox_update(texte_fin,function(){
408                                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
409                                                                                                jQuery(this).trigger('infobox_open');
410                                                                                        });
411                                                                                });
412
413                                                                        if(typeof(callback) == 'function') callback();
414                                                                });
415                                                        });
416                                                       
417                                                }
418
419                                                function draw_perspectives_2(callback){
420                                                       
421                                                        d3.text("#CHEMIN{csv/perspective_co2_rcp85_original.csv}", function(datasetText) {
422                                                                var parsedCSV = d3.csv.parseRows(datasetText);
423                                                                // On ajoute la ligne de données pour la période aprÚs naissance
424                                                                parsedCSV.forEach(function(row, i){
425                                                                        new_row_mediane = {};
426                                                                        new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
427                                                                        new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
428                                                                        values.push(new_row_mediane);
429                                                                        values_perspective1_mediane.push(new_row_mediane);
430                                                                });
431                                                                /**
432                                                                 * xmax devient la date maximale
433                                                                 */
434                                                                xmax = values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x;
435                                                                ymax = d3.max(values_perspective1_mediane, function(d) { return parseFloat(d.axe_y).toFixed(2); })*1.25;
436                                                               
437                                                                /**
438                                                                 * On change la taille du diagramme pour afficher :
439                                                                 * - toute la perspective
440                                                                 * - la date de naissance
441                                                                 * - 7 années avant la date de naissance
442                                                                 * - 3 années à la fin pour voir le "DEMAIN"
443                                                                 */ 
444                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-naissance+10))*(xmax-xmin);
445                                                               
446                                                                x.range([0, real_width]).domain([xmin, xmax]);
447                                                                y.domain([ymin, ymax]).nice();
448                                                               
449                                                                translate_defaut = x(value_origine.axe_x);
450                                                                translate_new = x(value_naissance.axe_x-7);
451                                                                /**
452                                                                 * On parse la perspective basse
453                                                                 */
454                                                                d3.text("#CHEMIN{csv/perspective_co2_rcp3_original.csv}", function(datasetText) {
455                                                                        var parsedCSV = d3.csv.parseRows(datasetText);
456                                                                        // On ajoute la ligne de données pour la période aprÚs naissance
457                                                                        parsedCSV.forEach(function(row, i){
458                                                                                new_row_mediane = {};
459                                                                                new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
460                                                                                new_row_mediane.axe_y = parseFloat(row[1]).toFixed(2);
461                                                                                values_perspective2_mediane.push(new_row_mediane);
462                                                                        });
463                                                                       
464                                                                        /**
465                                                                         * On retrace les diagrammes
466                                                                         */
467                                                                        draw(translate_new);
468                                                                        drawlines_interaction(translate_new);
469                                                                       
470                                                                        /**
471                                                                         * On ajoute les perspectives
472                                                                         */
473                                                                        svg.selectAll('.paths').append("path")
474                                                                                        .attr("class", "line perspective perspective1_mediane")
475                                                                                        .attr("d", line(values_perspective1_mediane));
476                                                                        svg.selectAll('.paths').append("path")
477                                                                                        .attr("class", "line perspective perspective2_mediane")
478                                                                                        .attr("d", line(values_perspective2_mediane));
479                                                                        // Si on a donné une fonction comme callback => on l'exécute
480                                                                        // Ajout du groupe pour Aujourd'hui
481                                                                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
482                       
483                                                                        // Ajout de la ligne d'aujourd'hui
484                                                                        ligne_demain = ligne_demain_groupe
485                                                                                .datum(values[values.length-1])
486                                                                                .append("line")
487                                                                                        .attr( 'class', 'ligne_demain' )
488                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
489                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
490                                                                                        .attr("y1",80).attr("y2", height);
491               
492                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
493                                                                        // Ajout de l'image de la bougie
494                                                                        ligne_demain_groupe
495                                                                                .datum(values[values.length-1])
496                                                                                .append("svg:image")
497                                                                                        .attr("xlink:href", "[(#GET{image_demain}|extraire_attribut{src})]")
498                                                                                        .attr("x", function(d){
499                                                                                                return x(d.axe_x)-[(#GET{image_demain}|extraire_attribut{width}|div{2})];
500                                                                                        })
501                                                                                        .attr("y", "2")
502                                                                                        .attr("width", "[(#GET{image_demain}|extraire_attribut{width})]")
503                                                                                        .attr("height", "[(#GET{image_demain}|extraire_attribut{height})]");
504                                                                        var rectangle = svg.select('.paths').append("rect")
505                                                                                .attr("class","legende_perspective")
506                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
507                                                                                .attr("y", 390)
508                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
509                                                                                .attr("height", 35);
510                                                                        var text_rectangle = svg.select('.paths').append("text") 
511                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
512                                                                                .attr("y",410)
513                                                                                .attr("class", "legende_perspective_text")
514                                                                                .style("text-anchor", "end")
515                                                                                .text("Estimations du National Climatic Data Center (NCDC)");
516                                                                        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>";
517                                                                                infobox_update(texte_fin,function(){
518                                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
519                                                                                                jQuery(this).trigger('infobox_open');
520                                                                                        });
521                                                                                });
522
523                                                                        if(typeof(callback) == 'function') callback();
524                                                                });
525                                                        });
526                                                       
527                                                }
528                                                // Add an SVG element with the desired dimensions and margin.
529                                                var svg = d3.select("#"+containerid).append("svg")
530                                                        .attr("width", graph_width )
531                                                        .attr("height", height + margin.top + margin.bottom)
532                                                        .append("g")
533                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
534
535                                                var paths = svg.append("g").attr("class", "paths")
536                                                       
537                                                // Ajouter le tooltip que l'on cache automatiquement
538                                                tip = d3.select('#'+containerid).append("div")
539                                                        .attr("class", "tooltip")
540                                                        .style("display", 'none');
541                                               
542                                                // Ajout de l'infobox'
543                                                infobox = d3.select('#'+containerid).append("div")
544                                                                .attr("class", infobox_class)
545                                                                .style("display", 'none');
546
547                                                // Au click sur le graph, on cache l'infobox si visible
548                                                jQuery('#'+containerid).on('click',function(){
549                                                        if(jQuery('.'+infobox_class).is(':visible')){
550                                                                if(infobox_bloquee){
551                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
552                                                                                jQuery(this).trigger('infobox_close');
553                                                                                infobox_bloquee = false;
554                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
555                                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
556                                                                                                jQuery(this).trigger('infobox_open');
557                                                                                        });
558                                                                                });
559                                                                               
560                                                                        });
561                                                                }
562                                                                else jQuery('.'+infobox_class).fadeOut(500,function(){
563                                                                        jQuery(this).trigger('infobox_close');
564                                                                });
565                                                        }
566                                                });
567                                               
568                                                // Ajouter les flÚches pour avancer et reculer
569                                                arrow_nav = d3.select('#'+containerid).append("div")
570                                                        .attr("class", "arrows_nav")
571                                                        .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>');
572                                               
573                                                /**
574                                                 * Récupération des données et on fabrique nos groupes de valeurs
575                                                 */
576                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
577                                                       
578                                                        values = data;
579                                                        var origine = 0;
580       
581                                                        values.forEach(function(row, i){
582                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
583                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
584                                                                if(row.axe_x <= naissance) values1.push(row);
585                                                                if(row.axe_x >= naissance) values2.push(row);
586                                                                if(row.axe_x == naissance) value_naissance = value_origine = row;
587                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1) values_commentaire.push(row);
588                                                        });
589
590                                                        xmin = values[0].axe_x;
591                                                        xmax = values[values.length-1].axe_x;
592                                                        if(#ENV{donnees} == 1)
593                                                                ymax = parseFloat('4.89');
594                                                        else
595                                                                ymax = 936;
596                                                               
597                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
598                                                        ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
599                                                       
600                                                        ymax = ymax + ((ymax-ymin)/3);
601                                                        /**
602                                                         * Si naissance - 7 ans est dans la visu, on part de là
603                                                         */
604                                                        if((naissance - 7) > xmin){
605                                                                origine = naissance -7;
606                                                                centre_origine = naissance + 4;
607                                                        }
608                                                        /**
609                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
610                                                         * et le point d'origine la valeur min
611                                                         */
612                                                        else{
613                                                                origine = xmin;
614                                                                centre_origine = parseInt(xmin)+11;
615                                                        }
616
617                                                        // Utilisation de every pour couper lorsque l'on a trouvé
618                                                        values.every(function(row,i){
619                                                                if(parseInt(row.axe_x) == origine){
620                                                                        d = row;
621                                                                        return false;
622                                                                }
623                                                                return true;
624                                                        });
625
626                                                        real_width = (graph_width/22)*(xmax-xmin);
627                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
628                                                        y.domain([ymin, ymax]).nice();
629
630                                                        translate_defaut = x(d.axe_x);
631
632                                                        // Afficher le premier slide ou les infos de scroll
633                                                        var annee_debut =  values[0].axe_x;
634                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
635                                                                var degres = (parseFloat(value_naissance.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
636                                                                if(degres.charAt(0) == '-'){
637                                                                        degres = degres.replace('-','');
638                                                                        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>";
639                                                                }else
640                                                                        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>";
641                                                        }
642                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
643                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
644                                                                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>";
645                                                        }
646                                                       
647                                                        if(texte_debut){
648                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
649                                                                        infobox_bloquee = true;
650                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
651                                                                                jQuery(this).trigger('infobox_open');
652                                                                                jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(){
653                                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
654                                                                                                jQuery(this).trigger('infobox_close');
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>')
657                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
658                                                                                                        jQuery(this).trigger('infobox_open');
659                                                                                                });
660                                                                                        });
661                                                                                });
662                                                                        });
663                                                                });
664                                                        }
665                                                        else{
666                                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
667                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
668                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
669                                                                                jQuery(this).trigger('infobox_open');
670                                                                        });
671                                                                });
672                                                        }
673                                                        draw(translate_defaut);
674                                                        drawlines_interaction(translate_defaut);
675                                                });
676                                               
677                                                // Au click sur les fleches on avance d'un cran ou on recule
678                                                jQuery('.arrows_nav > div')
679                                                        .on('click',function(event){
680                                                                event.stopPropagation();
681                                                        })
682                                                        .on('mousedown',function(event){
683                                                                event.stopPropagation();
684                                                                if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
685                                                                        if(jQuery(this).is('.left')){
686                                                                                graph_replace(-1);
687                                                                                progress_mousedown = setInterval(function(){
688                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
689                                                                                                                                        graph_replace(-1);
690                                                                                                                        }, vitesse);
691                                                                        }else{
692                                                                                graph_replace(1);
693                                                                                progress_mousedown = setInterval(function(){
694                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
695                                                                                                                                        graph_replace(1);
696                                                                                                                        }, vitesse);
697                                                                        }
698                                                                }
699                                                        })
700                                                        .on('mouseup',function(event){
701                                                                event.stopPropagation();
702                                                                clearInterval(progress_mousedown);
703                                                        });
704                                               
705                                                jQuery(window).on('keydown',function(e) {
706                                                        var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
707                                                        switch (e.keyCode) {
708                                                                case 27 :
709                                                                        /**
710                                                                         * Touche esc : ferme les anecdotes
711                                                                         */
712                                                                        clearInterval(progress_mousedown);
713                                                                        if(jQuery('.'+infobox_class).is(':visible'))
714                                                                                jQuery('.'+infobox_class).fadeOut(500,function(){
715                                                                                        jQuery(this).trigger('infobox_close');
716                                                                                });
717                                                                        e.preventDefault();
718                                                                        break;
719                                                                case 32 :
720                                                                         /**
721                                                                          * Touche Space : avance sur la ligne de temps
722                                                                          */
723                                                                        clearInterval(progress_mousedown);
724                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
725                                                                                graph_replace(1);
726                                                                                progress_mousedown = setInterval(function(){
727                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
728                                                                                                                                        graph_replace(1);
729                                                                                                                        }, vitesse);
730                                                                        }
731                                                                        e.preventDefault();
732                                                                        break;
733                                                                case 37 : case 39 : case 38 : case 40 :
734                                                                        /**
735                                                                         * Gauche (37), droite (39), haut (38), bas (40)
736                                                                         * Avance ou recule sur la ligne de temps
737                                                                         */
738                                                                        clearInterval(progress_mousedown);
739                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
740                                                                                if(e.keyCode == 37 || e.keyCode == 40){
741                                                                                        graph_replace(-1);
742                                                                                        progress_mousedown = setInterval(function(){
743                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
744                                                                                                                                                graph_replace(-1);
745                                                                                                                                }, vitesse);
746                                                                                }else{
747                                                                                        graph_replace(1);
748                                                                                        progress_mousedown = setInterval(function(){
749                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
750                                                                                                                                                graph_replace(1);
751                                                                                                                                }, vitesse);
752                                                                                }
753                                                                        }
754                                                                        e.preventDefault();
755                                                                        break;
756                                                        }
757                                                }).on('keyup',function(e){
758                                                        switch (e.keyCode) {
759                                                                /**
760                                                                 * On arrÚte le setInterval à chaque nouvelle itération
761                                                                 */
762                                                                case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
763                                                                        clearInterval(progress_mousedown);
764                                                                        e.preventDefault();
765                                                                break;
766                                                        }
767                                                });
768                                                /**
769                                                 * Fonction de création des objets du diagramme
770                                                 */
771                                                function draw(translatex){
772                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende").remove();
773                                                        d3.select(".paths")
774                                                                .attr("transform", "translate(-"+translatex+", 0)")
775                                                       
776                                                        // On ajoute la ligne de données pour la période aprÚs naissance
777                                                        svg.selectAll('.paths').append("path")
778                                                                .attr("class", "line apresnaissance")
779                                                                .attr("d", line(values2));
780       
781                                                        // Ajout la ligne de données avant la naissance
782                                                        svg.selectAll('.paths').append("path")
783                                                                .attr("class", "line avtnaissance")
784                                                                .attr("d", line(values1));
785       
786                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
787                                                        svg.selectAll('.paths').append("g")
788                                                                .attr("class", "x axis")
789                                                                .attr("transform", "translate(0," + height + ")")
790                                                                .call(xAxis)
791                                                                .selectAll("text")
792                                                                        .style("text-anchor", "start")
793                                                                        .attr("dy", "-0.6em")
794                                                                        .attr("dx", "1em")
795                                                                        .attr("transform", function(d) { return "rotate(-270)" });
796                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
797                                                        jQuery('.x .tick text').each(function(){
798                                                                if(parseInt(jQuery(this).text()) < value_naissance.axe_x)
799                                                                        jQuery(this).parent('.tick').attr('class','tick tickold');
800                                                        });
801                                                       
802                                                        // Ajout de la légende des axes
803                                                        svg.append("text") 
804                                                                .attr("x",-5)
805                                                                .attr("y",445)
806                                                                .attr("class", "legende")
807                                                                .style("text-anchor", "start")
808                                                                .text("#AXE_Y");
809
810                                                        // Ajout des points d'Anecdotes cliquables
811                                                        // sera certainement à supprimer aprÚs debug
812                                                        d3.select("#"+containerid).select('.paths')
813                                                                .selectAll(".dot")
814                                                                .data(values_commentaire)
815                                                                .enter()
816                                                                        .append('circle')
817                                                                        .attr("class","infos_dots")
818                                                                        .attr("cx", function(d) { return x(d.axe_x); })
819                                                                        .attr("cy",function(d) { return y(d.axe_y); })
820                                                                        .attr('r',6)
821                                                                        .on('click',function(d){
822                                                                                d3.event.stopPropagation();
823                                                                                if(jQuery('.'+infobox_class).is(':visible'))
824                                                                                        return false;
825                                                                               
826                                                                                jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
827                                                                                jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
828                                                                                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>',
829                                                                                        function(){
830                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
831                                                                                                        jQuery(this).trigger('infobox_open');
832                                                                                                        jQuery(this).find('.close_box').on('click',function(){
833                                                                                                                jQuery('.infos_dots.active').attr('class','infos_dots')
834                                                                                                                        .animate({'stroke-width':'3'},300);
835                                                                                                                jQuery('.'+infobox_class).fadeOut(500,function(){
836                                                                                                                        jQuery(this).trigger('infobox_close');
837                                                                                                                });
838                                                                                                        });
839                                                                                                });
840                                                                                        }
841                                                                                );
842                                                                        });
843
844                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
845                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
846                                                                .attr("class", "birth-line");
847       
848                                                        // Ajout de la ligne de naissance
849                                                        ligne_naissance = ligne_naissance_groupe
850                                                                .datum( value_naissance )
851                                                                .append("line")
852                                                                        .attr( 'class', 'ligne_naissance' )
853                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
854                                                                        .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
855                                                                        .attr("y1",80).attr("y2", height);
856
857                                                        [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
858                                                        // Ajout de l'image de la bougie
859                                                        ligne_naissance_groupe
860                                                                .datum(value_naissance)
861                                                                .append("svg:image")
862                                                                        .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
863                                                                        .attr("x", function(d){
864                                                                                return x(value_naissance.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
865                                                                        })
866                                                                        .attr("y", "2")
867                                                                        .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
868                                                                        .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
869                                                                       
870                                                       
871                                                        // Ajout du groupe pour Aujourd'hui
872                                                        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
873       
874                                                        // Ajout de la ligne d'aujourd'hui
875                                                        ligne_aujd = ligne_aujd_groupe
876                                                                .datum(values2[values2.length-1])
877                                                                .append("line")
878                                                                        .attr( 'class', 'ligne_aujd' )
879                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
880                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
881                                                                        .attr("y1",80).attr("y2", height);
882
883                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
884                                                        // Ajout de l'image de la bougie
885                                                        ligne_aujd_groupe
886                                                                .datum(values2[values2.length-1])
887                                                                .append("svg:image")
888                                                                        .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
889                                                                        .attr("x", function(d){
890                                                                                return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
891                                                                        })
892                                                                        .attr("y", "2")
893                                                                        .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
894                                                                        .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
895                                                       
896                                                }
897
898                                                /**
899                                                 * Afficher le bloc d'interaction
900                                                 *
901                                                 * @param translatex
902                                                 */
903                                                function drawlines_interaction(translatex){
904                                                        d3.selectAll(".interaction").remove();
905                                                        ligne_interactive_groupe = svg.append("g")
906                                                                .attr("class", "interaction");
907                                                               
908                                                        /**
909                                                         * Ajouter la ligne d'interaction
910                                                         */
911                                                        ligne_interactive =  ligne_interactive_groupe
912                                                                .datum(value_origine)
913                                                                        .append("line")
914                                                                                .attr('class', 'ligne_interactive')
915                                                                                .attr("x1", function(d) { return x( d.axe_x )-translatex; })
916                                                                                .attr("x2",function(d) { return x(d.axe_x)-translatex;})
917                                                                                .attr("y1",100)
918                                                                                .attr("y2", height);
919                                                        /**
920                                                         * Ajouter le triangle
921                                                         */
922                                                        ligne_interactive_groupe.append('path')
923                                                                .attr('class','triangle')
924                                                                .attr('d', function(d) { 
925                                                                        var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
926                                                                        var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
927                                                                        return x4;
928                                                                });
929                                                }
930                                                </script>
931                                </div>
932                                [<div class="logo_terraeco">
933                                        <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
934                                </div>]
935                                </BOUCLE_jeu_selectionne>
936                                </B_jeu_selectionne>
937                                <B_jeux>
938                                <div class="texte">#TEXTE</div>
939                                <div class="liste_infographies">
940                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
941                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
942                                </BOUCLE_jeux>
943                                </div>
944                                </B_jeux>
945                                <//B_jeu_selectionne>
946                                <//B_si_naissance_1951>
947                        <//B_si_pas_naissance>
948                </div>
949                </div>
950        </div>
951        [(#ENV{donnees}|non)[<footer class="footer clearfix #EDIT{credits}">
952                (#CREDITS|image_reduire{100,100})
953        </footer>]]
954</div>
955</body>
956</html>
957</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.