Built with blockbuilder.org
forked from lmantz's block: tree map practice format
xxxxxxxxxx
<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", "group": "group 1"},
{"value": 70, "name": "beta", "group": "group 1"},
{"value": 40, "name": "gamma", "group": "group 1"},
{"value": 15, "name": "delta", "group": "group 1"},
{"value": 1, "name": "epsilon", "group": "group 2"},
{"value": 1, "name": "zeta", "group": "group 2"},
{"value": 1, "name": "alpha", "group": "group 2"},
{"value": 1, "name": "beta", "group": "group 2"},
{"value": 1, "name": "gamma", "group": "group 2"},
{"value": 1, "name": "dedsvlta", "group": "group 2"},
{"value": 1, "name": "oug", "group": "group 2"},
{"value": 1, "name": "asdf", "group": "group 2"},
{"value": 1, "name": "wer", "group": "group 2"},
{"value": 1, "name": "rtn", "group": "group 2"},
{"value": 1, "name": "sdf", "group": "group 2"},
{"value": 1, "name": "delwrta", "group": "group 2"},
{"value": 1, "name": "iky", "group": "group 2"},
{"value": 1, "name": "ul", "group": "group 2"},
{"value": 1, "name": "b,c", "group": "group 2"},
{"value": 1, "name": "xc", "group": "group 2"},
{"value": 1, "name": "cvn", "group": "group 2"},
{"value": 1, "name": "ikl", "group": "group 2"},
{"value": 1, "name": "t34", "group": "group 2"},
{"value": 1, "name": "vbn", "group": "group 2"}, {"value": 1, "name": "delta", "group": "group 2"},
{"value": 1, "name": "er", "group": "group 2"},
{"value": 1, "name": "ert", "group": "group 2"},
{"value": 1, "name": "qw", "group": "group 2"},
{"value": 1, "name": "we", "group": "group 2"}
]
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id(["group","name"])
.size("value")
.draw()
</script>
https://d3plus.org/js/d3.js
https://d3plus.org/js/d3plus.js