Treemap with D3plus

by chaloisaza

HTML

<script src="https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"></script>
<div id="downloads-publications"></div>

JavaScript

var geoData = [{
         "value": 40359,
         "name": "Bing",
     },
     {
         "value": 185489,
         "name": "Facebook",
         "group": "group 1"
     },
     {
         "value": 3712118,
         "name": "Google",
         "group": "group 1"
     },
     {
         "value": 91257,
         "name": "IDB Blogs",
         "group": "group 1"
     },
     {
         "value": 268514,
         "name": "IDB Landing Page",
         "group": "group 1"
     },
     {
         "value": 60878,
         "name": "IDB MOOCs",
         "group": "group 1"
     },
     {
         "value": 2741813,
         "name": "IDB Publications",
         "group": "group 1"
     },
     {
         "value": 79309,
         "name": "IDB RES",
         "group": "group 1"
     },
     {
         "value": 2177,
         "name": "Indes Virtual",
         "group": "group 1"
     },
     {
         "value": 69649,
         "name": "INTAL",
         "group": "group 1"
     },
     {
         "value": 8766,
         "name": "LinkedIn",
         "group": "group 1"
     },
     {
         "value": 593965,
         "name": "Others",
         "group": "group 1"
     },
     {
         "value": 8236,
         "name": "RePec",
         "group": "group 1"
     },
     {
         "value": 29475,
         "name": "Twitter",
         "group": "group 1"
     },
     {
         "value": 18121,
         "name": "Yahoo",
         "group": "group 1"
     }
 ]

 var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(217, 30, 24)", geoData.length)
 console.log(colorArray, geoData.length);
 var groupData = ["name", "value"];
 var colorParam = "value";
 var sizeMeasure = "value";
 var index = 0;
 new d3plus.Treemap()
     .data(geoData)
     .groupBy(["value", "name"])
     .sum("value")
     .legend(false)
     .select("#downloads-publications")
     /*.shapeConfig({
         fill: function(d) {
         	console.log( colorArray[index++]);
           return colorArray[index++];
         }
     ...