User Interface Elements have some advanced behavior that enable custom callback functions, data labels, titles, and the ability to specify the form type used.
Featured on D3plus.org
User Interface Elements have some advanced behavior that enable custom callback functions, data labels, titles, and the ability to specify the form type used.
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 = [ | |
{"value": 100, "name": "alpha", "weight": 80}, | |
{"value": 70, "name": "beta", "weight": 43}, | |
{"value": 40, "name": "gamma", "weight": 64}, | |
{"value": 15, "name": "delta", "weight": 20}, | |
{"value": 5, "name": "epsilon", "weight": 92}, | |
{"value": 1, "name": "zeta", "weight": 35} | |
]; | |
var visualization = d3plus.viz() | |
.container("#viz") | |
.data(sample_data) | |
.type("tree_map") | |
.id("name") | |
.color("name") | |
.size("value") | |
.ui([ | |
{ | |
"method" : function(value){ | |
alert(value); | |
}, | |
"label": "Alert", | |
"type": "button", | |
"value" : ["Hello"] | |
}, | |
{ | |
"method" : "color", | |
"type": "drop", | |
"value" : [{"Random": "name"}, {"Weight Value": "weight"}] | |
} | |
]) | |
.draw(); | |
</script> |