D3 Examples - World Map and Pattern Transitions 2

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
    
var pattern = svg.append("pattern")
    
pattern.attr("width",20)
    .attr("height",20)
    .attr("patternUnits","userSpaceOnUse")
    .attr("patternTransform","rotate(45)")
    .attr("id","testPattern");
      
var rect1 = pattern.append("rect")
    .attr("x",0)
    .attr("y",0)
    .attr("width",10)
    .attr("height",20)
    .attr("fill","orange")
    
var rect2 = pattern.append("rect")
   .attr("x",20)
   .attr("y",0)
   .attr("width",10)
   .attr("height",20)
   .attr("fill","orange");
​
var projection = d3.geoMercator()
    .scale((width - 3) / (2 * Math.PI))
    .translate([width / 2, height / 2]);
​
var path = d3.geoPath()
    .projection(projection);
​
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
  if (error) throw error;
​
  svg.selectAll("path")
      .data(topojson.feature(world, world.objects.countries).features)
      .enter()
      .append("path")
      .attr("class", "boundary")
      .attr("d", path)
      .attr("fill","url(#testPattern)");
      
    
    function toggle() {
    
    
        rect2
          .attr("x","-20")
          .transition()
          .ease(d3.easeLinear)
          .attr("x",0)
          .duration(2000);
    
        rect1
          .attr("x",0)
          .transition()
          .attr("x",20)
         /// .attr("width",20)
          .ease(d3.easeLinear)
          .duration(2000)
          .on("end",toggle);
     }
     
     toggle();
      
      
});
​
</script>
​
    