react + dat.gui

index.js

      var KielerOptions = function () {
        this.spacing = 15.0;
        this.apply = function () {
          var event = new CustomEvent("kieler", { detail: this });
          window.dispatchEvent(event);
        };
      };

the-graph.js

  TheGraph.Graph = React.createClass({
    getInitialState: function() {
      return {
        graph: this.props.graph
      };
    },
    componentDidUpdate: function (prevProps, prevState, rootNode) {
      console.log('graph updated', this.state.graph);
    },
    componentDidMount: function () {
      window.addEventListener('kieler', function (event) {
        var layoutOptions = event.detail;

        kieler(this.state.graph, layoutOptions, function (g) {
          this.setState({graph: g});
        }.bind(this));
      }.bind(this));
    },
    componentWillMount: function () {
      // xhr to kieler and update the graph
      kieler(this.state.graph, {spacing: 15}, function (g) {
        this.setState({graph: g});
      }.bind(this));
    },
...