JSFiddle - React, Tailwind, and code Playground

by kasimsert

HTML

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

JavaScript

app = {
    	      "callback": function(data) {
    	        var html_return = "<p> thello world";
    	        console.log(data);
    	        return html_return;
    	      },
    	      "url": function(id) {
    	        console.log(id);
    	        return "/line.html";
    	      }
   } 

var sample_data = [
      {"value": 100, "name": "alpha", "group": "group 1"},
    {"value": 70, "name": "beta", "group": "group 2"},
    {"value": 40, "name": "gamma", "group": "group 2"},
    {"value": 15, "name": "delta", "group": "group 2"},
    {"value": 5, "name": "epsilon", "group": "group 1"},
    {"value": 1, "name": "zeta", "group": "group 1"}
  ]

  var visualization = d3plus.viz()
    .container("#viz")
    .data(sample_data)
    .type("tree_map")
     .color('group') 
    .id(["group","name"])
    .size("value")
      .tooltip({"html": app})
     .order({value:'group',
            sort:'asc'
           })
  .size({"threshold": false})
  .depth(2)
    .draw()