Using the .size( ) method enables the nodes in Rings to be sized by a value in the data.
Featured on D3plus.org
Using the .size( ) method enables the nodes in Rings to be sized by a value in the data.
Featured on D3plus.org
<!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> |