flubber tests

Testing of veltman/flubber Built with blockbuilder.org

Questions:

Some countries break when calling flubber.combine on them.

E.g. if you add the United States back in (by removing 840 from the end of line 46) you'll get an error that: Uncaught RangeError: Can't collapse topology into 10 pieces.
Changing maxSegmentLength can cause more countries to break.

While circlePath(x,y,radius) (line 31) returns a perfect SVG circle path, the result of interpolating to it is ~octagonal.

Decreasing maxSegmentLength makes it more circular, but at the expense of performance.
Could be fixed by calling one final transition to go from the final interpolated step to the circle, but maybe that should be a built-in feature of the interpolator?
EDIT: should be fixed by https://github.com/veltman/flubber/pull/2/files

forked from kforeman's block: flubber tests

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/flubber"></script>
  <script src="https://d3js.org/topojson.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

var path = svg.selectAll("country")
      	.data(feature.features)
      	.enter().append("path")
      	.style("fill", "steelblue")
      	.attr("d", function(d) { return geoPath(d); });

var inward = feature.features.map(function(d,i) {
        return flubber.combine(flubber.splitPathString(geoPath(d)), 
                               circlePath((1+(i%cols))*(width/cols), 	
                                          (Math.floor(i/cols)+1)*(height/rows), 
                                          15),
                               { single: true });
      });

var outward = feature.features.map(function(d,i) {
        return flubber.separate(circlePath((1+(i%cols))*(width/cols), 	
                                          (Math.floor(i/cols)+1)*(height/rows), 
                                          15),
          											flubber.splitPathString(geoPath(d)),
                                { single: true });
      });

}

</script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/flubber

https://d3js.org/topojson.v3.min.js