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

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

En fait rien n'est cumulé

On place le logo terraeco en bas à droite quand on est sur l'infographie

On autorise des naissances avant 1951, on le prend en compte dans le code JS

Améliorations CSS

On conserve un peu d'espace en haut du diagrame en fakant une plus grosse valeur max

File size: 24.1 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">[(#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">[(#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">[(#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>(#TITRE)</h3>]
71                                                [<div class="texte">
72                                                (#TEXTE)
73                                                </div>]
74                                                [<div class="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',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
95                                                var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
96                                                        centre_origine = 1962,translate_defaut = 0;
97                                                var margin = {top: 0, right: 5, bottom: 60, left: 5},
98                                                        width = $('#'+containerid).width() - margin.left - margin.right,
99                                                        step = parseInt(width/22),
100                                                        width = 22*step,
101                                                        height = 450 - margin.top - margin.bottom,
102                                                        moving = false;
103
104                                                $('#'+containerid).on('mousewheel', function(event) {
105                                                        if($('.infobox').is(':hidden') && moving == false){
106                                                                if(event.deltaX > 0)
107                                                                        var val = 1;
108                                                                else if(event.deltaX < 0)
109                                                                        var val = -1;
110                                                                else if(event.deltaY > 0)
111                                                                        var val = 1;
112                                                                else if(event.deltaY < 0)
113                                                                        var val = -1;
114                                                                graph_replace(val);
115                                                        }else if($('.infobox').is(':visible')){
116                                                               
117                                                        }
118                                                        return false;
119                                                });
120                                               
121                                                // Avance le graph de 1 ou le recule de -1
122                                                function graph_replace(valeur){
123                                                        if(((valeur == '+1') && date_origine == values[values.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
124                                                                return false;
125                                                       
126                                                        moving = true;
127                                                       
128                                                        date_origine = date_origine+valeur;
129
130                                                        /**
131                                                         * A essayer : values.filter
132                                                         * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
133                                                         */
134                                                        values.every(function(row, i){
135                                                                if(parseInt(row.axe_x) == date_origine){
136                                                                        d = row;
137                                                                        return false;
138                                                                }
139                                                                return true;
140                                                        });
141                                                       
142                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
143
144                                                        $('.tooltip').html(+d.axe_y+'#UNITE');
145                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()-14;
146                                                        var top = y(d.axe_y) - ($('.tooltip').outerHeight()/2);
147                                                        if($('.tooltip').is(':hidden'))
148                                                                $('.tooltip').css({'top':top,'left':left}).show();
149                                                        else
150                                                                $('.tooltip').animate({'top':top,'left':left},800);
151                                                       
152                                                        // Si on a un commentaire, on l'affiche
153                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
154                                                                var show_info = function(){
155                                                                        infobox
156                                                                                .html('<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>')
157                                                                                        .transition()
158                                                                                        .duration(800)
159                                                                                        .style("display", 'block').each("end", function(){
160                                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
161                                                                                                        infobox
162                                                                                                                .transition()
163                                                                                                                .duration(500)
164                                                                                                                        .style("display", 'none');
165                                                                                                });
166                                                                                        });
167                                                                        }
168                                                                setTimeout(show_info,400);
169                                                        }
170                                                       
171                                                        d3.select(".paths").transition()
172                                                                .duration(700)
173                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
174                                                                        moving = false;
175                                                                });
176
177                                                        // Afficher le message de fin de données actuelles
178                                                        if(date_origine == values[values.length-1].axe_x){
179                                                                var show_info = function(){
180                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
181                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
182                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la température à la surface du globe a augmenté de "+degres+" degrés.";
183                                                                        }
184                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
185                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
186                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
187                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la température à la surface du globe a augmenté de "+degres+" degrés.";
188                                                                        }
189                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
190                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
191                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
192                                                                        }
193                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
194                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
195                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
196                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
197                                                                        }
198
199                                                                        if(texte_fin){
200                                                                                infobox
201                                                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>')
202                                                                                                .transition()
203                                                                                                .duration(800)
204                                                                                                .style("display", 'block').each("end", function(){
205                                                                                                        d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
206                                                                                                                infobox
207                                                                                                                        .transition()
208                                                                                                                        .duration(500)
209                                                                                                                                .style("display", 'none');
210                                                                                                        });
211                                                                                                });
212                                                                                }
213                                                                        }
214                                                                setTimeout(show_info,400);
215                                                        }
216                                                }
217                                               
218                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
219                                                var x = d3.scale.linear(),
220                                                        y = d3.scale.linear().range([height, 0]),
221                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
222                                               
223                                                // A line generator, for the dark stroke.
224                                                var line = d3.svg.line()
225                                                        .x(function(d) { return x(d.axe_x); })
226                                                        .y(function(d) { return y(d.axe_y); });
227                                               
228                                                // Add an SVG element with the desired dimensions and margin.
229                                                var svg = d3.select("#"+containerid).append("svg")
230                                                        .attr("width", width + margin.left + margin.right)
231                                                        .attr("height", height + margin.top + margin.bottom)
232                                                        .append("g")
233                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
234
235                                                var paths = svg.append("g")
236                                                        .attr("class", "paths")
237                                                       
238                                                // Ajouter le tooltip que l'on cache automatiquement
239                                                tip = d3.select('#'+containerid).append("div")
240                                                        .attr("class", "tooltip")
241                                                        .style("display", 'none');
242                                               
243                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
244                                                infobox = d3.select('#'+containerid).append("div")
245                                                        .attr("class", "infobox")
246                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>');
247                                               
248                                                // Au click sur le graph, on cache l'infobox si visible
249                                                $('#'+containerid).on('click',function(){
250                                                        if($('.infobox').is(':visible'))
251                                                                $('.infobox').fadeOut();
252                                                });
253                                               
254                                                // Ajouter les flÚches pour avancer et reculer
255                                                arrow_nav = d3.select('#'+containerid).append("div")
256                                                        .attr("class", "arrows_nav")
257                                                        .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>');
258                                               
259                                                // Au click sur les fleches on avance d'un cran ou on recule
260                                                $('.arrows_nav > div').on('click',function(){
261                                                        if($('.infobox').is(':hidden') && moving == false){
262                                                                if($(this).is('.left'))
263                                                                        graph_replace(-1);
264                                                                else
265                                                                        graph_replace(1);
266                                                        }
267                                                });
268
269                                                /**
270                                                 * Récupération des données et on fabrique nos groupes de valeurs
271                                                 */
272                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
273                                                       
274                                                        values = data;
275                                                        var origine = 0;
276       
277                                                        values.forEach(function(row, i){
278                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
279                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
280                                                                if(row.axe_x <= naissance)
281                                                                        values1.push(row);
282                                                                if(row.axe_x >= naissance)
283                                                                        values2.push(row);
284                                                                if(row.axe_x == naissance)
285                                                                        value_naissance = value_origine = row;
286                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1)
287                                                                        values_commentaire.push(row);
288                                                        });
289
290                                                        xmin = values[0].axe_x;
291                                                        xmax = values[values.length-1].axe_x;
292                                                        if(#ENV{donnees} == 1)
293                                                                ymax = parseFloat('4.89');
294                                                        else
295                                                                ymax = 936;
296                                                               
297                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
298                                                        ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
299                                                       
300                                                        ymax = ymax + ((ymax-ymin)/3);
301                                                        /**
302                                                         * Si naissance - 7 ans est dans la visu, on part de là
303                                                         */
304                                                        if((naissance - 7) > xmin){
305                                                                origine = naissance -7;
306                                                                centre_origine = naissance + 4;
307                                                        }
308                                                        /**
309                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
310                                                         * et le point d'origine la valeur min
311                                                         */
312                                                        else{
313                                                                origine = xmin;
314                                                                centre_origine = parseInt(xmin)+11;
315                                                        }
316
317                                                        // Utilisation de every pour couper lorsque l'on a trouvé
318                                                        values.every(function(row,i){
319                                                                if(parseInt(row.axe_x) == origine){
320                                                                        d = row;
321                                                                        return false;
322                                                                }
323                                                                return true;
324                                                        });
325
326                                                        real_width = (width/22)*(xmax-xmin);
327                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
328                                                        y.domain([ymin, ymax]).nice();
329                                                        translate_defaut = x(d.axe_x);
330                                                       
331                                                        draw(translate_defaut);
332                                                        drawlines_interaction(translate_defaut);
333                                                });
334                                               
335                                                /**
336                                                 * Fonction de création des objets du diagramme
337                                                 */
338                                                function draw(translatex){
339                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots").remove();
340                                                        d3.select(".paths")
341                                                                .attr("transform", "translate(-"+translatex+", 0)")
342                                                       
343                                                        // On ajoute la ligne de données pour la période aprÚs naissance
344                                                        svg.selectAll('.paths').append("path")
345                                                                .attr("class", "line apresnaissance")
346                                                                .attr("d", line(values2));
347       
348                                                        // Ajout la ligne de données avant la naissance
349                                                        svg.selectAll('.paths').append("path")
350                                                                .attr("class", "line avtnaissance")
351                                                                .attr("d", line(values1));
352       
353                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
354                                                        svg.selectAll('.paths').append("g")
355                                                                .attr("class", "x axis")
356                                                                .attr("transform", "translate(0," + height + ")")
357                                                                .call(xAxis)
358                                                                .selectAll("text")
359                                                                        .style("text-anchor", "start")
360                                                                        .attr("dy", "-0.6em")
361                                                                        .attr("dx", "1em")
362                                                                        .attr("transform", function(d) {
363                                                                                return "rotate(-270)" 
364                                                                        });
365                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
366                                                        $('.x .tick text').each(function(){
367                                                                if(parseInt($(this).text()) < value_naissance.axe_x){
368                                                                        $(this).parent('.tick').attr('class','tick tickold');
369                                                                }
370                                                        });
371                                                       
372                                                        // Ajout de la légende des axes
373                                                        svg.append("text") 
374                                                                .attr("x",-5)
375                                                                .attr("y",445)
376                                                                .attr("class", "legende")
377                                                                .style("text-anchor", "start")
378                                                                .text("#AXE_Y");
379
380                                                        // Ajout des points d'Anecdotes cliquables
381                                                        // sera certainement à supprimer aprÚs debug
382                                                        d3.select("#"+containerid).select('.paths')
383                                                                .selectAll(".dot")
384                                                                .data(values_commentaire)
385                                                                .enter()
386                                                                        .append('circle')
387                                                                        .attr("class","infos_dots")
388                                                                        .attr("cx", function(d) { return x(d.axe_x); })
389                                                                        .attr("cy",function(d) { return y(d.axe_y); })
390                                                                        .attr('r',6)
391                                                                        .on('click',function(d){
392                                                                                d3.select('.infos_dots .active')
393                                                                                        .transition().duration(300).attr('stroke-width','3');
394                                                                                d3.select(this)
395                                                                                        .transition().duration(400).attr('stroke-width','5');
396                                                                                infobox
397                                                                                        .html('<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>')
398                                                                                                .transition()
399                                                                                                .duration(1000)
400                                                                                                .style("display", 'block');
401                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
402                                                                                        d3.select('.infos_dots .active').classed("active", false)
403                                                                                                .transition().duration(300).attr('stroke-width','3');
404                                                                                        infobox
405                                                                                                .transition()
406                                                                                                .duration(500)
407                                                                                                        .style("display", 'none');
408                                                                                });
409                                                                        });
410
411                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
412                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
413                                                                .attr("class", "birth-line");
414       
415                                                        // Ajout de la ligne de naissance
416                                                        ligne_naissance = ligne_naissance_groupe
417                                                                .datum( value_naissance )
418                                                                .append("line")
419                                                                        .attr( 'class', 'ligne_naissance' )
420                                                                        .attr("x1", function( d ) {
421                                                                                return x( d.axe_x );
422                                                                        }).attr("x2",function( d ) {
423                                                                                return x( d.axe_x );
424                                                                        }) // vertical line so same value on each
425                                                                        .attr("y1",80).attr("y2", height);
426       
427                                                        // Ajout du cercle en haut de la ligne de naissance
428                                                        ligne_naissance_groupe
429                                                                .datum(value_naissance)
430                                                                .append("circle")
431                                                                        .attr('class','circle_naissance')
432                                                                        .attr( 'r', 20 )
433                                                                        .attr("cx", function( d ) {
434                                                                                return x( d.axe_x );
435                                                                        })
436                                                                        .attr("cy",20);
437
438                                                        // Ajout du texte "Votre naissance"
439                                                        ligne_naissance_groupe
440                                                                .datum(value_naissance)
441                                                                .append("text")
442                                                                        .attr('class','texte_naissance')
443                                                                        .text('VOTRE NAISSANCE')
444                                                                        .attr("x", function(d){
445                                                                                return x(d.axe_x);
446                                                                        })
447                                                                        .attr("y",60);
448                                                       
449                                                        // Ajout de l'image de la bougie
450                                                        ligne_naissance_groupe
451                                                                .datum(value_naissance)
452                                                                .append("svg:image")
453                                                                        .attr("xlink:href", "[(#CHEMIN{images/bougie.png}|timestamp)]")
454                                                                        .attr("x", function(d){
455                                                                                return x(value_naissance.axe_x)-17;
456                                                                        })
457                                                                        .attr("y", "2")
458                                                                        .attr("width", "35")
459                                                                        .attr("height", "35");
460                                                                       
461                                                       
462                                                        // Ajout du groupe pour Aujourd'hui
463                                                        ligne_aujd_groupe = svg.select('.paths').append("g")
464                                                                .attr("class", "today-line");
465       
466                                                        // Ajout de la ligne d'aujourd'hui
467                                                        ligne_aujd = ligne_aujd_groupe
468                                                                .datum(values[values.length-1])
469                                                                .append("line")
470                                                                        .attr( 'class', 'ligne_aujd' )
471                                                                        .attr("x1", function( d ) {
472                                                                                return x( d.axe_x );
473                                                                        }).attr("x2",function( d ) {
474                                                                                return x( d.axe_x );
475                                                                        }) // vertical line so same value on each
476                                                                        .attr("y1",80).attr("y2", height);
477       
478                                                        // Ajout du cercle en haut de la ligne de naissance
479                                                        ligne_aujd_groupe
480                                                                .datum(values[values.length-1])
481                                                                .append("circle")
482                                                                        .attr('class','circle_aujd_main')
483                                                                        .attr( 'r', 15 )
484                                                                        .attr("cx", function( d ) {
485                                                                                return x( d.axe_x );
486                                                                        })
487                                                                        .attr("cy",20);
488                                                       
489                                                        // Ajout du cercle en haut de la ligne de naissance
490                                                        ligne_aujd_groupe
491                                                                .datum(values[values.length-1])
492                                                                .append("circle")
493                                                                        .attr('class','circle_aujd_small')
494                                                                        .attr( 'r', 6 )
495                                                                        .attr("cx", function( d ) {
496                                                                                return x( d.axe_x );
497                                                                        })
498                                                                        .attr("cy",20);
499                                                        // Ajout du texte "Aujourd'hui"
500                                                        ligne_aujd_groupe
501                                                                .datum(values[values.length-1])
502                                                                .append("text")
503                                                                        .attr('class','texte_aujd')
504                                                                        .text("AUJOURD'HUI")
505                                                                        .attr("x", function(d){
506                                                                                return x(d.axe_x);
507                                                                        })
508                                                                        .attr("y",60);
509                                                       
510                                                }
511
512                                                /**
513                                                 * Afficher le bloc d'interaction
514                                                 */
515                                                function drawlines_interaction(translatex){
516                                                        ligne_interactive_groupe = svg.append("g")
517                                                                .attr("class", "interaction");
518                                                               
519                                                        /**
520                                                         * Ajouter la ligne d'interaction
521                                                         */
522                                                        ligne_interactive =  ligne_interactive_groupe
523                                                                .datum(value_origine)
524                                                                        .append("line")
525                                                                                .attr('class', 'ligne_interactive')
526                                                                                .attr("x1", function(d) {
527                                                                                        return x( d.axe_x )-translatex;
528                                                                                }).attr("x2",function(d) {
529                                                                                        return x(d.axe_x)-translatex;
530                                                                                })
531                                                                .attr("y1",100).attr("y2", height);
532                                                        /**
533                                                         * Ajouter le triangle
534                                                         */
535                                                        ligne_interactive_groupe.append('path')
536                                                                .attr('class','triangle')
537                                                                .attr('d', function(d) { 
538                                                                        var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
539                                                                        var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
540                                                                        return x4;
541                                                                });
542                                                }
543                                                </script>
544                                </div>
545                                [<div class="logo_terraeco">
546                                        <a href="http://www.terraeco.net">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
547                                </div>]
548                                </BOUCLE_jeu_selectionne>
549                                </B_jeu_selectionne>
550                                <B_jeux>
551                                <div class="texte">#TEXTE</div>
552                                <div class="liste_infographies">
553                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
554                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{300,300})]</a>
555                                </BOUCLE_jeux>
556                                </div>
557                                </B_jeux>
558                                <//B_jeu_selectionne>
559                                <//B_si_naissance_1951>
560                        <//B_si_pas_naissance>
561                </div>
562                </div>
563        </div>
564        [(#ENV{donnees}|non)[<footer class="footer clearfix">
565                (#CREDITS|image_reduire{100,100})
566        </footer>]]
567</div>
568</body>
569</html>
570</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.