| license: gpl-3.0 |
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> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| </head> | |
| <body></body> | |
| <script> | |
| 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> |
