United States of Voronoi Tweening w/ borders

I've been wanting a way to show the original state borders after the transition, so I created another layer that appears when transitioning to the voronoi shapes. There's a bit of a bug with how some of these borders are not appearing - like where "New Wyoming" is above part of old Nebraska.

This seems to be related to the order that the states are rendered...

from micahstubbs's version of United States of Voronoi Tweening:

a small iteration on @alexmacy's United States of Voronoi Tweening that transitions the colors of the pologons, polygon borders, and state-capitol points

playing with ways to highlight the differences between the geographic shape and the Voronoi shape of each US state

Original `README.md`

This is another version of the shape tweening from this block. Inspired by Jason Davies' United States of Voronoi.

The transition I had previously used for shape tweening plots the points along the new shape proportionally to where they were along the original shape. This potentially results in rounded or skipped corners, so I had to figure out a new way to do it.

The new transition used here draws the destination shapes by plotting the points form the old shape equally along each side of the new shape. The result isn't always as clean of a transition, but it's still pretty smooth and the resulting shape is free from any rounded or skipped corners.

I also put both transition functions in the standalone file shapeTween.js to be able to easily reuse it later.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <style>
        .shapes {
          fill: #ccc;
          fill-opacity: .99;
          stroke: black;
        }
        .borders {
          fill-opacity: 0;
          stroke: black;
        }
    </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="states.js"></script>
    <script src="shapeTween.js"></script>
</head>
<body>
</body>
<script>

var width = 960,
        height = 500,
        interval = 2000;

var projection = d3.geoMercator()
        .rotate([100, 0])
        .center([5, 37.7])
        .scale(800);

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    
    var g = svg.append("g")
        .attr("clip-path", "url(#myClip)")

var voronoi = d3.voronoi().size([width, height]),
        voronoiData = voronoi(stateData.map(function(d) {return projection(d.capital);})).polygons();

stateData.forEach(function(d, i) {
        d.vorShape = []
        for (n=0; n<voronoiData[i].length; n++) {d.vorShape.push(voronoiData[i][n])}
        d.projected = d.geometry.coordinates[0].map(projection) 
    })

var clip = svg.append("clipPath")
        .attr("id", "myClip")
        .selectAll("path")
        .data(stateData)
        .enter().append("path")
            .attr("d", function(d) {return "M" + d.projected});

var states = g.selectAll("g")
        .data(stateData)
      .enter().append("g")
        .attr("id", function(d) {return d.name})
        
    states.each(function(p) {
        
        d3.select(this).append("polygon")
        		.attr("class", "shapes")
            .attr("points", p.projected);

d3.select(this).append("polygon")
        		.attr("class", "borders")
            .attr("points", p.projected);

d3.select(this).append("circle")
            .attr("cx", projection(p.capital)[0])
            .attr("cy", projection(p.capital)[1])
            .attr("r", 2);
    })

d3.timeout(function() {loop()}, interval);

function loop() {
        const ihsl = d3.interpolateHslLong('#ccc', 'green');
        states.each(function(p) {
            d3.select(this).select(".shapes")
                .transition().duration(interval)
                .attr("points", shapeTweenSides(p.projected, p.vorShape, true))
                .style('fill', ihsl(.25))
                .style('stroke', 'white')
                .style('stroke-width', '2px')
                .transition().delay(interval).duration(interval)
                .attr("points", p.projected)
                .style('fill', ihsl(0))
                .style('stroke', 'black')
                .style('stroke-width', '1px');

d3.select(this).select(".borders")
                .transition().duration(interval)
                .style('stroke', 'red')
                .transition().delay(interval).duration(interval)
                .style('stroke', 'black')
                
            d3.select(this).select('circle')
                .transition().duration(interval)
                .style('fill', 'white')
                .transition().delay(interval).duration(interval)
                .style('fill', 'black');
        })

d3.timeout(function() {loop()}, interval * 4);
    }
</script>

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