Animation

Rapetigrandir

Reproduire la figure ci-dessous à l'aide de D3.

Un code possible (appuyez sur espace dans la partie code pour exécuter)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Cercle qui rapetigrandit </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	   

       <svg width="1000px" height="200px"  id="lafigure">
	   </svg>	

		<script>
		var fig = d3.select("#lafigure");
		
		var cercle  = fig.append("circle")
		.attr("cx", 50)
		.attr("cy",100)
		.attr("r",10)
		.style("fill", "pink");
		
		cercle.transition()
		.duration(3000)
		.attr("r", 90)
		.attr("cx",500)
		.style("fill", "green")
		.transition()
		.duration(3000)
		.attr("cx",990)
		.attr("r",10)
		.style("fill","orange");
		</script>

		 


    </body>
</html>

Va et vient

Reproduire la figure ci-dessous à l'aide de D3.

Un premier code possible

La fonction alleretour utilisée est récursive : elle s'appelle elle-même. Cela permet d'enchaîner les transitions avec les valeurs successives du tableau positions.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  va et vient </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	 
        <svg width="1000px" height="100px"  id="unefigurevaetvient">
		</svg>	

		<script>
		 
			var fig = d3.select("#unefigurevaetvient");
		
			var cercle = fig.append("circle")
				.attr("cx",0)
				.attr("cy",50)
				.attr("r",30)
				.attr("fill", "red");
				
				
				
			// construction du tableau des abscisses successives du centre du disque :
			var dx = 50; // les abscisses évoluent de dx en dx à gauche et à droite
			var positions = []; // tableau vide 
			
			for(var i = 1; i <= 10; i += 1) //boucle de remplissage du tableau : 950, 50, 800, 100...
			{				 
					positions.push(1000 - 50*i);
					positions.push(50*i);				 
			}
		
			 
			function alleretour(i) // fonction qui sera appelée avec i=0
			{
				// transition à partir de l'état actuel du disque
				// puis à la fin (end), on appelle la fonction elle-même pour enchaîner 
				// sur la transition suivante
				cercle.transition()
				.duration(3000)
				.attr("cx", positions[i])
				.on(	'end',  
						function() 
						{
							if (i < (positions.length - 1)) // le dernier appel sur le dernier élément du tableau positions
							{
								i += 1; // on incrémente i pour passer à la position suivante au prochain appel
								alleretour(i);//appel de la fonction pour transition suivante
							}
        				}
        		   );
				
			}
		
			alleretour(0);//on lance la première transition
		 
		</script>   
   
 

		 


    </body>
</html>

Autre code

On utilise ici une boucle plutôt qu'un appel récursif.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  va et vient </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	
        <svg width="1000px" height="100px"  id="lafigurevaetvient">
		</svg>	

		<script>
		 
			var fig = d3.select("#lafigurevaetvient");
		
			var cercle = fig.append("circle")
				.attr("cx",0)
				.attr("cy",50)
				.attr("r",30)
				.attr("fill", "red");
				
			var dx = 50;
			var positions = [];
			
			for(var i = 1; i <= 10; i += 1)
			{				 
					positions.push(1000 - 50*i);
					positions.push(50*i);				 
			}
		
			 
		
		
			for(var i = 0; i < positions.length; i += 1)
			{
				cercle =  	cercle.transition()
						  	.duration(3000)
							.attr("cx", positions[i]);  
			}
		 
		</script>   
 

		 


    </body>
</html>

Abonnement ADSL

Le taux de personnes possèdant un abonnement ADSL en France (source) :

Année	2000	2004	2008	2015
Taux	14%	41%	58%	84%

Reproduire la figure ci-dessous à l'aide de D3. Dans cette figure, la hauteur d'une barre en face d'une année est bien sûre proportionnelle au taux donné dans le tableau.

Une première version

(Entrez une espace dans la partie code pour relancer)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  ADSL </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	   
		<svg width="1000px" height="200px"  id="lafigure2">
		</svg>	

		<script>
		 
			var fig = d3.select("#lafigure2");
			
			var annees = [2000, 2004, 2008, 2015];
			var taux = [14, 41, 58, 84];
			
			var maxi = d3.max(taux); // valeur maximale dans le tableau, soit ici 84
			
			var largeur = 100; // largeur d'une barre 
			
			
			// on écrit les années : 
			fig.append('text')
			.text(annees[0])
			.attr('x', 10 + largeur/3 )
			.attr('y', maxi + 20);
			
			fig.append('text')
			.text(annees[1])
			.attr('x', 10 + largeur/3 + largeur )
			.attr('y', maxi + 20);
			
			fig.append('text')
			.text(annees[2])
			.attr('x', 10 + largeur/3 + 2*largeur )
			.attr('y', maxi + 20);
			
			fig.append('text')
			.text(annees[3])
			.attr('x', 10 + largeur/3 + 3*largeur )
			.attr('y', maxi + 20);
			
			
			
		   // définition de la barre et de son évolution : 
			var barre  = fig.append("rect")
			.attr("x", 10)
			.attr("y", maxi-14 )
			.attr("width",largeur)
			.attr("height", 14)
			.style("fill", "blue");
			
			barre.transition()
			.duration(3000)
			.delay(1000)
			.attr("x", 10+largeur)
			.attr("y", maxi-41)
			.attr("height", 41)
			.transition()
			.duration(3000)
			.attr("x", 10+2*largeur)
			.attr("y", maxi-58)
			.attr("height", 58)
			.transition()
			.duration(3000)
			.attr("x", 10+3*largeur)
			.attr("y", maxi-84)
			.attr("height", 84);
		
			 
		 
		</script>


    </body>
</html>

Seconde version

Il est clair dans la version précédente que l'usage d'une boucle devrait abréger le code.

On en profite pour ajouter l'inscription des taux.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  ADSL </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	   
		<svg width="1000px" height="300px"  id="lafigure2b">
		</svg>	

		<script>
		 
			var fig = d3.select("#lafigure2b");
			
			var annees = [2000, 2004, 2008, 2015];
			var taux = [14, 41, 58, 84];
			
			var maxi = d3.max(taux); // valeur maximale dans le tableau, soit ici 84
			
			var largeur = 100; // largeur d'une barre 
			
			
			// on écrit les années : 
			
			for(var i = 0; i < annees.length; i += 1)
			{
			
				fig.append('text')
				.text(annees[i])
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi + 20);
			 
			}
			
			// on écrit les taux : 
			for(var i = 0; i < taux.length; i += 1)
			{
			
				fig.append('text')
				.text(taux[i] + "%")
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi - taux[i]/2)
				.style("stroke", "red");
			 
			}
			
		    // définition de la barre et de son évolution : 
			var barre  = fig.append("rect")
			.attr("x", 10)
			.attr("y", maxi-14 )
			.attr("width",largeur)
			.attr("height", 14)
			.style("fill", "blue")
			.style("opacity","0.2");
			
			
			barre.transition()
			.duration(3000)
			.delay(1000)
			.attr("x", 10+largeur)
			.attr("y", maxi-41)
			.attr("height", 41)
			.transition()
			.duration(3000)
			.attr("x", 10+2*largeur)
			.attr("y", maxi-58)
			.attr("height", 58)
			.transition()
			.duration(3000)
			.attr("x", 10+3*largeur)
			.attr("y", maxi-84)
			.attr("height", 84);
		
			
		 
		</script>


    </body>
</html>

Troisième solution

On aimerait également "factoriser" le code dans la définition de l'évolution des rectangles (il serait par exemple intéressant que l'ajout d'une année ne nous oblige pas à modifier notre code).

Pour cette dernière factorisation, nous utilisons le principe de fonction récursive : la fonction que l'on a nommée ici transitons est appelée avec la valeur 0 pour le paramètre i, puis appelée (depuis l'intérieur de la fonction elle-même) avec la valeur 1 pour le paramètre i, puis 2, puis 3.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  ADSL </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	   
		<svg width="1000px" height="300px"  id="lafigure2t">
		</svg>	

		<script>
		 
			var fig = d3.select("#lafigure2t");
			
			var annees = [2000, 2004, 2008, 2015];
			var taux = [14, 41, 58, 84];
			
			var maxi = d3.max(taux); // valeur maximale dans le tableau, soit ici 84
			
			var largeur = 100; // largeur d'une barre 
			
			
			// on écrit les années : 
			
			for(var i = 0; i < annees.length; i += 1)
			{
			
				fig.append('text')
				.text(annees[i])
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi + 20);
			 
			}
			
			// on écrit les taux :
			for(var i = 0; i < taux.length; i += 1)
			{
			
				fig.append('text')
				.text(taux[i] + "%")
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi - taux[i]/2)
				.style("stroke", "red");
			 
			}
			
			
			// définition de la barre   : 
			var barre  = fig.append("rect")
			.attr("x", 0)
			.attr("y", maxi )
			.attr("width",largeur)
			.attr("height", 0)
			.style("fill", "blue")
			.style("opacity","0.2");
			
			
			// transitions de la barre : 
			function transitons(i) 
			{
				barre.transition()
					.duration(3000)
					.attr("x", 10 + i*largeur)
					.attr("y", maxi - taux[i])
					.attr("height", taux[i])
					.on('end',  
							function() 
							{
								if ( i < (annees.length - 1) ) 
								{	
									i += 1;
									transitons(i);
								}
							}
						);
			}
			
		 
			transitons(0); 
			
			 
		
			
		 
		</script>


    </body>
</html>

Autre solution

On évite ici les appels récursifs en utilisant une boucle.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  ADSL </title>
		 
		<script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

	   
		<svg width="1000px" height="300px"  id="lafigure2q">
		</svg>	

		<script>
		 
			var fig = d3.select("#lafigure2q");
			
			var annees = [2000, 2004, 2008, 2015];
			var taux = [14, 41, 58, 84];
			
			var maxi = d3.max(taux); // valeur maximale dans le tableau, soit ici 84
			
			var largeur = 100; // largeur d'une barre 
			
			
			// on écrit les années : 
			
			for(var i = 0; i < annees.length; i += 1)
			{
			
				fig.append('text')
				.text(annees[i])
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi + 20);
			 
			}
			
			// on écrit les taux :
			for(var i = 0; i < taux.length; i += 1)
			{
			
				fig.append('text')
				.text(taux[i] + "%")
				.attr('x', 10 + largeur/3 + i*largeur)
				.attr('y', maxi - taux[i]/2)
				.style("stroke", "red");
			 
			}
			
			
			// définition de la barre   : 
			var barre  = fig.append("rect")
			.attr("x", 0)
			.attr("y", maxi )
			.attr("width",largeur)
			.attr("height", 0)
			.style("fill", "blue")
			.style("opacity","0.2");
			
			 
			
			// les transitions avec une boucle :
			for(var k = 0; k < annees.length; k += 1)
			{
				barre = barre.transition()
					.duration(3000)
					.attr("x", 10 + k*largeur)
					.attr("y", maxi - taux[k])
					.attr("height", taux[k]);
			}
			
			 
			
			
			 
		
			
		 
		</script>


    </body>
</html>