micahstubbs/.block

## .block
border: no
height: 960
license: MIT
title: "react-force-graph all modes, generated data"

## README.md

      
    Raw
  

              README.md
            
          
    this iteration makes the code nice to work with

the original example from https://github.com/vasturiano/react-force-graph/blob/master/example/all-modes/index.html

  
## index.html
<head>
  <style> body { margin: 0; } </style>
  <script src='//unpkg.com/react@16/umd/react.production.min.js'></script>
  <script src='//unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>
  <script src='//unpkg.com/babel-standalone'></script>
  <script src='//unpkg.com/react-force-graph'></script>
  <!--<script src='react-force-graph.js'></script>-->
  <script src='random-data.js'></script>
</head>
<body>
  <div id='graph'></div>
  <script src='vis.jsx' type='text/jsx'>
  </script>
</body>

## preview.png

      
    Raw
  

              preview.png
            
          
## preview.xcf

      
    Raw
  

              preview.xcf
            
          
            View raw
        
    
## random-data.js
function genRandomTree(N = 300) {
  return {
    nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => ({
      source: id,
      target: Math.round(Math.random() * (id-1))
    }))
  };
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## vis.jsx
const comps = [
  ForceGraph.ForceGraph2D,
  ForceGraph.ForceGraph3D,
  ForceGraph.ForceGraphVR
]
const compWidth = window.innerWidth / comps.length

ReactDOM.render(
  <div style={{ display: 'flex' }}>
    {comps.map(Comp => <Comp width={compWidth} graphData={genRandomTree()} />)}
  </div>,
  document.getElementById('graph')
)
	border: no
	height: 960
	license: MIT
	title: "react-force-graph all modes, generated data"
	<head>
	<style> body { margin: 0; } </style>
	<script src='//unpkg.com/react@16/umd/react.production.min.js'></script>
	<script src='//unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>
	<script src='//unpkg.com/babel-standalone'></script>
	<script src='//unpkg.com/react-force-graph'></script>
	<!--<script src='react-force-graph.js'></script>-->
	<script src='random-data.js'></script>
	</head>
	<body>
	<div id='graph'></div>
	<script src='vis.jsx' type='text/jsx'>
	</script>
	</body>
	function genRandomTree(N = 300) {
	return {
	nodes: [...Array(N).keys()].map(i => ({ id: i })),
	links: [...Array(N).keys()]
	.filter(id => id)
	.map(id => ({
	source: id,
	target: Math.round(Math.random() * (id-1))
	}))
	};
	}
	const comps = [
	ForceGraph.ForceGraph2D,
	ForceGraph.ForceGraph3D,
	ForceGraph.ForceGraphVR
	]
	const compWidth = window.innerWidth / comps.length

	ReactDOM.render(
	<div style={{ display: 'flex' }}>
	{comps.map(Comp => <Comp width={compWidth} graphData={genRandomTree()} />)}
	</div>,
	document.getElementById('graph')
	)