Voronoi Sorting v2

An update to Voronoi Sorting, the polygons now get their fill color from a logarithmic scale similar to how they are sorted horizontally. This creates a more pleasing dispersion of color. Each iteration also randomly selects a color scheme from 18 of D3 4.0's sequential color schemes.

The previous versions are here: Voronoi Shuffling v1, Voronoi Shuffling v2, & Voronoi Shuffling v3

<!DOCTYPE html>
<meta charset="utf-8">
<head>

<style>

body { 
            margin: 0; 
        }

path { 
            fill-opacity: .75; 
            stroke: black; 
        }

</style>

</head>

var width = window.innerWidth,
        height = window.innerHeight,
        samples = [],
        minMax;

var voronoi = d3.voronoi()
        .size([width, height])

var schemes = ["interpolateBlues", "interpolateGreens", "interpolateGreys",
                "interpolateOranges", "interpolatePurples", "interpolateReds", 
                "interpolateBuGn", "interpolateBuPu", "interpolateGnBu", 
                "interpolateOrRd", "interpolatePuBuGn","interpolatePuBu", 
                "interpolatePuRd", "interpolateRdPu", "interpolateYlGnBu",
                "interpolateYlGn", "interpolateYlOrBr", "interpolateYlOrRd"]

// the size of the polygon will determine it's fill color - and later, it's placement along the x axis
    var logForColor = d3.scaleLog().range([1,0]),
        color = d3[schemes[Math.floor(d3.randomUniform(0,schemes.length)())]],
        x = d3.scaleLog().range([0,width]);

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)

getData();

var paths = svg.selectAll("path")
      .data(samples)
        .enter().append("path")

paths.attr("transform", "translate(0,0)")
        .attr("d", function(d, i) {return getPath(samples[i].sample); })
        .style("fill", function(d, i) {return color(logForColor(samples[i].area));})

function getData() {

// if loading data for the first time, generate an array of random coordinates
        if (!samples.length) {
            for (i=0; i<500; i++) {samples[i] = [Math.random() * width, Math.random() * height];}        
        //otherwise, update the x coordinate based on the polygon's size 
        } else {
            for (i in samples) {samples[i] = [x(samples[i].area), samples[i].point[1]];}
        }

// create new polygons and bind them and their calculated area to the main data array
        var voronoiData = voronoi(samples).polygons();
        for (i in voronoiData) {
            samples[i] = {
                point: samples[i],
                sample: voronoiData[i],
                area: d3.polygonArea(voronoiData[i]),
            }
        }

// set the domain of the scales by finding the min and max area values
        minMax = d3.extent(samples, function(d) {return d.area;});
        
        logForColor.domain([minMax[1],minMax[0]])
        x.domain(minMax);

}

// create the paths for the polygons
    function getPath(points) {

// redrawing the polygons was causing some unwanted effects when transitioning a 
        // polygon to a new shape that has more sides. this was because the new points 
        // would be drawn off screen before transitioning into place.

// my solution was to default each polygon to having more points than (hopefully) 
        // necessary, with the extra points placed on top of each other. this is potentially 
        // not performant as it creates multiple points in the same location.

var thisPath = "M" + points[0];
        for (n=1; n<15; n++) {
            thisPath += "L" + (n < points.length ? points[n] : points[0])
        }
        return thisPath;
 
    }

var sortShapes = function() {
        
        color = d3[schemes[Math.floor(d3.randomUniform(0,schemes.length)())]]

// slide the polygons into order of size along the x-axis according to the log scale
        paths.transition().duration(2000)
            .attr("transform", function(d, i) {
                return "translate(" + (-samples[i].point[0] + x(samples[i].area)) + ",0)"
            })

// re-calculate the voronoi polygons and their sizes based on the new positions
        getData();

// transition to the new sizes and shapes
        paths.transition().delay(2000).duration(2000)
            .attr("transform", "translate(0,0)")
            .attr("d", function(d, i) {return getPath(samples[i].sample);})
            .style("fill", function(d, i) {return color(logForColor(samples[i].area));})

// loop the sorting process
        d3.timeout(sortShapes, 6000);

}

d3.timeout(sortShapes, 2000);

</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js