Old school D3 from simpler times

All examples By author By category About

arimocro

Full window Github gist

tree map practice format

Built with blockbuilder.org

forked from lmantz's block: tree map practice format

<!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", "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