Skip to content

Instantly share code, notes, and snippets.

@davelandry

davelandry/README.md

Last active August 22, 2016 15:23
Show Gist options
  • Save davelandry/10211654 to your computer and use it in GitHub Desktop.
Save davelandry/10211654 to your computer and use it in GitHub Desktop.
Download ZIP
Rings Sized by Data
Raw
README.md

Using the .size( ) method enables the nodes in Rings to be sized by a value in the data.

Featured on D3plus.org

Raw
index.html
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var sample_data = [
{"name": "alpha", "value": 20},
{"name": "beta", "value": 12},
{"name": "gamma", "value": 30},
{"name": "delta", "value": 26},
{"name": "epsilon", "value": 30},
{"name": "zeta", "value": 30},
{"name": "theta", "value": 11},
{"name": "eta", "value": 24}
]
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 visualization = d3plus.viz()
.container("#viz")
.type("rings")
.data(sample_data)
.id("name")
.size("value")
.edges(connections)
.focus("alpha")
.draw()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment