import * as d3 from 'd3'; export default () => { // defaults const options = { width: 475, height: 500, radius: 10 }; // start const poll = selection => { const xScale = d3.scaleLinear().domain([ 0, 100 ]).range([ 0, options.width ]); const minWidth = options.radius; const maxWidth = options.width - options.radius; const circles = selection.selectAll('circle'); circles.transition() .duration(2000) .delay((d, i) => (i * 2)) .attr('cx', d => (d.x = Math.max(minWidth, Math.min(maxWidth, xScale(d.cumul - Math.random() * d.score))))) .on('end', (d, i) => { if (circles.size() === i + 1) options.setData({ continue: true }); }); }; // "setter" poll.options = input => { Object.assign(options, input); return poll; }; return poll; };