sxywu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    React + D3 exploration with the force layout:

React for structure
D3 for data calculation
React for rendering

Pro:

Clean, easy to reason about

Con:

Goes through lifecycle for every tick -> will not scale
Cannot use D3 functions that need access to DOM

Use case: React app with a small and simple visualization

The original using only D3: Enter-Update-Exit in Force Layout
The Force with React + D3, Approach #1
The Force with React + D3, Approach #2
The Force with React + D3, Approach #3

  
## example.css
body {
  font-family: Helvetica;
}

.update {
  color: #888888;
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  margin: 10px;
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 3px;
}

.node circle {
  fill: #888888;
  stroke: #fff;
  stroke-width: 2px;
}

.node text {
  fill: #888888;
  stroke: none;
  font-size: .6em;
}

.link {
  stroke: #cccccc;
  stroke-opacity: .6;
}

## generate_data.js
function randomData(nodes, width, height) {
  var oldNodes = nodes;
  // generate some data randomly
  nodes = _.chain(_.range(_.random(10, 30)))
    .map(function() {
      var node = {};
      node.key = _.random(0, 30);
      node.size = _.random(4, 10);

      return node;
    }).uniq(function(node) {
      return node.key;
    }).value();

  if (oldNodes) {
    var add = _.initial(oldNodes, _.random(0, oldNodes.length));
    add = _.rest(add, _.random(0, add.length));

    nodes = _.chain(nodes)
      .union(add).uniq(function(node) {
        return node.key;
      }).value();
  }

  links = _.chain(_.range(_.random(15, 35)))
    .map(function() {
      var link = {};
      link.source = _.random(0, nodes.length - 1);
      link.target = _.random(0, nodes.length - 1);
      link.key = link.source + ',' + link.target;
      link.size = _.random(1, 3);

      return link;
    }).uniq((link) => link.key)
    .value();

  maintainNodePositions(oldNodes, nodes, width, height);

  return {nodes, links};
}

function maintainNodePositions(oldNodes, nodes, width, height) {
  var kv = {};
  _.each(oldNodes, function(d) {
    kv[d.key] = d;
  });
  _.each(nodes, function(d) {
    if (kv[d.key]) {
      // if the node already exists, maintain current position
      d.x = kv[d.key].x;
      d.y = kv[d.key].y;
    } else {
      // else assign it a random position near the center
      d.x = width / 2 + _.random(-150, 150);
      d.y = height / 2 + _.random(-25, 25);
    }
  });
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="https://fb.me/react-0.14.3.js"></script>
  <script src="https://fb.me/react-dom-0.14.3.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://underscorejs.org/underscore-min.js"></script>
  <script src="generate_data.js"></script>

  <link rel="stylesheet" href="example.css" type="text/css" />
</head>

<body>

<div id="main" />

<script type="text/babel">

var width = 960;
var height = 500;
var force = d3.layout.force()
  .charge(-300)
  .linkDistance(50)
  .size([width, height]);

var Graph = React.createClass({
  componentWillMount() {
    force.on('tick', () => {
      // after force calculation starts, call
      // forceUpdate on the React component on each tick
      this.forceUpdate()
    });
  },

  componentWillReceiveProps(nextProps) {
    // we should actually clone the nodes and links
    // since we're not supposed to directly mutate
    // props passed in from parent, and d3's force function
    // mutates the nodes and links array directly
    // we're bypassing that here for sake of brevity in example
    force.nodes(nextProps.nodes).links(nextProps.links);

    force.start();
  },

  render() {
    // use React to draw all the nodes, d3 calculates the x and y
    var nodes = _.map(this.props.nodes, (node) => {
      var transform = 'translate(' + node.x + ',' + node.y + ')';
      return (
        <g className='node' key={node.key} transform={transform}>
          <circle r={node.size} />
          <text x={node.size + 5} dy='.35em'>{node.key}</text>
        </g>
      );
    });
    var links = _.map(this.props.links, (link) => {
      return (
        <line className='link' key={link.key} strokeWidth={link.size}
          x1={link.source.x} x2={link.target.x} y1={link.source.y} y2={link.target.y} />
      );
    });

    return (
      <svg width={width} height={height}>
        <g>
          {links}
          {nodes}
        </g>
      </svg>
    );
  }
});

var App = React.createClass({
  getInitialState() {
    return {
      nodes: [],
      links: [],
    };
  },

  componentDidMount() {
    this.updateData();
  },

  updateData() {
    // randomData is loaded in from external file generate_data.js
    // and returns an object with nodes and links
    var newState = randomData(this.state.nodes, width, height);
    this.setState(newState);
  },

  render() {
    return (
      <div>
        <div className="update" onClick={this.updateData}>update</div>
        <Graph nodes={this.state.nodes} links={this.state.links} />
      </div>
    );
  },
});

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

</script>

</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	body {
	font-family: Helvetica;
	}

	.update {
	color: #888888;
	position:absolute;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	margin: 10px;
	cursor: pointer;
	border: 1px solid #999999;
	border-radius: 3px;
	}

	.node circle {
	fill: #888888;
	stroke: #fff;
	stroke-width: 2px;
	}

	.node text {
	fill: #888888;
	stroke: none;
	font-size: .6em;
	}

	.link {
	stroke: #cccccc;
	stroke-opacity: .6;
	}
	function randomData(nodes, width, height) {
	var oldNodes = nodes;
	// generate some data randomly
	nodes = _.chain(_.range(_.random(10, 30)))
	.map(function() {
	var node = {};
	node.key = _.random(0, 30);
	node.size = _.random(4, 10);

	return node;
	}).uniq(function(node) {
	return node.key;
	}).value();

	if (oldNodes) {
	var add = _.initial(oldNodes, _.random(0, oldNodes.length));
	add = _.rest(add, _.random(0, add.length));

	nodes = _.chain(nodes)
	.union(add).uniq(function(node) {
	return node.key;
	}).value();
	}

	links = _.chain(_.range(_.random(15, 35)))
	.map(function() {
	var link = {};
	link.source = _.random(0, nodes.length - 1);
	link.target = _.random(0, nodes.length - 1);
	link.key = link.source + ',' + link.target;
	link.size = _.random(1, 3);

	return link;
	}).uniq((link) => link.key)
	.value();

	maintainNodePositions(oldNodes, nodes, width, height);

	return {nodes, links};
	}

	function maintainNodePositions(oldNodes, nodes, width, height) {
	var kv = {};
	_.each(oldNodes, function(d) {
	kv[d.key] = d;
	});
	_.each(nodes, function(d) {
	if (kv[d.key]) {
	// if the node already exists, maintain current position
	d.x = kv[d.key].x;
	d.y = kv[d.key].y;
	} else {
	// else assign it a random position near the center
	d.x = width / 2 + _.random(-150, 150);
	d.y = height / 2 + _.random(-25, 25);
	}
	});
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script src="https://fb.me/react-0.14.3.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.js"></script>
	<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://underscorejs.org/underscore-min.js"></script>
	<script src="generate_data.js"></script>

	<link rel="stylesheet" href="example.css" type="text/css" />
	</head>

	<body>

	<div id="main" />

	<script type="text/babel">

	var width = 960;
	var height = 500;
	var force = d3.layout.force()
	.charge(-300)
	.linkDistance(50)
	.size([width, height]);

	var Graph = React.createClass({
	componentWillMount() {
	force.on('tick', () => {
	// after force calculation starts, call
	// forceUpdate on the React component on each tick
	this.forceUpdate()
	});
	},

	componentWillReceiveProps(nextProps) {
	// we should actually clone the nodes and links
	// since we're not supposed to directly mutate
	// props passed in from parent, and d3's force function
	// mutates the nodes and links array directly
	// we're bypassing that here for sake of brevity in example
	force.nodes(nextProps.nodes).links(nextProps.links);

	force.start();
	},

	render() {
	// use React to draw all the nodes, d3 calculates the x and y
	var nodes = _.map(this.props.nodes, (node) => {
	var transform = 'translate(' + node.x + ',' + node.y + ')';
	return (
	<g className='node' key={node.key} transform={transform}>
	<circle r={node.size} />
	<text x={node.size + 5} dy='.35em'>{node.key}</text>
	</g>
	);
	});
	var links = _.map(this.props.links, (link) => {
	return (
	<line className='link' key={link.key} strokeWidth={link.size}
	x1={link.source.x} x2={link.target.x} y1={link.source.y} y2={link.target.y} />
	);
	});

	return (
	<svg width={width} height={height}>
	<g>
	{links}
	{nodes}
	</g>
	</svg>
	);
	}
	});

	var App = React.createClass({
	getInitialState() {
	return {
	nodes: [],
	links: [],
	};
	},

	componentDidMount() {
	this.updateData();
	},

	updateData() {
	// randomData is loaded in from external file generate_data.js
	// and returns an object with nodes and links
	var newState = randomData(this.state.nodes, width, height);
	this.setState(newState);
	},

	render() {
	return (
	<div>
	<div className="update" onClick={this.updateData}>update</div>
	<Graph nodes={this.state.nodes} links={this.state.links} />
	</div>
	);
	},
	});

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

	</script>

	</body>