understanding-sampling/src/js/d3/poll-sort.js

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;
};