{
const radius = 5;
const startX = 200;
const startY = 200;
const stepSize = 2*radius;
const trailColor = 'lightblue';
const trailOpacity = .2;
const svg_actual = DOM.svg(400, 400)
const svg = d3.select(svg_actual);
const startingPoint = svg.append('circle')
.attr('cx', startX)
.attr('cy', startY)
.attr('r', radius)
.style('stroke', 'black')
.style('fill', 'white');
let walker = svg.append('circle')
.attr('cx', startX)
.attr('cy', startY)
.attr('r', radius)
.style('fill', 'black');
function step() {
let axis = Math.random() < .5 ? 'cx' : 'cy';
let dir = Math.random() < .5 ? -1*stepSize : stepSize;
walker
.transition()
.attr(axis,parseInt(walker.attr(axis))+dir)
.duration(stepDur)
.delay(stepDur)
.on('end', step);
svg.insert('circle',':first-child')
.attr('cx', walker.attr('cx'))
.attr('cy', walker.attr('cy'))
.attr('r', radius)
.style('fill', trailColor)
.style('opacity', trailOpacity);
}
step();
return svg_actual;
}