{
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', 500);
const stage = svg.append('g');
const scaleX = d3.scaleLinear([0, randomData.length - 1], [0, width]);
const scaleY = d3.scaleLinear([0, d3.max(randomData)], [500, 0]);
const line = d3
.line()
.x((d, i) => scaleX(i))
.y(scaleY)
.curve(d3.curveBasis);
stage
.selectAll('path')
.data(randomSeed)
.join('path')
.attr('id', d => `path-${d.id}`)
.datum(d => randomData.map((_d, i) => _d + d.seeds[i] - seedMax / 2))
.attr('d', line)
.attr('stroke', 'pink')
.attr('fill', 'none');
const scaleColor = d3.scaleLinear(
[0, randomSeed.length - 1],
['indigo', 'orange']
);
stage
.selectAll('rect')
.data(randomSeed)
.join('circle')
.attr('id', d => `obj-${d.id}`)
.attr('r', 5)
.attr('fill', (d, i) => scaleColor(i));
stage
.selectAll('animateMotion')
.data(randomSeed)
.join('animateMotion')
.each(function(d, i, e) {
const pathId = `path-${d.id}`;
const objId = `obj-${d.id}`;
d3.select(this).call(linkPathAnimation, {
pathId,
objId,
duration: 5 + Math.random() * 5
});
});
if (!lineVisible) stage.selectAll('path').attr('visibility', 'hidden');
return svg.node();
}