message: saving changes so i can pull from organization
diff: @@ -2,20 +2,25 @@ import React, { useRef } from 'react';
  import * as d3 from 'd3';
  function AtomTree(props) {
  - console.log('initial atom state in atomTree', props);
  + console.log('initial atom state in atomTree', props.snapshotHistory);
  + // legend
  const svg = d3.select('#canvas');
  - svg
  - .append('circle')
  - .attr('cx', 1500)
  - .attr('cy', 1000)
  - .attr('r', 300)
  - .style('stroke', 'white');
  + // set the heights and width of the tree to be passed into treeMap
  + const width = 500;
  + const height = 1500;
  +
  + // initial state taken from backgroundScript
  + const atomState = props.snapshotHistory;
  +
  + // creating the tree map
  + const treeMap = d3.tree().nodeSize([width, height]);
  + // creating the nodes of the tree
  + const atomNodes = d3.hierarchy(atomState);
  return (
  <div className='AtomTree'>
  <svg id='canvas'></svg>
  - <h1>hello</h1>
  </div>
  );
  }
  