Context Navigation

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

Last change on this file since 8006 was 8006, checked in by kent1, 8 years ago

Pas de logs

Inverser haut bas

File size: 47.0 KB

Line
1	<BOUCLE_principale(INFOGRAPHIES) {id_infographie}>
2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3	[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
4	]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
5	<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
6	<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
7	<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
8	<!--[if (gt IE 9)\|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
9	<head>
10	<script type='text/javascript'>/<![CDATA[/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/]]>/</script>
11	<title>[(#TITRE\|couper{80}\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]</title>
12	[<meta name="description" content="(#INTRODUCTION{150}\|attribut_html)" />]
13	[<link rel="canonical" href="(#URL_INFOGRAPHIE\|url_absolue)" />]
14	[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}\|direction_css)" type="text/css" />]
15	[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}\|direction_css)" type="text/css" />]
16	#INSERT_HEAD
17	[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
18	[<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
19	<script type="text/javascript">
20	jQuery(document).ready(function(){
21	jQuery('a.spip_out').click(function(){
22	jQuery(this).attr('target','_blank');
23	});
24	});
25	</script>
26	</head>
27
28	<body class="pas_surlignable page_infographie">
29	<div class="page">
30
31	<div class="main infographie[ (#INFO_CSS_CLASS{infographies_data,#ENV{donnees}})]">
32	<div class="wrapper hfeed">
33	<div class="content hentry" id="content">
34	<div class="cartouche">
35	<h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE\|image_reduire{40,*}) ]#TITRE</h1>
36	</div>
37	<div class="menu_top">
38	<a href="[(#SELF\|parametre_url{naissance,''}\|parametre_url{donnees,''})]" title="<:terraeco:title_lien_home\|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_home.png}\|balise_img{home}\|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_home_hover.png})"]}\|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_home.png})"]})]</a>
39	<a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco\|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_terraeco.png}\|balise_img{terraeco}\|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_terraeco_hover.png})"]}\|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_terraeco.png})"]})]</a>
40	<a href="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>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: