d3.treemap() non hierarchical data

by beaver71

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
    <g></g>
</svg>

CSS

rect {
  fill: #8d4705;
  opacity: 0.3;
  stroke: #FF0000;
  stroke-width: 2px;
}

text {
  stroke: #FF0000;
  stroke-width: 1px;
  font-family: 'Verdana';
  font-size: 12px;
}

JavaScript

var vWidth = 600;
var vHeight = 400;
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');

var csvString = 'content,count\n';
csvString += 'apple,10\n';
csvString += 'oranges,20\n';
csvString += 'strawberry,30\n';
csvString += 'pineapple,40\n';
csvString += 'kiwi,50\n';
// trasform in hierarchical
var data = d3.csvParse(csvString, function(d) {
  return {
    content: d.content,
    parent:"fruit",
    count: d.count,
  };
});
// add first element
data.unshift({content: "fruit", parent: "", count: undefined});
console.log("1",data);
var stratify = d3.stratify()
  .id(function(d) { return d.content; })
  .parentId(function(d) { return d.parent; });
var treeData = stratify(data);
// assign the name to each node
treeData.each(function(d) {
    d.name = d.id;
});
  
console.log("2",treeData);
drawViz(treeData, data);

function drawViz(vData, data) {
  // Declare d3 layout
  var vLayout = d3.treemap().size([vWidth, vHeight]).
  paddingOuter(3);
  // Layout + Data
  var vRoot = d3.hierarchy(vData).sum(function (d) {
  	return d.data.count;
  });
  var vNodes = vRoot.descendants();
  vLayout(vRoot);
  var vSlices = g.selectAll('rect').data(vNodes).enter().append('rect');
  // Draw on screen
  vSlices.attr('x', function (d) { return d.x0; })
    .attr('y', function (d) { return d.y0; })
    .attr('width', function (d) { return d.x1 - d.x0; })
    .attr('height', function (d) { return d.y1 - d.y0; });      
    
  g.selectAll('g').data(vNodes).enter()
  .append('text')
  .attr('x', function (d) { return d.x0; })
  .attr('y', function (d) { return d.y0; })
  .text(function(d) { if (d.data.depth>0) return d.data.id; })
  .attr("dy", "1em")
  .attr("dx", "1em");
}