ljegou/.block

## .block
license: cc-by-4.0

## README.md

      
    Raw
  

              README.md
            
          
    Test de cartographie animée avec D3


Gradient de couleur selon l'interpolation entre deux polygones.
Animation du gradient par pulsation globale vers le blanc.
Morphing entre formes.

L. Jégou, décembre 2016.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
  <svg width="510" height="600">
  </svg>
  <script type="text/javascript">
  // Objet SVG
  var svg = d3.select('svg');

  // Formes d'arrivée et de départ pour les interpolations (deux jeux)
  var da0 = "m 155.91263,141.13951 c 0,0 58.90033,-39.26689 81.99849,-8.08436 23.09817,31.18253 40.42179,32.33743 34.64725,61.21014 -5.77454,28.87271 -24.25307,55.4356 -48.50615,55.4356 -24.25307,0 -78.53377,-21.94325 -78.53377,-38.11197 0,-25.40799 -24.25307,-45.04143 10.39418,-70.44941 z";
  var da1 = "m 206.01004,185.54162 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z";
  var db0 = "m 151.88658,120.15062 c 0,0 4.68856,-55.63155 30.38189,-38.56882 25.69332,17.06273 33.57813,11.30391 45.93296,37.64341 12.35483,26.3395 18.17831,55.68117 7.96759,65.09307 -10.21071,9.41191 -44.30059,12.16174 -52.58074,-1.33346 -13.01164,-21.20677 -33.27679,-28.18188 -31.7017,-62.8342 z";
  var db1 = "m 207.62311,152.43245 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z";

  // Les interpolateurs qui calculent les versions intermédiaires des polygones
  var pathInterpolatorA = d3.interpolateString(da0, da1);
  var pathInterpolatorB = d3.interpolateString(db0, db1);

  // Interpolateur de dégradé de couleur
  var colorInterpolator = d3.interpolateRgb("white", "grey");

  // Groupe général
  var forme = svg.append("svg:g")
  .attr("id", "forme");

  // Dessin selon la valeur d'étape intermédaire (entre 0 et 1)
  function dessinA(step){
    d3.select("g#forme")
    .append("path")
    .attr("id", "A"+step)
    .attr("d", pathInterpolatorA(step))
    .style("fill", colorInterpolator(step))
    .style("stroke", "none");
  };

  //Boucle de dessin des courbes intermédiaires entre a0 et a1
  for (i=0; i<=20; i++){
    dessinA(i/20);
  }

  // Morphing entre les deux formes A et B avec gradient polygonal interne pour l'élément fourni en paramètre
  // L'interpolation entre la step de A et la même step de B se fait automatiquement par interpolateString implicite
  function ajouteMorphing(d3Element){
    // Récupération du numéro de l'étape d'interpolation colorée à utiliser pour calculer l'interpolation de forme
    var astep = d3Element.id.slice(1);
    // Objet D3 à partir de l'id
    var e = d3.select(d3Element);
    e
    .transition()
    .on("start", function repeat() { // Fonction qui sera apellée en boucle
      d3.active(this) // On active l'élment D3 en cours de sélection
        .transition()
        .duration(2000)
        .attr("d", pathInterpolatorB(astep)) // On affecte une interpolation vers l'étape correspondante de la forme B à la forme A
      .transition() // Chaînage des deux transitions
        .duration(2000)
        .attr("d", pathInterpolatorA(astep)) // On revient à la forme A
      .on("end", repeat); // Boucle continue
    });
  }

  // On attribue une animation à tous les éléments path dessinés dans le groupe "forme"
  forme.selectAll("path").each(function(d) {
    ajouteMorphing(this);
  });

  // Groupe des repères
  var reperes = svg.append("svg:g")
  .attr("id", "reperes");

  // Dessin en superpositon des polygones de départ et d'arrivée avec des tiretés, pour servir de repères visuels
  reperes
  .append("path")
  .attr("d", da0)
  .style("fill", "none")
  .style("stroke-width", "1px")
  .style("stroke", "#101010")
  .style("stroke-dasharray", "2,2")
  .transition()
    .on("start", function repeat() { // Fonction qui sera apellée en boucle
      d3.active(this)
      .transition()
      .duration(2000)
      .attr("d", db0)
    .transition()
      .duration(2000)
      .attr("d", da0)
    .on("end", repeat);
  });

  reperes
  .append("path")
  .attr("d", da1)
  .style("fill", "none")
  .style("stroke-width", "1px")
  .style("stroke", "#101010")
  .style("stroke-dasharray", "2,2")
  .transition()
    .on("start", function repeat() { // Fonction qui sera apellée en boucle
      d3.active(this)
      .transition()
      .duration(2000)
      .attr("d", db1)
    .transition()
      .duration(2000)
      .attr("d", da1)
    .on("end", repeat);
  });

  /*reperes
  .append("path")
  .attr("d", db0)
  .style("fill", "none")
  .style("stroke-width", "1px")
  .style("stroke", "#101010")
  .style("stroke-dasharray", "2,2");

  reperes
  .append("path")
  .attr("d", db1)
  .style("fill", "none")
  .style("stroke-width", "1px")
  .style("stroke", "#101010")
  .style("stroke-dasharray", "2,2");*/

  </script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
	<svg width="510" height="600">
	</svg>
	<script type="text/javascript">
	// Objet SVG
	var svg = d3.select('svg');

	// Formes d'arrivée et de départ pour les interpolations (deux jeux)
	var da0 = "m 155.91263,141.13951 c 0,0 58.90033,-39.26689 81.99849,-8.08436 23.09817,31.18253 40.42179,32.33743 34.64725,61.21014 -5.77454,28.87271 -24.25307,55.4356 -48.50615,55.4356 -24.25307,0 -78.53377,-21.94325 -78.53377,-38.11197 0,-25.40799 -24.25307,-45.04143 10.39418,-70.44941 z";
	var da1 = "m 206.01004,185.54162 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z";
	var db0 = "m 151.88658,120.15062 c 0,0 4.68856,-55.63155 30.38189,-38.56882 25.69332,17.06273 33.57813,11.30391 45.93296,37.64341 12.35483,26.3395 18.17831,55.68117 7.96759,65.09307 -10.21071,9.41191 -44.30059,12.16174 -52.58074,-1.33346 -13.01164,-21.20677 -33.27679,-28.18188 -31.7017,-62.8342 z";
	var db1 = "m 207.62311,152.43245 c 0,0 -2.35887,-1.12756 -1.92999,-3.3075 0.42889,-2.17994 2.35888,0.45103 3.35961,0.90205 1.00074,0.45102 1.85851,1.05238 2.64481,2.17994 0.78629,1.12755 1.07221,4.51023 -0.50037,4.20954 -2.05126,-1.15576 -2.24463,-2.69408 -3.57406,-3.98403 z";

	// Les interpolateurs qui calculent les versions intermédiaires des polygones
	var pathInterpolatorA = d3.interpolateString(da0, da1);
	var pathInterpolatorB = d3.interpolateString(db0, db1);

	// Interpolateur de dégradé de couleur
	var colorInterpolator = d3.interpolateRgb("white", "grey");

	// Groupe général
	var forme = svg.append("svg:g")
	.attr("id", "forme");

	// Dessin selon la valeur d'étape intermédaire (entre 0 et 1)
	function dessinA(step){
	d3.select("g#forme")
	.append("path")
	.attr("id", "A"+step)
	.attr("d", pathInterpolatorA(step))
	.style("fill", colorInterpolator(step))
	.style("stroke", "none");
	};

	//Boucle de dessin des courbes intermédiaires entre a0 et a1
	for (i=0; i<=20; i++){
	dessinA(i/20);
	}

	// Morphing entre les deux formes A et B avec gradient polygonal interne pour l'élément fourni en paramètre
	// L'interpolation entre la step de A et la même step de B se fait automatiquement par interpolateString implicite
	function ajouteMorphing(d3Element){
	// Récupération du numéro de l'étape d'interpolation colorée à utiliser pour calculer l'interpolation de forme
	var astep = d3Element.id.slice(1);
	// Objet D3 à partir de l'id
	var e = d3.select(d3Element);
	e
	.transition()
	.on("start", function repeat() { // Fonction qui sera apellée en boucle
	d3.active(this) // On active l'élment D3 en cours de sélection
	.transition()
	.duration(2000)
	.attr("d", pathInterpolatorB(astep)) // On affecte une interpolation vers l'étape correspondante de la forme B à la forme A
	.transition() // Chaînage des deux transitions
	.duration(2000)
	.attr("d", pathInterpolatorA(astep)) // On revient à la forme A
	.on("end", repeat); // Boucle continue
	});
	}

	// On attribue une animation à tous les éléments path dessinés dans le groupe "forme"
	forme.selectAll("path").each(function(d) {
	ajouteMorphing(this);
	});

	// Groupe des repères
	var reperes = svg.append("svg:g")
	.attr("id", "reperes");

	// Dessin en superpositon des polygones de départ et d'arrivée avec des tiretés, pour servir de repères visuels
	reperes
	.append("path")
	.attr("d", da0)
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#101010")
	.style("stroke-dasharray", "2,2")
	.transition()
	.on("start", function repeat() { // Fonction qui sera apellée en boucle
	d3.active(this)
	.transition()
	.duration(2000)
	.attr("d", db0)
	.transition()
	.duration(2000)
	.attr("d", da0)
	.on("end", repeat);
	});

	reperes
	.append("path")
	.attr("d", da1)
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#101010")
	.style("stroke-dasharray", "2,2")
	.transition()
	.on("start", function repeat() { // Fonction qui sera apellée en boucle
	d3.active(this)
	.transition()
	.duration(2000)
	.attr("d", db1)
	.transition()
	.duration(2000)
	.attr("d", da1)
	.on("end", repeat);
	});

	/*reperes
	.append("path")
	.attr("d", db0)
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#101010")
	.style("stroke-dasharray", "2,2");

	reperes
	.append("path")
	.attr("d", db1)
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#101010")
	.style("stroke-dasharray", "2,2");*/

	</script>
	</body>
	</html>