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

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

On a modifié pas mal de choses suite aux premiers retours

File size: 25.7 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',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                                                        }
116                                                        return false;
117                                                });
118                                               
119                                                // Avance le graph de 1 ou le recule de -1 (en année)
120                                                function graph_replace(valeur){
121                                                        if(((valeur == '+1') && date_origine == values[values.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
122                                                                return false;
123                                                       
124                                                        moving = true;
125                                                       
126                                                        date_origine = date_origine+valeur;
127
128                                                        /**
129                                                         * A essayer : values.filter
130                                                         * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
131                                                         */
132                                                        values.every(function(row, i){
133                                                                if(parseInt(row.axe_x) == date_origine){
134                                                                        d = row;
135                                                                        return false;
136                                                                }
137                                                                return true;
138                                                        });
139                                                       
140                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
141
142                                                        $('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
143                                                        console.log(parseFloat(d.axe_y).toFixed(2)+'#UNITE');
144                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()+5;
145                                                        var top = y(d.axe_y) - ($('.tooltip').outerHeight()/2);
146                                                        if($('.tooltip').is(':hidden'))
147                                                                $('.tooltip').css({'top':top,'left':left}).show();
148                                                        else
149                                                                $('.tooltip').animate({'top':top,'left':left},400);
150                                                       
151                                                        // Si on a un commentaire, on l'affiche
152                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
153                                                                var show_info = function(){
154                                                                        infobox
155                                                                                .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>');
156                                                                        jQuery('.contenu a').click(function(){
157                                                                                jQuery(this).attr('target','_blank');
158                                                                        });
159                                                                        jQuery('iframe').each(function(){
160                                                                                var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
161                                                                                jQuery(this).width('100%').height(jQuery(this).height()*ratio);
162                                                                        });
163                                                                        margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
164                                                                        jQuery('.infobox').css({'margin-top':margin_top});
165                                                                        infobox
166                                                                                .transition()
167                                                                                .duration(800)
168                                                                                .style("display", 'block').each("end", function(){
169                                                                                        d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
170                                                                                                infobox
171                                                                                                        .transition()
172                                                                                                        .duration(500)
173                                                                                                                .style("display", 'none');
174                                                                                        });
175                                                                                });
176                                                                        }
177                                                                setTimeout(show_info,400);
178                                                        }
179                                                       
180                                                        d3.select(".paths").transition()
181                                                                .duration(400)
182                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
183                                                                        moving = false;
184                                                                });
185
186                                                        // Afficher le message de fin de données actuelles
187                                                        if(date_origine == values[values.length-1].axe_x){
188                                                                var show_info = function(){
189                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
190                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
191                                                                                if(degres.charAt(0) == '-'){
192                                                                                        degres = degres.replace('-','');
193                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
194                                                                                }else
195                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
196                                                                        }
197                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
198                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
199                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
200                                                                                if(degres.charAt(0) == '-'){
201                                                                                        degres = degres.replace('-','');
202                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
203                                                                                }else
204                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
205                                                                        }
206                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
207                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
208                                                                                var texte_fin = "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.";
209                                                                        }
210                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
211                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
212                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
213                                                                                var texte_fin = "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.";
214                                                                        }
215
216                                                                        if(texte_fin){
217                                                                                infobox
218                                                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>');
219                                                                                jQuery('.contenu a').click(function(){
220                                                                                        jQuery(this).attr('target','_blank');
221                                                                                });
222                                                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
223                                                                                jQuery('.infobox').css({'margin-top':margin_top});
224                                                                                infobox
225                                                                                        .transition()
226                                                                                                .duration(800)
227                                                                                                .style("display", 'block').each("end", function(){
228                                                                                                        d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
229                                                                                                                infobox
230                                                                                                                        .transition()
231                                                                                                                        .duration(500)
232                                                                                                                                .style("display", 'none');
233                                                                                                        });
234                                                                                                });
235                                                                        }
236                                                                }
237                                                                setTimeout(show_info,400);
238                                                        }
239                                                }
240                                               
241                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
242                                                var x = d3.scale.linear(),
243                                                        y = d3.scale.linear().range([height, 0]),
244                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
245                                               
246                                                // A line generator, for the dark stroke.
247                                                var line = d3.svg.line()
248                                                        .x(function(d) { return x(d.axe_x); })
249                                                        .y(function(d) { return y(d.axe_y); });
250                                               
251                                                // Add an SVG element with the desired dimensions and margin.
252                                                var svg = d3.select("#"+containerid).append("svg")
253                                                        .attr("width", width + margin.left + margin.right)
254                                                        .attr("height", height + margin.top + margin.bottom)
255                                                        .append("g")
256                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
257
258                                                var paths = svg.append("g")
259                                                        .attr("class", "paths")
260                                                       
261                                                // Ajouter le tooltip que l'on cache automatiquement
262                                                tip = d3.select('#'+containerid).append("div")
263                                                        .attr("class", "tooltip")
264                                                        .style("display", 'none');
265                                               
266                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
267                                                infobox = d3.select('#'+containerid).append("div")
268                                                        .attr("class", "infobox")
269                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>');
270                                                jQuery('.contenu a').click(function(){
271                                                        jQuery(this).attr('target','_blank');
272                                                });
273                                               
274                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
275                                                jQuery('.infobox').css({'margin-top':margin_top});
276
277                                                // Au click sur le graph, on cache l'infobox si visible
278                                                jQuery('#'+containerid).on('click',function(){
279                                                        if(jQuery('.infobox').is(':visible'))
280                                                                jQuery('.infobox').fadeOut();
281                                                });
282                                               
283                                                // Ajouter les flÚches pour avancer et reculer
284                                                arrow_nav = d3.select('#'+containerid).append("div")
285                                                        .attr("class", "arrows_nav")
286                                                        .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>');
287                                               
288                                                // Au click sur les fleches on avance d'un cran ou on recule
289                                                $('.arrows_nav > div').on('click',function(){
290                                                        if($('.infobox').is(':hidden') && moving == false){
291                                                                if($(this).is('.left'))
292                                                                        graph_replace(-1);
293                                                                else
294                                                                        graph_replace(1);
295                                                        }
296                                                });
297
298                                                /**
299                                                 * Récupération des données et on fabrique nos groupes de valeurs
300                                                 */
301                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
302                                                       
303                                                        values = data;
304                                                        var origine = 0;
305       
306                                                        values.forEach(function(row, i){
307                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
308                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
309                                                                if(row.axe_x <= naissance)
310                                                                        values1.push(row);
311                                                                if(row.axe_x >= naissance)
312                                                                        values2.push(row);
313                                                                if(row.axe_x == naissance)
314                                                                        value_naissance = value_origine = row;
315                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1)
316                                                                        values_commentaire.push(row);
317                                                        });
318
319                                                        xmin = values[0].axe_x;
320                                                        xmax = values[values.length-1].axe_x;
321                                                        if(#ENV{donnees} == 1)
322                                                                ymax = parseFloat('4.89');
323                                                        else
324                                                                ymax = 936;
325                                                               
326                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
327                                                        ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
328                                                       
329                                                        ymax = ymax + ((ymax-ymin)/3);
330                                                        /**
331                                                         * Si naissance - 7 ans est dans la visu, on part de là
332                                                         */
333                                                        if((naissance - 7) > xmin){
334                                                                origine = naissance -7;
335                                                                centre_origine = naissance + 4;
336                                                        }
337                                                        /**
338                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
339                                                         * et le point d'origine la valeur min
340                                                         */
341                                                        else{
342                                                                origine = xmin;
343                                                                centre_origine = parseInt(xmin)+11;
344                                                        }
345
346                                                        // Utilisation de every pour couper lorsque l'on a trouvé
347                                                        values.every(function(row,i){
348                                                                if(parseInt(row.axe_x) == origine){
349                                                                        d = row;
350                                                                        return false;
351                                                                }
352                                                                return true;
353                                                        });
354
355                                                        real_width = (width/22)*(xmax-xmin);
356                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
357                                                        y.domain([ymin, ymax]).nice();
358
359                                                        translate_defaut = x(d.axe_x);
360
361                                                        draw(translate_defaut);
362                                                        drawlines_interaction(translate_defaut);
363                                                });
364                                               
365                                                /**
366                                                 * Fonction de création des objets du diagramme
367                                                 */
368                                                function draw(translatex){
369                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots").remove();
370                                                        d3.select(".paths")
371                                                                .attr("transform", "translate(-"+translatex+", 0)")
372                                                       
373                                                        // On ajoute la ligne de données pour la période aprÚs naissance
374                                                        svg.selectAll('.paths').append("path")
375                                                                .attr("class", "line apresnaissance")
376                                                                .attr("d", line(values2));
377       
378                                                        // Ajout la ligne de données avant la naissance
379                                                        svg.selectAll('.paths').append("path")
380                                                                .attr("class", "line avtnaissance")
381                                                                .attr("d", line(values1));
382       
383                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
384                                                        svg.selectAll('.paths').append("g")
385                                                                .attr("class", "x axis")
386                                                                .attr("transform", "translate(0," + height + ")")
387                                                                .call(xAxis)
388                                                                .selectAll("text")
389                                                                        .style("text-anchor", "start")
390                                                                        .attr("dy", "-0.6em")
391                                                                        .attr("dx", "1em")
392                                                                        .attr("transform", function(d) {
393                                                                                return "rotate(-270)" 
394                                                                        });
395                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
396                                                        $('.x .tick text').each(function(){
397                                                                if(parseInt($(this).text()) < value_naissance.axe_x){
398                                                                        $(this).parent('.tick').attr('class','tick tickold');
399                                                                }
400                                                        });
401                                                       
402                                                        // Ajout de la légende des axes
403                                                        svg.append("text") 
404                                                                .attr("x",-5)
405                                                                .attr("y",445)
406                                                                .attr("class", "legende")
407                                                                .style("text-anchor", "start")
408                                                                .text("#AXE_Y");
409
410                                                        // Ajout des points d'Anecdotes cliquables
411                                                        // sera certainement à supprimer aprÚs debug
412                                                        d3.select("#"+containerid).select('.paths')
413                                                                .selectAll(".dot")
414                                                                .data(values_commentaire)
415                                                                .enter()
416                                                                        .append('circle')
417                                                                        .attr("class","infos_dots")
418                                                                        .attr("cx", function(d) { return x(d.axe_x); })
419                                                                        .attr("cy",function(d) { return y(d.axe_y); })
420                                                                        .attr('r',6)
421                                                                        .on('click',function(d){
422                                                                                d3.select('.infos_dots .active')
423                                                                                        .transition().duration(300).attr('stroke-width','3');
424                                                                                d3.select(this)
425                                                                                        .transition().duration(400).attr('stroke-width','5');
426                                                                                infobox
427                                                                                        .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>');
428                                                                                jQuery('.contenu a').click(function(){
429                                                                                        jQuery(this).attr('target','_blank');
430                                                                                });
431                                                                                jQuery('iframe').each(function(){
432                                                                                        var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
433                                                                                        jQuery(this).width('100%').height(jQuery(this).height()*ratio);
434                                                                                });
435                                                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
436                                                                                jQuery('.infobox').css({'margin-top':margin_top});
437                                                                                infobox
438                                                                                        .transition()
439                                                                                        .duration(1000)
440                                                                                        .style("display", 'block');
441                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
442                                                                                        d3.select('.infos_dots .active').classed("active", false)
443                                                                                                .transition().duration(300).attr('stroke-width','3');
444                                                                                        infobox
445                                                                                                .transition()
446                                                                                                .duration(500)
447                                                                                                        .style("display", 'none');
448                                                                                });
449                                                                        });
450
451                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
452                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
453                                                                .attr("class", "birth-line");
454       
455                                                        // Ajout de la ligne de naissance
456                                                        ligne_naissance = ligne_naissance_groupe
457                                                                .datum( value_naissance )
458                                                                .append("line")
459                                                                        .attr( 'class', 'ligne_naissance' )
460                                                                        .attr("x1", function( d ) {
461                                                                                return x( d.axe_x );
462                                                                        }).attr("x2",function( d ) {
463                                                                                return x( d.axe_x );
464                                                                        }) // vertical line so same value on each
465                                                                        .attr("y1",80).attr("y2", height);
466
467                                                        [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
468                                                        // Ajout de l'image de la bougie
469                                                        ligne_naissance_groupe
470                                                                .datum(value_naissance)
471                                                                .append("svg:image")
472                                                                        .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
473                                                                        .attr("x", function(d){
474                                                                                return x(value_naissance.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
475                                                                        })
476                                                                        .attr("y", "2")
477                                                                        .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
478                                                                        .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
479                                                                       
480                                                       
481                                                        // Ajout du groupe pour Aujourd'hui
482                                                        ligne_aujd_groupe = svg.select('.paths').append("g")
483                                                                .attr("class", "today-line");
484       
485                                                        // Ajout de la ligne d'aujourd'hui
486                                                        ligne_aujd = ligne_aujd_groupe
487                                                                .datum(values[values.length-1])
488                                                                .append("line")
489                                                                        .attr( 'class', 'ligne_aujd' )
490                                                                        .attr("x1", function( d ) {
491                                                                                return x( d.axe_x );
492                                                                        }).attr("x2",function( d ) {
493                                                                                return x( d.axe_x );
494                                                                        }) // vertical line so same value on each
495                                                                        .attr("y1",80).attr("y2", height);
496
497                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
498                                                        // Ajout de l'image de la bougie
499                                                        ligne_aujd_groupe
500                                                                .datum(values[values.length-1])
501                                                                .append("svg:image")
502                                                                        .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
503                                                                        .attr("x", function(d){
504                                                                                return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
505                                                                        })
506                                                                        .attr("y", "2")
507                                                                        .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
508                                                                        .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
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" class="spip_out" target="_blank">(#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{250,250})]</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 #EDIT{credits}">
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.