TreemapWithLegends

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    div#treemap {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

.node-label {
	padding: 4px;
	margin: 0px;
  color: #fff;
}
.title-top{
	font-size: 12px;
}
.small-text{
	font-size: 8px;
}
    
span.text-right{
	text-align: right;
    position: absolute;
    right: 2px;
}
.node-value {
  color: rgba(0,0,0,0.8);
  font-size: 9px;
  margin-top: 1px;
}

</style>
</head>

<body>
  <div id="treemap">
  </div>
  <script>
    // Feel free to change or delete any of the code you see in this editor! 
    var data =[{id: "etf",value: 0,assets: '$20.86',type:'Equity',percentage: '-20.34%',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer1", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer2", value: 50,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer3", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer4", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer5", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer6", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer7", value: 60,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer8", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer9", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer10", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer11", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer12", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer13", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer14", value: 50,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer15", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer16", value: 20,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer17", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer28", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer31", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer42", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer115", value: 40,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'}
];
    var color = d3.scaleOrdinal()
    .range(d3.schemeCategory10
        .map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
    
    var width = 987, height = 400;
  
    var treemap = d3.treemap()
    .size([width, height])
    .padding(1)
    .round(true);
    var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

var root = stratify(data)
      .sum(function(d) { return d.value ? 1 : 0; })
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

treemap(root);
    
    
  var rootDivs = d3.select("div#treemap")
    .selectAll(".node")
    .data(root.leaves()) 
    .enter().append("div")
      .attr("class", "node")
      .attr("title", function(d) { return d.id; })
      .style("left", function(d) { return d.x0 + "px"; })
      .style("top", function(d) { return d.y0 + "px"; })
      .style("width", function(d) { return d.x1 - d.x0 + "px"; })
      .style("height", function(d) { return d.y1 - d.y0 + "px"; })
      .style("background", function(d) { 
      	if(d.data.percentage >= 0){
          return "#00bb00";
        }else{
          return "#950410";
        }
      });
    
    var containerDiv= rootDivs.append("div");
    
    var topRowP = containerDiv
  		.append('p')
      .attr("class", "node-label title-top");
    	
   topRowP.append('span')
      .text(function(d) { return d.data.short});
    
   topRowP.append('span')
   .classed('text-right',true)
      .text(function(d) { return d.data.percentage+'%'});
    
    containerDiv.append('p')
      .attr("class", "node-label small-text")
      .text(function(d) { return d.data.info});
    
    containerDiv.append('p')
      .attr("class", "node-label small-text")
      .text(function(d) { return d.data.type});
    
    containerDiv.append('p')
      .attr("class", "node-label small-text")
      .text(function(d) { return 'Total Assets ' +d.data.assets});
     
  
    
  </script>
</body>

https://d3js.org/d3.v4.min.js