Skip to content

Instantly share code, notes, and snippets.

@lewisacidic

lewisacidic/index.html

Created September 11, 2014 01:33
Show Gist options
  • Save lewisacidic/42372e59ff2ef6714015 to your computer and use it in GitHub Desktop.
Save lewisacidic/42372e59ff2ef6714015 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
<style>
a#google {
background-color: #cc0000;
color: white;
display: block;
font-size: 24px;
margin: 50px;
padding: 10px;
text-align: center;
text-decoration: none;
}
</style>
<div id="viz"></div>
<script>
var sample_data = [
{"value": 100, "name": "alpha"},
{"value": 70, "name": "beta"},
{"value": 40, "name": "gamma"},
{"value": 15, "name": "delta"},
{"value": 5, "name": "epsilon"},
{"value": 1, "name": "zeta"}
]
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}
]
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"}
]
var htmlButton = "<a id='google' href='http://www.google.com' target='_blank'>Click here to go to Google</a>"
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.nodes(positions)
.edges(connections)
.id("name")
.size("value")
.tooltip({"html": htmlButton})
.type("network")
.draw()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment