davelandry/README.md

## README.md

      
    Raw
  

              README.md
            
          
    By passing D3plus a list of node positions and connections, a Network can be created and data can be mapped to the size of each node.
Featured on D3plus.org

  
## index.html
<!doctype html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="//d3plus.org/js/d3.js"></script>

<!-- load D3plus after D3js -->
<script src="//d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>

  // create sample dataset
  var sample_data = [
    {"name": "alpha", "size": 10},
    {"name": "beta", "size": 12},
    {"name": "gamma", "size": 30},
    {"name": "delta", "size": 26},
    {"name": "epsilon", "size": 12},
    {"name": "zeta", "size": 26},
    {"name": "theta", "size": 11},
    {"name": "eta", "size": 24}
  ]

  // create list of node positions
  var positions = [
    {"name": "alpha", "x": 10, "y": 15},
    {"name": "beta", "x": 12, "y": 24},
    {"name": "gamma", "x": 16, "y": 18},
    {"name": "delta", "x": 26, "y": 21},
    {"name": "epsilon", "x": 13, "y": 4},
    {"name": "zeta", "x": 31, "y": 13},
    {"name": "theta", "x": 19, "y": 8},
    {"name": "eta", "x": 24, "y": 11}
  ]

  // create list of node connections
  var connections = [
    {"source": "alpha", "target": "beta"},
    {"source": "alpha", "target": "gamma"},
    {"source": "beta", "target": "delta"},
    {"source": "beta", "target": "epsilon"},
    {"source": "zeta", "target": "gamma"},
    {"source": "theta", "target": "gamma"},
    {"source": "eta", "target": "gamma"}
  ]

  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .type("network")    // visualization type
    .data(sample_data)  // sample dataset to attach to nodes
    .nodes(positions)   // x and y position of nodes
    .edges(connections) // list of node connections
    .size("size")       // key to size the nodes
    .id("name")         // key for which our data is unique on
    .draw()             // finally, draw the visualization!

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<meta charset="utf-8">

	<!-- load D3js -->
	<script src="//d3plus.org/js/d3.js"></script>

	<!-- load D3plus after D3js -->
	<script src="//d3plus.org/js/d3plus.js"></script>

	<!-- create container element for visualization -->
	<div id="viz"></div>

	<script>

	// create sample dataset
	var sample_data = [
	{"name": "alpha", "size": 10},
	{"name": "beta", "size": 12},
	{"name": "gamma", "size": 30},
	{"name": "delta", "size": 26},
	{"name": "epsilon", "size": 12},
	{"name": "zeta", "size": 26},
	{"name": "theta", "size": 11},
	{"name": "eta", "size": 24}
	]

	// create list of node positions
	var positions = [
	{"name": "alpha", "x": 10, "y": 15},
	{"name": "beta", "x": 12, "y": 24},
	{"name": "gamma", "x": 16, "y": 18},
	{"name": "delta", "x": 26, "y": 21},
	{"name": "epsilon", "x": 13, "y": 4},
	{"name": "zeta", "x": 31, "y": 13},
	{"name": "theta", "x": 19, "y": 8},
	{"name": "eta", "x": 24, "y": 11}
	]

	// create list of node connections
	var connections = [
	{"source": "alpha", "target": "beta"},
	{"source": "alpha", "target": "gamma"},
	{"source": "beta", "target": "delta"},
	{"source": "beta", "target": "epsilon"},
	{"source": "zeta", "target": "gamma"},
	{"source": "theta", "target": "gamma"},
	{"source": "eta", "target": "gamma"}
	]

	// instantiate d3plus
	var visualization = d3plus.viz()
	.container("#viz") // container DIV to hold the visualization
	.type("network") // visualization type
	.data(sample_data) // sample dataset to attach to nodes
	.nodes(positions) // x and y position of nodes
	.edges(connections) // list of node connections
	.size("size") // key to size the nodes
	.id("name") // key for which our data is unique on
	.draw() // finally, draw the visualization!

	</script>