GRAMEX-TREE-MAP

D3 Tree map rendering for reusability purpOse.

Installation

  npm install gramex-tree-map

Dependencies

  npm install d3

Options/Config

Following options are available:

Name	Type	Description
data	Object {"children":[{ value: 300 }]}	Data needs to have children property. And each object in the children need to have some value
sourceFields	Object { value: "XX"}	The XX value is used as the key in fetching the value from the data
margin	Object { top: 10, right: 0, bottom: 0, left: 0 }	Specify margin
padding	Object { top: 10, inner: 3, outer: 2, all: 2 }	Specify padding inside the block
colorRange	Object []	Range of colors for the blocks
blockNameSize	String	Size for block text blocks
valueSize	String	Size for value text blocks
textColor	String	Font color of blocks blocks

Name	Type	Description
blockTextCallback	Callback function	Returns string that needs to be shown on the block
tooltipConfig	Object	Configuration for tooltip mentioned below

Tooltip Config options

Name	Type	Description
opacity	number	Opacity of tooltip
offsetX	number	x Offset
offsetY	number	y Offset
backgroundColor	string	bg color of tooltip
borderRadius	string	border radius
padding	string	padding within tooltip
color	string	color of text
textAlign	string	text alignment
fontSize	string	text font size
zIndex	number	z-index of tooltip
tooltipCallback	Callback function	Returns string that needs to be shown on the tooltip

Usage/Examples

HTML

<div id="treeMapChart" class="chart-dimension"></div>

JS

let data = {
  children: [
    {
      value: 395,
      name: 1,
      colname: "level3",
    },
    {
      value: 376,
      name: 2,
      colname: "level3",
    },
    {
      value: 317,
      name: 3,
      colname: "level3",
    },
    {
      value: 658,
      name: 4,
      colname: "level3",
    },
  ],
  name: "CEO",
};
let config = {
  data: data,
  sourceFields: {
    value: "value",
  },
  margin: { top: 10, right: 0, bottom: 0, left: 0 },
  padding: { top: 10, inner: 3, outer: 2, all: 2 },
  colorRange: ["#63CED5", "#02A8B3", "#017BC3", "#1C5B94"],
  blockTextCallback: blockText,
  tooltipConfig: {
    opacity: 1,
    offsetX: 20,
    offsetY: 0,
    backgroundColor: "black",
    borderRadius: "5px",
    padding: "10px",
    color: "white",
    textAlign: "center",
    fontSize: "12px",
    zIndex: 2,
    tooltipCallback: sampleTooltip,
  },
};
function blockText(d) {
  let suffix = " Block ";
  return `${d.data.name}${suffix}`;
}
function sampleTooltip(el) {
  var prefix = el.data.name;
  var text = " Heading";
  var value = Math.round(el["data"]["value"]);
  var title = "Value";
  return { prefix, text, title, value };
}

renderTreeMap("#treeMapChart", config);