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