Treemap with D3plus

by Heena Mahour

HTML

<script src="http://d3plus.org/js/d3plus.js"></script>
<link rel="stylesheet" href="http://d3plus.org/css/d3plus.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<div id="viz"></div>

JavaScript

var geoData =[
    {"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 groupData = ["name","group"];
        var colorParam= "value";
        var sizeMeasure = "value";
var f=1;
        var visualization = d3plus.viz()
            .container("#viz")
            .data(geoData)
            .type("tree_map")
            .id(groupData) // grouping entites here
           // .size("Exposure") // measure values here
            .color({
                "range": ["#D91E18","#006442"],
                "heatmap":  ["#D91E18","#006442"],
                "value": colorParam
            })
            .size({
                "threshold": true,
                "value" : sizeMeasure
            })
            .data({padding: 2})
            .messages({
                "value" : " Initializing, please wait .. ", // can specify loading messages here
                "padding" : 2,
                "style" : "large",
                "font" :{
                    "size" : 30
                }
            })
         //   .depth(0)
    
            .tooltip({
                "anchor" : "bottom center"
            })
//.mouse()
            .text({
                   "name":function(d){
                       var current_id = visualization.id();
                       return d.name;
                   },
                   "group": function(d){
                  
                   if(d.d3plus.depth ==1) f=2
              //     window.open('https://www.google.com')
                   
                       var current_id = visualization.id();
                       return d.group;
                   }
            })
            
         
            
            ///////////draw()
            
 ...