JSFiddle - React, Tailwind, and code Playground

by Heena Mahour

HTML

<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>

JavaScript

var sample_data = [
    { "value": 100, "parent": "A", "child": "apple"},
    { "value": 50, "parent": "B", "child": "box"},
    {"value": 30, "parent": "A", "child": "ant"},
    { "value": 20, "parent": "A", "child": "antelope"},
    { "value": 10, "parent": "C", "child": "cat1"},
    { "value": 20, "parent": "C", "child": "cat2"}
  ]

  var visualization = d3plus.viz()
    .container("#viz")
    .data(sample_data)
    .type("tree_map")
    .id(["parent","child"])
    .size("value")
   
    .draw()