alexandersimoes/sample_network.html

## sample_network.html
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Networks with D3plus</title>

  <!-- load D3plus CSS -->
  <link href="/css/d3plus.css" rel="stylesheet" type="text/css" />

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

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

<body>
  <div id="viz"></div>

  <script>

    var edges = [
       {
          "target": 1,
          "source": 2,
          "strength": 5.234897
       },
       {
          "source": 1,
          "target": 4,
          "strength": 2.34987
       },
       {
          "source": 4,
          "target": 5,
          "strength": 4.12087
       },
       {
          "source": 4,
          "target": 3,
          "strength": 3.09875
       }
    ]

    var attrs = {
    	1: {"name": "one"},
    	2: {"name": "two"},
    	3: {"name": "three"},
    	4: {"name": "four"},
    	5: {"name": "five"},
    	6: {"name": "six"}
    }

    /* Now here's where we actually create the network */
    var visualization = d3plus.viz()
      .container("#viz")  // container DIV to hold the visualization
      .type("network")    // visualization type
      .attrs(attrs)       // our list of name attributes
      .text("name")       // key to use for display text
      .edges(edges)       // the edges we'll use to create our network
      .draw()             // finally, draw the visualization!

  </script>
</body>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Networks with D3plus</title>

	<!-- load D3plus CSS -->
	<link href="/css/d3plus.css" rel="stylesheet" type="text/css" />

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

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

	<body>
	<div id="viz"></div>

	<script>

	var edges = [
	{
	"target": 1,
	"source": 2,
	"strength": 5.234897
	},
	{
	"source": 1,
	"target": 4,
	"strength": 2.34987
	},
	{
	"source": 4,
	"target": 5,
	"strength": 4.12087
	},
	{
	"source": 4,
	"target": 3,
	"strength": 3.09875
	}
	]

	var attrs = {
	1: {"name": "one"},
	2: {"name": "two"},
	3: {"name": "three"},
	4: {"name": "four"},
	5: {"name": "five"},
	6: {"name": "six"}
	}

	/* Now here's where we actually create the network */
	var visualization = d3plus.viz()
	.container("#viz") // container DIV to hold the visualization
	.type("network") // visualization type
	.attrs(attrs) // our list of name attributes
	.text("name") // key to use for display text
	.edges(edges) // the edges we'll use to create our network
	.draw() // finally, draw the visualization!

	</script>
	</body>