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);