ljegou/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test de cartographie animée avec D3


Cabanes et zones d'influence variables

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="800" height="600">
  </svg>
  <script type="text/javascript">
  var svg = d3.select('svg');

  // Formes d'arrivée et de départ pourles interpolations (deux jeux)
  var d = [];
  d["a"] = [];
  d["b"] = [];
  d["c"] = [];
  d["d"] = [];
  d["e"] = [];
  d["f"] = [];

  d["a"][0] = "m 183.65691,147.92113 c 58.14265,-5.5374 78.44642,41.53046 84.90672,69.21743 6.46029,27.68697 24.91827,61.83424 -9.22899,80.29222 -30.47526,16.47312 -64.60294,6.46029 -76.60063,-14.76639 -11.99768,-21.22668 -65.52583,-126.43717 0.9229,-134.74326 z";
  d["b"][0] = "m 295.2603,138.79105 c 71.57323,1.52505 72.83813,75.35978 73.14871,125.26578 0.17692,28.43013 -25.31229,37.98752 -63.75971,32.64628 -34.31299,-4.76686 -20.62009,-21.07915 -27.14942,-47.09929 -5.91696,-23.57974 -12.84496,-44.83187 -17.4201,-58.87064 -7.91295,-24.28081 6.01987,-52.27989 35.18052,-51.94213 z";
  d["c"][0] = "m 420.06475,144.61289 c 45.23756,-0.58298 56.96172,5.89115 72.41015,18.61947 22.63277,18.64766 -8.6454,112.16536 -32.91581,137.2448 -19.77129,20.43035 -43.70156,31.9354 -78.7855,15.32666 -31.3112,-14.82272 -15.44332,-16.80522 -12.95667,-45.43656 1.21428,-13.9812 0.10813,-39.4598 -2.45535,-58.64159 -1.87723,-14.04682 -4.53597,-22.89702 -7.63727,-30.49375 -8.29286,-20.3136 42.01887,-36.88567 62.34045,-36.61903 z";
  d["d"][0] = "m 637.62835,308.07718 c 23.89945,42.21237 -28.99057,66.44668 -55.94001,69.49217 -30.96511,3.49929 -100.89118,49.76726 -134.84174,41.68081 -27.65699,-6.58742 -60.4078,-21.78075 -53.3639,-59.95295 3.64929,-19.77619 8.39406,-19.69222 30.84048,-36.93373 17.51738,-3.03043 38.987,-21.29912 47.22772,-38.55966 5.82691,-12.20471 7.61202,-13.2745 16.44845,-36.83758 4.45928,-11.89105 66.05264,-66.97161 84.87685,-48.07387 13.6982,13.75171 60.48355,101.76503 64.75215,109.18481 z";
  d["e"][0] = "m 371.83976,497.79572 c -64.68363,15.61359 -98.61439,-16.16148 -97.39359,-44.56594 0.87187,-20.28595 3.71705,-36.08254 7.0812,-46.44984 4.90186,-15.10606 5.90037,-23.86693 5.68557,-34.87687 -0.20655,-10.5871 -2.20752,-23.26103 -5.5176,-35.35741 -2.69107,-9.83427 12.65232,-18.25752 22.74082,-21.07145 23.70552,-6.61205 24.47406,7.2558 67.03388,12.3859 15.56918,1.87669 19.39791,28.1528 20.47478,38.59235 1.1356,11.00903 1.56585,33.49706 38.45565,48.17247 32.6056,12.97108 -8.84089,71.16923 -58.56071,83.17079 z";
  d["f"][0] = "m 104.06796,391.92379 c -1.85391,-23.87072 -1.10215,-51.50731 12.56321,-71.92252 19.66999,-29.38577 56.27467,-46.02724 67.58237,-33.635 20.77338,22.76579 44.33595,20.85136 61.94092,17.50328 6.56902,-1.24928 26.24798,0.95712 31.18249,15.88243 10.8744,32.89153 20.70134,93.67009 -18.16908,106.18239 -23.20984,7.4712 -147.95407,32.57292 -155.09991,-34.01058 z";

  d["a"][1] = "m 241.04525,269.79984 c 5.05258,-0.46485 6.81697,3.48638 7.37837,5.81064 0.5614,2.32425 2.16539,5.19084 -0.802,6.74034 -2.64829,1.38288 -5.61398,0.54233 -6.65657,-1.2396 -1.0426,-1.78193 -5.69418,-10.61411 0.0802,-11.31138 z";
  d["b"][1] = "m 320.22511,274.12324 c 3.94165,1.70915 2.33614,5.83977 1.22072,8.61935 -0.63544,1.58344 -2.26841,1.53591 -4.28313,0.36656 -1.79806,-1.0436 -0.66713,-1.63905 -0.43931,-3.2328 0.20646,-1.44426 0.30391,-2.78216 0.36837,-3.66593 0.11147,-1.52851 1.52099,-2.76778 3.13335,-2.08718 z";
  d["c"][1] = "m 406.54184,294.34844 c 1.93229,0.87865 2.31312,1.36221 2.73892,2.16137 0.62384,1.17082 -2.39802,4.15817 -3.8831,4.64292 -1.2098,0.39488 -2.43465,0.36234 -3.62435,-0.97781 -1.06173,-1.19602 -0.35178,-0.95645 0.27224,-2.01229 0.30473,-0.51558 0.71985,-1.52087 0.95738,-2.31291 0.17464,-0.57968 0.22185,-0.97435 0.22765,-1.32943 0.0155,-0.94946 2.45281,-0.58697 3.31125,-0.17186 z";
  d["d"][1] = "m 431.88968,374.32289 c 0.81122,1.43281 -0.98402,2.25539 -1.89876,2.35877 -1.05105,0.11877 -3.42454,1.68924 -4.57692,1.41476 -0.93875,-0.22359 -2.05041,-0.7393 -1.81132,-2.03497 0.12387,-0.67126 0.28492,-0.66841 1.04681,-1.25364 0.59459,-0.10286 1.32333,-0.72295 1.60305,-1.30882 0.19778,-0.41426 0.25837,-0.45058 0.55831,-1.25037 0.15136,-0.40362 2.24201,-2.27321 2.88096,-1.63177 0.46495,0.46677 2.05298,3.4542 2.19787,3.70604 z";
  d["e"][1] = "m 317.10141,350.67773 c -4.14077,0.99952 -6.31287,-1.03458 -6.23472,-2.85291 0.0558,-1.29862 0.23795,-2.30985 0.45331,-2.97352 0.31379,-0.96703 0.37772,-1.52786 0.36396,-2.23267 -0.0132,-0.67774 -0.14131,-1.48907 -0.35321,-2.26343 -0.17227,-0.62954 0.80995,-1.16876 1.45577,-1.3489 1.51753,-0.42327 1.56672,0.46449 4.29122,0.79289 0.99667,0.12014 1.24177,1.80222 1.31071,2.47052 0.0727,0.70475 0.10024,2.14433 2.46176,3.08379 2.08727,0.83035 -0.56595,4.55595 -3.7488,5.32423 z";
  d["f"][1] = "m 241.55375,335.29945 c -0.13964,-1.79801 -0.083,-3.87967 0.9463,-5.4174 1.4816,-2.21342 4.23876,-3.4669 5.09049,-2.53348 1.56471,1.71478 3.33951,1.57058 4.66557,1.31839 0.49479,-0.0941 1.97707,0.0721 2.34875,1.19631 0.81909,2.47748 1.55928,7.05549 -1.36855,7.99796 -1.74823,0.56275 -11.14431,2.45348 -11.68256,-2.56178 z";

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

  var pathInterpolator = [];
  pathInterpolator["a"] = d3.interpolateString(d["a"][0], d["a"][1]);
  pathInterpolator["b"] = d3.interpolateString(d["b"][0], d["b"][1]);
  pathInterpolator["c"] = d3.interpolateString(d["c"][0], d["c"][1]);
  pathInterpolator["d"] = d3.interpolateString(d["d"][0], d["d"][1]);
  pathInterpolator["e"] = d3.interpolateString(d["e"][0], d["e"][1]);
  pathInterpolator["f"] = d3.interpolateString(d["f"][0], d["f"][1]);
  var colorInterpolator = d3.interpolateRgb("white", "grey");

  // Dessin selon la valeur d'étape intermédaire (entre 0 et 1)
  function dessin(lepath, step){
      d3.select("g#forme")
        .append("path")
        .attr("d", pathInterpolator[lepath](step))
        .style("fill", colorInterpolator(step))
        .style("stroke", "none");
  };

//Boucle de dessin des courbes intermédiaires
for (i=0; i<=8; i++){
  dessin("a", i/8);
  dessin("b", i/8);
  dessin("c", i/8);
  dessin("d", i/8);
  dessin("e", i/8);
  dessin("f", i/8);
}

// Variation de la couleur
function changeElementColor(d3Element, vitesse){
    var e = d3.select(d3Element);
    var couleurOrigine = e.style("fill");
    e
    .transition()
      .on("start", function repeat() {
        d3.active(this)
          .transition().duration(vitesse)
              .style("fill", "white")
          .transition().duration(vitesse)
              .style("fill", couleurOrigine)
          .on("end", repeat);
        });
}

forme.selectAll("path").each(function(d) {
  changeElementColor(this, 1000);
});

dessinReperes("a");
dessinReperes("b");
dessinReperes("c");
dessinReperes("d");
dessinReperes("e");
dessinReperes("f");

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

  // Superpositon des formes de départ et d'arrivée
  reperes
    .append("path")
    .attr("d", d[p][0])
    .style("fill", "none")
    .style("stroke-width", "1px")
    .style("stroke", "#010101")
    .style("stroke-dasharray", "2,2");

    reperes
      .append("path")
      .attr("d", d[p][1])
      .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="800" height="600">
	</svg>
	<script type="text/javascript">
	var svg = d3.select('svg');

	// Formes d'arrivée et de départ pourles interpolations (deux jeux)
	var d = [];
	d["a"] = [];
	d["b"] = [];
	d["c"] = [];
	d["d"] = [];
	d["e"] = [];
	d["f"] = [];

	d["a"][0] = "m 183.65691,147.92113 c 58.14265,-5.5374 78.44642,41.53046 84.90672,69.21743 6.46029,27.68697 24.91827,61.83424 -9.22899,80.29222 -30.47526,16.47312 -64.60294,6.46029 -76.60063,-14.76639 -11.99768,-21.22668 -65.52583,-126.43717 0.9229,-134.74326 z";
	d["b"][0] = "m 295.2603,138.79105 c 71.57323,1.52505 72.83813,75.35978 73.14871,125.26578 0.17692,28.43013 -25.31229,37.98752 -63.75971,32.64628 -34.31299,-4.76686 -20.62009,-21.07915 -27.14942,-47.09929 -5.91696,-23.57974 -12.84496,-44.83187 -17.4201,-58.87064 -7.91295,-24.28081 6.01987,-52.27989 35.18052,-51.94213 z";
	d["c"][0] = "m 420.06475,144.61289 c 45.23756,-0.58298 56.96172,5.89115 72.41015,18.61947 22.63277,18.64766 -8.6454,112.16536 -32.91581,137.2448 -19.77129,20.43035 -43.70156,31.9354 -78.7855,15.32666 -31.3112,-14.82272 -15.44332,-16.80522 -12.95667,-45.43656 1.21428,-13.9812 0.10813,-39.4598 -2.45535,-58.64159 -1.87723,-14.04682 -4.53597,-22.89702 -7.63727,-30.49375 -8.29286,-20.3136 42.01887,-36.88567 62.34045,-36.61903 z";
	d["d"][0] = "m 637.62835,308.07718 c 23.89945,42.21237 -28.99057,66.44668 -55.94001,69.49217 -30.96511,3.49929 -100.89118,49.76726 -134.84174,41.68081 -27.65699,-6.58742 -60.4078,-21.78075 -53.3639,-59.95295 3.64929,-19.77619 8.39406,-19.69222 30.84048,-36.93373 17.51738,-3.03043 38.987,-21.29912 47.22772,-38.55966 5.82691,-12.20471 7.61202,-13.2745 16.44845,-36.83758 4.45928,-11.89105 66.05264,-66.97161 84.87685,-48.07387 13.6982,13.75171 60.48355,101.76503 64.75215,109.18481 z";
	d["e"][0] = "m 371.83976,497.79572 c -64.68363,15.61359 -98.61439,-16.16148 -97.39359,-44.56594 0.87187,-20.28595 3.71705,-36.08254 7.0812,-46.44984 4.90186,-15.10606 5.90037,-23.86693 5.68557,-34.87687 -0.20655,-10.5871 -2.20752,-23.26103 -5.5176,-35.35741 -2.69107,-9.83427 12.65232,-18.25752 22.74082,-21.07145 23.70552,-6.61205 24.47406,7.2558 67.03388,12.3859 15.56918,1.87669 19.39791,28.1528 20.47478,38.59235 1.1356,11.00903 1.56585,33.49706 38.45565,48.17247 32.6056,12.97108 -8.84089,71.16923 -58.56071,83.17079 z";
	d["f"][0] = "m 104.06796,391.92379 c -1.85391,-23.87072 -1.10215,-51.50731 12.56321,-71.92252 19.66999,-29.38577 56.27467,-46.02724 67.58237,-33.635 20.77338,22.76579 44.33595,20.85136 61.94092,17.50328 6.56902,-1.24928 26.24798,0.95712 31.18249,15.88243 10.8744,32.89153 20.70134,93.67009 -18.16908,106.18239 -23.20984,7.4712 -147.95407,32.57292 -155.09991,-34.01058 z";

	d["a"][1] = "m 241.04525,269.79984 c 5.05258,-0.46485 6.81697,3.48638 7.37837,5.81064 0.5614,2.32425 2.16539,5.19084 -0.802,6.74034 -2.64829,1.38288 -5.61398,0.54233 -6.65657,-1.2396 -1.0426,-1.78193 -5.69418,-10.61411 0.0802,-11.31138 z";
	d["b"][1] = "m 320.22511,274.12324 c 3.94165,1.70915 2.33614,5.83977 1.22072,8.61935 -0.63544,1.58344 -2.26841,1.53591 -4.28313,0.36656 -1.79806,-1.0436 -0.66713,-1.63905 -0.43931,-3.2328 0.20646,-1.44426 0.30391,-2.78216 0.36837,-3.66593 0.11147,-1.52851 1.52099,-2.76778 3.13335,-2.08718 z";
	d["c"][1] = "m 406.54184,294.34844 c 1.93229,0.87865 2.31312,1.36221 2.73892,2.16137 0.62384,1.17082 -2.39802,4.15817 -3.8831,4.64292 -1.2098,0.39488 -2.43465,0.36234 -3.62435,-0.97781 -1.06173,-1.19602 -0.35178,-0.95645 0.27224,-2.01229 0.30473,-0.51558 0.71985,-1.52087 0.95738,-2.31291 0.17464,-0.57968 0.22185,-0.97435 0.22765,-1.32943 0.0155,-0.94946 2.45281,-0.58697 3.31125,-0.17186 z";
	d["d"][1] = "m 431.88968,374.32289 c 0.81122,1.43281 -0.98402,2.25539 -1.89876,2.35877 -1.05105,0.11877 -3.42454,1.68924 -4.57692,1.41476 -0.93875,-0.22359 -2.05041,-0.7393 -1.81132,-2.03497 0.12387,-0.67126 0.28492,-0.66841 1.04681,-1.25364 0.59459,-0.10286 1.32333,-0.72295 1.60305,-1.30882 0.19778,-0.41426 0.25837,-0.45058 0.55831,-1.25037 0.15136,-0.40362 2.24201,-2.27321 2.88096,-1.63177 0.46495,0.46677 2.05298,3.4542 2.19787,3.70604 z";
	d["e"][1] = "m 317.10141,350.67773 c -4.14077,0.99952 -6.31287,-1.03458 -6.23472,-2.85291 0.0558,-1.29862 0.23795,-2.30985 0.45331,-2.97352 0.31379,-0.96703 0.37772,-1.52786 0.36396,-2.23267 -0.0132,-0.67774 -0.14131,-1.48907 -0.35321,-2.26343 -0.17227,-0.62954 0.80995,-1.16876 1.45577,-1.3489 1.51753,-0.42327 1.56672,0.46449 4.29122,0.79289 0.99667,0.12014 1.24177,1.80222 1.31071,2.47052 0.0727,0.70475 0.10024,2.14433 2.46176,3.08379 2.08727,0.83035 -0.56595,4.55595 -3.7488,5.32423 z";
	d["f"][1] = "m 241.55375,335.29945 c -0.13964,-1.79801 -0.083,-3.87967 0.9463,-5.4174 1.4816,-2.21342 4.23876,-3.4669 5.09049,-2.53348 1.56471,1.71478 3.33951,1.57058 4.66557,1.31839 0.49479,-0.0941 1.97707,0.0721 2.34875,1.19631 0.81909,2.47748 1.55928,7.05549 -1.36855,7.99796 -1.74823,0.56275 -11.14431,2.45348 -11.68256,-2.56178 z";

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

	var pathInterpolator = [];
	pathInterpolator["a"] = d3.interpolateString(d["a"][0], d["a"][1]);
	pathInterpolator["b"] = d3.interpolateString(d["b"][0], d["b"][1]);
	pathInterpolator["c"] = d3.interpolateString(d["c"][0], d["c"][1]);
	pathInterpolator["d"] = d3.interpolateString(d["d"][0], d["d"][1]);
	pathInterpolator["e"] = d3.interpolateString(d["e"][0], d["e"][1]);
	pathInterpolator["f"] = d3.interpolateString(d["f"][0], d["f"][1]);
	var colorInterpolator = d3.interpolateRgb("white", "grey");

	// Dessin selon la valeur d'étape intermédaire (entre 0 et 1)
	function dessin(lepath, step){
	d3.select("g#forme")
	.append("path")
	.attr("d", pathInterpolator[lepath](step))
	.style("fill", colorInterpolator(step))
	.style("stroke", "none");
	};

	//Boucle de dessin des courbes intermédiaires
	for (i=0; i<=8; i++){
	dessin("a", i/8);
	dessin("b", i/8);
	dessin("c", i/8);
	dessin("d", i/8);
	dessin("e", i/8);
	dessin("f", i/8);
	}

	// Variation de la couleur
	function changeElementColor(d3Element, vitesse){
	var e = d3.select(d3Element);
	var couleurOrigine = e.style("fill");
	e
	.transition()
	.on("start", function repeat() {
	d3.active(this)
	.transition().duration(vitesse)
	.style("fill", "white")
	.transition().duration(vitesse)
	.style("fill", couleurOrigine)
	.on("end", repeat);
	});
	}

	forme.selectAll("path").each(function(d) {
	changeElementColor(this, 1000);
	});

	dessinReperes("a");
	dessinReperes("b");
	dessinReperes("c");
	dessinReperes("d");
	dessinReperes("e");
	dessinReperes("f");

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

	// Superpositon des formes de départ et d'arrivée
	reperes
	.append("path")
	.attr("d", d[p][0])
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#010101")
	.style("stroke-dasharray", "2,2");

	reperes
	.append("path")
	.attr("d", d[p][1])
	.style("fill", "none")
	.style("stroke-width", "1px")
	.style("stroke", "#101010")
	.style("stroke-dasharray", "2,2");
	}

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