lewisacidic/index.html

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

<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.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"}
  ]

<style>
  a#google {
    background-color: #cc0000;
    color: white;
    display: block;
    font-size: 24px;
    margin: 50px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
  }

</style>
  var htmlButton = "<a id='google' href='http://www.google.com' target='_blank'>Click here to go to Google</a>"

  // 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
    .tooltip({"html": htmlButton})
    .id("name")         // key for which our data is unique on
    .draw()             // finally, draw the visualization!

</script>
	<!doctype html>
	<meta charset="utf-8">

	<script src="http://www.d3plus.org/js/d3.js"></script>
	<script src="http://www.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"}
	]

	<style>
	a#google {
	background-color: #cc0000;
	color: white;
	display: block;
	font-size: 24px;
	margin: 50px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	}

	</style>
	var htmlButton = "<a id='google' href='http://www.google.com' target='_blank'>Click here to go to Google</a>"

	// 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
	.tooltip({"html": htmlButton})
	.id("name") // key for which our data is unique on
	.draw() // finally, draw the visualization!

	</script>