React V16 + D3 + Force

Attempting to use D3 with React v16

forked from Fasani's block: React V16 + D3 + Force

forked from hshoff's block: React V16 + D3 + Force

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/react@next/umd/react.production.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/react-dom@next/umd/react-dom.production.min.js" charset="utf-8"></script>

<script src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.0/create-react-class.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

var dataGlobal = d3.range(size).map(function() {
  return { r: Math.floor(Math.random() * 8 + 2) };
});

var start = new Date();
var time = 0;
var ticks = 0;

var force = d3.layout
  .force()
  .size([width, height])
  .nodes(dataGlobal)
  .charge(function(d) {
    return d.r * d.r * charge;
  })
  .start();

var BubbleChart = createReactClass({
  displayName: "BubbleChart",
  render: function() {
    return (
      <Chart width={this.props.width} height={this.props.height}>
        <DataSeries data={this.props.data} />
      </Chart>
    );
  }
});

var DataSeries = createReactClass({
  displayName: "DataSeries",
  getInitialState: function() {
    return { data: this.props.data };
  },

componentDidMount: function() {
    var _self = this;
    force.on("tick", function() {
      var renderStart = new Date();
      window.requestAnimationFrame(_self.tick);
      time += new Date() - renderStart;
      ticks++;
    });
  },

tick: function() {
    this.setState({ data: dataGlobal });
  },

render: function() {
    var circles = this.state.data.map(function(point, i) {
      return (
        <PureCircle
          key={i}
					x={point.x}
					y={point.y}
					r={point.r}
        />
      );
    });

return [...circles];
  }
});

var container = document.getElementById("container");
ReactDOM.render(
  <BubbleChart data={dataGlobal} height={height} width={width} />,
  container
);

force.on("end", function() {
  var totalTime = new Date() - start;
  console.log("Total Time:", totalTime);
  console.log("Render Time:", time);
  console.log("Ticks:", ticks);
  console.log("Average Time:", totalTime / ticks);
});
</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://unpkg.com/babel-standalone@6.26.0/babel.min.js

https://unpkg.com/react@next/umd/react.production.min.js

https://unpkg.com/react-dom@next/umd/react-dom.production.min.js

https://cdn.jsdelivr.net/npm/create-react-class@15.6.0/create-react-class.min.js

https://d3js.org/d3.v3.min.js