milroc · June 5, 2016 22:00
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
  <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>

 <body>

 <div id="main" />

 <script type="text/babel">
 function endall(transition, callback) {
  let n = 0;
  transition
    .each(function() { ++n; })
    .each('end', function() { if (!--n) callback.apply(this, arguments); });
 }// endall


 // Number of clocks on the page
 let spinnerCounter = 0;
 class GooeySpinner extends React.Component {
  constructor(props) {
    super(props);
    this.spinnerID = spinnerCounter++;
    this._repeat = this._repeat.bind(this);
    this._getFilterID = this._getFilterID.bind(this);
  }

  componentDidMount() {
    const {width, steps, color} = this.props;
    // Create scale
    this.radialScale = d3.scale.linear()
      .domain([-1.5, 1.5])
      .range([-width/2, width/2]);
    // color from http://colrd.com/palette/24070/
    this.colorScale = d3.scale.ordinal().range(color);

    this._flyCirclesContainer = d3.select(ReactDOM.findDOMNode(this.refs.flyCircles));
    this._flyCircles = this._flyCirclesContainer.selectAll('.flyCircle')
      .data(d3.range(steps).map((num) => (num / steps ) * (2 * Math.PI)));
    this._flyCircles.enter()
      .append('circle')
        .attr({
          class: 'flyCircle',
          cx: 0,
          cy: 0,
          r: 4,
        })
        .style('fill', (d, i) => this.colorScale(i))
        .call(this._repeat);
  }

  _repeat() {
    const {steps} = this.props;
    const dur = 1000;
    const del = 100;
    this._flyCircles
      .transition('outward')
        .duration(dur)
        .delay((_,i) => i * del)
        .attr({
          cx: (d) => this.radialScale(Math.cos(d)),
          cy: (d) => this.radialScale(Math.sin(d)),
        })
      .transition('inward')
        .duration(dur)
        .delay((d,i) => (steps * 1.2) * del + i * del)
        .attr('cx', 0)
        .attr('cy', 0)
      .call(endall, this._repeat);

  }

  _getFilterID() {
    return `gooey-${this.spinnerID}`;
  }

  render() {
    const {width, height, margin} = this.props;

    return (
      <div>
        <svg width={width} height={height}>
          <defs>
            <filter id={this._getFilterID()}>
              <feGaussianBlur
                in="SourceGraphic"
                stdDeviation={4}
                result="blur"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              />
            </filter>
          </defs>
          <g
            filter={`url(#${this._getFilterID()})`}
            transform={`translate(${width/2}, ${height/2})`}>
            <circle
              className="centerCircle"
              cx={0}
              cy={0}
              r={4}
              fill="#513700"
            />
            <g ref="flyCircles" />
          </g>
        </svg>
      </div>
    );
  }
 }
 GooeySpinner.defaultProps = {
  width: 60,
  height: 60,
  steps: 12,
  color: [
    '#a50026',    '#d73027',    '#f46d43',
    '#fdae61',    '#fee08b',
    '#d9ef8b',    '#a6d96a',    '#66bd63',
    '#1a9850',    '#006768',    '#00425d',
  ],
 };

 class App extends React.Component {
  render() {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flexstart',
        flexWrap: 'wrap',
      }}>
        {d3.range(1).map((key) => <GooeySpinner key={key} />)}
      </div>
    );
  }
 }

 ReactDOM.render(
  <App />,
  document.getElementById('main') 
 );

 </script>

 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
	<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>

	<div id="main" />

	<script type="text/babel">
	function endall(transition, callback) {
	let n = 0;
	transition
	.each(function() { ++n; })
	.each('end', function() { if (!--n) callback.apply(this, arguments); });
	}// endall


	// Number of clocks on the page
	let spinnerCounter = 0;
	class GooeySpinner extends React.Component {
	constructor(props) {
	super(props);
	this.spinnerID = spinnerCounter++;
	this._repeat = this._repeat.bind(this);
	this._getFilterID = this._getFilterID.bind(this);
	}

	componentDidMount() {
	const {width, steps, color} = this.props;
	// Create scale
	this.radialScale = d3.scale.linear()
	.domain([-1.5, 1.5])
	.range([-width/2, width/2]);
	// color from http://colrd.com/palette/24070/
	this.colorScale = d3.scale.ordinal().range(color);

	this._flyCirclesContainer = d3.select(ReactDOM.findDOMNode(this.refs.flyCircles));
	this._flyCircles = this._flyCirclesContainer.selectAll('.flyCircle')
	.data(d3.range(steps).map((num) => (num / steps ) * (2 * Math.PI)));
	this._flyCircles.enter()
	.append('circle')
	.attr({
	class: 'flyCircle',
	cx: 0,
	cy: 0,
	r: 4,
	})
	.style('fill', (d, i) => this.colorScale(i))
	.call(this._repeat);
	}

	_repeat() {
	const {steps} = this.props;
	const dur = 1000;
	const del = 100;
	this._flyCircles
	.transition('outward')
	.duration(dur)
	.delay((_,i) => i * del)
	.attr({
	cx: (d) => this.radialScale(Math.cos(d)),
	cy: (d) => this.radialScale(Math.sin(d)),
	})
	.transition('inward')
	.duration(dur)
	.delay((d,i) => (steps * 1.2) * del + i * del)
	.attr('cx', 0)
	.attr('cy', 0)
	.call(endall, this._repeat);

	}

	_getFilterID() {
	return `gooey-${this.spinnerID}`;
	}

	render() {
	const {width, height, margin} = this.props;

	return (
	<div>
	<svg width={width} height={height}>
	<defs>
	<filter id={this._getFilterID()}>
	<feGaussianBlur
	in="SourceGraphic"
	stdDeviation={4}
	result="blur"
	/>
	<feColorMatrix
	in="blur"
	mode="matrix"
	values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
	/>
	</filter>
	</defs>
	<g
	filter={`url(#${this._getFilterID()})`}
	transform={`translate(${width/2}, ${height/2})`}>
	<circle
	className="centerCircle"
	cx={0}
	cy={0}
	r={4}
	fill="#513700"
	/>
	<g ref="flyCircles" />
	</g>
	</svg>
	</div>
	);
	}
	}
	GooeySpinner.defaultProps = {
	width: 60,
	height: 60,
	steps: 12,
	color: [
	'#a50026', '#d73027', '#f46d43',
	'#fdae61', '#fee08b',
	'#d9ef8b', '#a6d96a', '#66bd63',
	'#1a9850', '#006768', '#00425d',
	],
	};

	class App extends React.Component {
	render() {
	return (
	<div style={{
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'flexstart',
	flexWrap: 'wrap',
	}}>
	{d3.range(1).map((key) => <GooeySpinner key={key} />)}
	</div>
	);
	}
	}

	ReactDOM.render(
	<App />,
	document.getElementById('main')
	);

	</script>

	</body>