群馬とフランスは似てる？ by shimizu

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
<script src="https://unpkg.com/d3@5.0.0/dist/d3.min.js"></script>    
<style>
 html,body{
    width: 100%;
    height: 100%;
 }
 .map {
    display: inline-block;
    width: 470px;
    height: 500px;
    transition: all 2000ms 0s ease;
 }
.change {
    transform: scaleX(-1) scaleX(0.9) rotate(315deg) scaleX(0.9);
}

#btn {
  z-index:9;
  color:red;
  position: absolute;
  left:calc(980px/2 - 30px);
  top:calc(250px - 21px);
	font-size: 1em;
	display: inline-block;
	width: 60px;
	height: 42px;
	text-decoration: none;
	background-color: #fff;
	border-bottom: solid 4px #627295;
	border-radius: 3px;
	outline: none;  
}
#btn:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none; 
}

</style>
</head>
<body>
<div>
  <button id="btn">click!</button>
</div>
<div>
  <svg class="map" id="gunma"></svg>
  <svg class="map" id="france"></svg>
</div>
    
<script>
  const gunma = d3.select("#gunma")
  const france = d3.select("#france")   
  const w=470,h=500;

  const Toggle = function(){
    var fn = arguments;
    var l = arguments.length;
    var i = 0;
    return function () {
      if (l <= i) i = 0;
      fn[i++]();
    }
  }

  const projection = d3.geoMercator();
  const geoPath = d3.geoPath();


  const p1 = d3.json("gunma.geojson");
  const p2 = d3.json("france.geojson");


  Promise.all([p1, p2]).then(function(data){

    const gunmaData = data[0];
    const flanceData= data[1];

    projection.fitExtent([[0, 0], [w, h]], gunmaData);
    geoPath.projection(projection);


    gunma.selectAll("path")
      .data(gunmaData.features)
      .enter()
      .append("path")
      .attr("d", geoPath)
      .attr("stroke", "black")
      .attr("fill", "gray");

    const gunmaCener = geoPath.centroid(gunmaData);

    gunma.append("text")
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "middle")
      .attr("transform", "translate("+ gunmaCener+")")
      .attr("fill", "white")
      .text("GUNMA");

    projection.fitExtent([[0, 0], [w, h]], flanceData);
    geoPath.projection(projection);


    france.selectAll("path")
      .data(flanceData.features)
      .enter()
      .append("path")
      .attr("class", "pref")
      .attr("d", geoPath)
      .attr("stroke", "black")
      .attr("fill", "gray");

    const franceCener = geoPath.centroid(flanceData);

    france.append("text")
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "middle")
      .attr("transform", "translate(" + franceCener + ")")
      .attr("fill", "white")
      .text("FRANCE");

    var tog = Toggle(() => { france.classed("change", true) },  ()=> { france.classed("change", false)});
    d3.select("#btn").on("click", tog);

  });

   
</script>    



</body>
</html>