title: Neo4j/React: Parsing Neo4j Results for use in React
body: <p>Before I go down this rabbit trail I want to make sure I am heading down the right trail. The query from Neo4j is returning the following:  </p>
  
  <pre><code>"data": {
      "action": [
        {
          "action": "Changed",
          "timestamp": 1499348050000,
          "object": [
            {
              "filename": "C:/Users/Public/Desktop/word.doc"
            }
          ],
          "Second": [
            {
              "time": 1499348050
            }
          ]
        }
  </code></pre>
  
  <p>Now I would like to generate a Force Directed graph with the results above.  The action node would have lines to the object and second node. However, all the examples that I have reviewed have simple examples with static data that is split up into nodes and relationship; how convenient. Unfortunately, in the real world such convenience does not exists.  </p>
  
  <p>So the rabbit trail I am attempting to go down is to first parse the results into nodes and relationship.  However, I am not so sure how to go about doing that.  Please remember I am using React.  Any suggestions would be greatly appreciated.  I am taking this route of asking first before starting down a trail because before I would just venture and waste time.</p>
  
  <p>I found this code that I would like to use but not sure where to start (<a href="https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721" rel="nofollow noreferrer">https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721</a>):</p>
  
  <pre><code>class MyGraph extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          nodes: props.nodes,
        links: props.links
      };
    }
  
    componentDidMount() {
      this.force = d3.forceSimulation(this.state.nodes)
        .force("charge",
          d3.forceManyBody()
            .strength(this.props.forceStrength)
        )
        .force("link",
          d3.forceLink().distance(this.props.linkDistance).links(this.state.links)
        )
        .force("x", d3.forceX(this.props.width / 2))
        .force("y", d3.forceY(this.props.height / 2));
  
      this.force.on('tick', () =&gt; this.setState({
          links: this.state.links,
          nodes: this.state.nodes
      }));
    }
  
    componentWillUnmount() {
      this.force.stop();
    }
  
      render() {
      return (
          &lt;svg width={this.props.width} height={this.props.height}&gt;
          {this.state.links.map((link, index) =&gt;(
            &lt;line
              x1={link.source.x}
              y1={link.source.y}
              x2={link.target.x}
              y2={link.target.y}
              key={`line-${index}`}
              stroke="black" /&gt;
          ))}
          {this.state.nodes.map((node, index) =&gt;(
              &lt;circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/&gt;
          ))}
        &lt;/svg&gt;
      );
    }
  }
  
  MyGraph.defaultProps = {
    width: 300,
    height: 300,
    linkDistance: 30,
    forceStrength: -20
  };
  
  const nodeCount = 100;
  const nodes = [];
  for (let i = 0; i &lt; nodeCount; i++) {
    nodes.push({
      r: (Math.random() * 5 ) + 2,
      x: 0,
      y: 0
    });
  }
  
  const links = [];
  for (let i = 0; i &lt; nodeCount; i++) {
    let target = 0;
    do {
      target = Math.floor(Math.random() * nodeCount);
    } while(target == i)
    links.push({
      source: i,
      target
    });
  }
  
  console.log(links);
  
  ReactDOM.render(
    &lt;MyGraph nodes={nodes} links={links} /&gt;,
    document.getElementById('container')
  );
  </code></pre>