const svg = d3

.select(DOM.svg(width, 40))

.style("width", "100%")

.style("height", "auto");

let rect = svg

.append('rect')

.attr('width', 500)

.attr('height', 40)

.attr('x', 0)

.attr('y', 0);

function bigger() {

rect

.transition()

.duration(1000)

.attr('width', 700)

.attr('fill', 'darkblue')

.on('end', smaller);

}

function smaller() {

rect

.transition()

.duration(1000)

.attr('width', 500)

.attr('fill', 'lightblue')

.on('end', bigger);

}

bigger();

return svg.node();

button_NaiveMorph;

let animation_interval = 2000;

const paths_total = d3

.select('#jumble')

.selectAll('path')

.nodes().length;

// for every path (excluding the outermost one), transition d to the path of the next waterline up

for (

let i = 0;

i < paths_total - 1; // get number of paths - 1

i++

) {

d3.select('#jumble')

.selectAll('path')

.filter((d, j) => j == i)

.transition()

.duration(animation_interval)

.attr('d', paths_d_array[i + 1])

.attr('opacity', opacity_scale(i))

.on('end', function() {

if (i == 10) {

mutable transitioning1 = false;

}

});

}

//fade out and then remove the final waterline

d3.select('#jumble')

.selectAll('path')

.filter((d, j) => j == paths_total - 1)

.attr('opacity', 1)

.transition()

.attr('opacity', 0)

.remove();

// create a new first waterline

d3.select('#jumble')

.append('path')

.attr('d', paths_d_array[0])

.attr("class", "waterLines")

.style('fill', 'none')

.style("stroke", 'teal')

.attr('opacity', opacity_scale(0))

.lower(); // make first child

button;

d3.select('path#map0')

.transition()

.duration(1000)

// using .attrTween instead of .attr allows defining a custom interpolation

// https://github.com/d3/d3-transition#transition_attrTween

.attrTween('d', function() {

var startPath = d3.select('#map0').attr('d'),

endPath = d3.select('#map1').attr('d');

return flubber.interpolate(startPath, endPath);

});

d3.select('path#map1')

.transition()

.duration(1000)

.attrTween('d', function() {

var startPath = d3.select('#map1').attr('d'),

endPath = d3.select('#map2').attr('d');

return flubber.interpolate(startPath, endPath);

})

.on("end", function() {

d3.select('path#map2').remove();

d3.select('path#map1').attr('id', 'map2');

d3.select('path#map0').attr('id', 'map1');

d3.select('#g_paths')

.append('path')

.attr('d', path0_d)

.attr('fill', 'none')

.attr('stroke', 'grey')

.attr('id', 'map0');

mutable transitioning = false;

});

buffered_polygons, // waterlines geojson to be drawn in the centre

polygon_orig, // original geojson to be drawn at the centre

waterline_index_start = 10, // the waterline index to start animating from upwards

reverse = false // waterlines direction of travel

) {

/////////////////////

/// Define scales ///

/////////////////////

const opacity = d3

.scalePow()

.exponent(1)

.domain([0, buffered_polygons.length - 1])

.range([1, 0]);

const stroke_width = d3

.scalePow()

.exponent(3)

.domain([0, buffered_polygons.length - 1])

.range([1.4, 0.3]);

// Define geo path generator and projection

const geoGenerator = d3

.geoPath()

.projection(

d3

.geoMercator()

.fitSize([width, 600], buffered_polygons[buffered_polygons.length - 1])

);

// To avoid the problems with morphing between multi-part paths (separate islands),

// only keep the longest path

let buffered_polygon_paths = [];

for (let i = 0; i < buffered_polygons.length; i++) {

let buffer_path = geoGenerator(buffered_polygons[i]);

let buffer_path_array = buffer_path.split("M");

buffer_path_array.sort(function(a, b) {

return b.length - a.length;

});

let buffer_path_longest = "M" + buffer_path_array[0];

buffered_polygon_paths.push(buffer_path_longest);

}

/////////////////////////

/// Draw original map ///

/////////////////////////

const svg = d3

.select(DOM.svg(width, 600))

.style("width", "100%")

.style("height", "auto");

const g = svg.append("g");

g.selectAll('path.waterLines')

.data(buffered_polygons)

.enter()

.append('g') // create g wrappers for the paths so we can apply concurrent animations (path and opacity) below

.attr('class', 'waterLine_g')

.attr('opacity', 1)

.append('path')

.attr("d", geoGenerator)

.attr("class", "waterLines")

.style('fill', 'none')

.style("stroke", 'teal');

g.append("path") // draw the original polygon on top of the waterlines

.datum(polygon_orig)

.attr("d", geoGenerator)

.attr("class", "land")

.style("fill", 'white')

.style("stroke", 'teal');

///////////////////////////

/// Define transitions ///

//////////////////////////

let n = waterline_index_start;

// for waterlines emitting outwards

if (!reverse) {

while (true) {

// remove the final waterline

g.selectAll('g.waterLine_g')

.filter((d, i) => i == buffered_polygons.length - 1)

.remove();

// create a new nth waterline

let n_plus_1th_DOM_node = g

.selectAll('g.waterLine_g')

.filter((d, i) => i == n)

.node();

g.insert('g')

// make the nth child

.each(function() {

this.parentNode.insertBefore(this, n_plus_1th_DOM_node);

})

.attr('class', 'waterLine_g')

.insert('path')

.datum(buffered_polygons[n])

.attr("d", geoGenerator)

.attr("class", "waterLines")

.attr('id', 'new')

.style('fill', 'none')

.style("stroke", 'teal');

// Transition the waterline paths

g.selectAll('path.waterLines')

.filter((d, i) => i > n) // don't include waterlines before n

.transition()

.duration(animation_interval)

.ease(d3.easeLinear)

.attrTween('d', function(d, i) {

var startPath = buffered_polygon_paths[i + n],

endPath = buffered_polygon_paths[i + 1 + n];

return flubber.interpolate(startPath, endPath);

});

//Transition the (new) final waterline, fade it out, and remove

// apply this transition to the parent g element, rather than the path element to avoid clashing animations https://bl.ocks.org/mbostock/6081914

g.selectAll('g.waterLine_g')

.filter((d, i) => i == buffered_polygons.length - 1)

.transition()

.duration(animation_interval)

.ease(d3.easeLinear)

.style('opacity', 0)

.remove();

await Promises.tick(animation_interval);

yield svg.node();

}

}

// waterlines going inwards

else {

while (true) {

// remove the n + 1th waterline

g.selectAll('g.waterLine_g')

.filter((d, i) => i == n + 1)

.remove();

// create new final waterline

g.append('g')

.attr('class', 'waterLine_g')

.append('path')

.datum(buffered_polygons[buffered_polygons.length - 1])

.attr("d", geoGenerator)

.attr("class", "waterLines")

.style('fill', 'none')

.style("stroke", 'teal')

.style('opacity', 1);

// Transition the waterline paths

g.selectAll('path.waterLines')

.filter((d, i) => i > n) // don't include waterlines before n

.transition()

.duration(animation_interval)

.ease(d3.easeLinear)

.attrTween('d', function(d, i) {

var startPath = buffered_polygon_paths[i + n + 1],

endPath = buffered_polygon_paths[i + n];

return flubber.interpolate(startPath, endPath);

});

//Transition the (new) final waterline, fade it in

// apply this transition to the parent g element, rather than the path element to avoid clashing animations https://bl.ocks.org/mbostock/6081914

g.selectAll('g.waterLine_g')

.filter((d, i) => i == buffered_polygons.length - 1)

.style('opacity', 0)

.transition()

.duration(animation_interval)

.ease(d3.easeLinear)

.style('opacity', 1);

await Promises.tick(animation_interval);

yield svg.node();

}

}

}