Simple Tree Map

Creating a tree map using d3plus is super simple. Given an array of data objects that looks something like this:

var data = [
  {parent: "Group 1", id: "alpha", value: 29},
  {parent: "Group 1", id: "beta", value: 10},
  {parent: "Group 1", id: "gamma", value: 2},
  {parent: "Group 2", id: "delta", value: 29},
  {parent: "Group 2", id: "eta", value: 25}
];

Only a few lines of code are needed to transform it into an interactive TreeMap:

new d3plus.Treemap()
  .data(data)
  .groupBy(["parent", "id"])
  .render();

Colors are assigned to each unique ID using the color assign function, and the rectangles are created using the Rect class.