GRAMEX-TREE-MAP

D3 Tree map rendering for reusability purpOse.

Installation

  npm install gramex-nested-treemap

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 single_level_data = [
  {
    children: [
      {
        value: 100,
        name: "PBNA",
      },
      {
        value: 89,
        name: "Europe",
      },
      {
        value: 69,
        name: "PFNA",
      },
      {
        value: 60,
        name: "AMESA",
      },
      {
        value: 79,
        name: "APAC",
      },
      {
        value: 80,
        name: "LATAM",
      },
    ],
    root: "Global",
  },
  {
    children: [
      {
        value: 79,
        name: "India",
      },
      {
        value: 40,
        name: "China",
      },
      {
        value: 80,
        name: "Japan",
      },
      {
        value: 97,
        name: "USA",
      },
      {
        value: 67,
        name: "Australia",
      },
    ],
    root: "AMESA",
  },
];
//Sample data for level-2 (multilevel data)
let multilevel_data = [
  {
    children: [
      {
        name: "PBNA",
        parent_value: "100",
        children: [
          {
            name: "USA",
            value: 100,
          },
          {
            name: "Canada",
            value: 100,
          },
        ],
      },
      {
        name: "Europe",
        parent_value: "85",
        children: [
          {
            name: "UK",
            value: 87,
          },
          {
            name: "Poland",
            value: 41,
          },
          {
            name: "Netherlands",
            value: 65,
          },
          {
            name: "Spain",
            value: 36,
          },
          {
            name: "Norway",
            value: 25,
          },
          {
            name: "Others",
            value: 86,
          },
        ],
      },
      {
        name: "PFNA",
        parent_value: "79",
        children: [
          {
            name: "USA",
            value: 70,
          },
          {
            name: "Canada",
            value: 93,
          },
        ],
      },
      {
        name: "APAC",
        parent_value: "66",
        children: [
          {
            name: "Thailand",
            value: 26,
          },
          {
            name: "New Zeeland",
            value: 73,
          },
          {
            name: "Australia",
            value: 60,
          },
          {
            name: "Phillipenes",
            value: 53,
          },
          {
            name: "Vietnam",
            value: 50,
          },
          {
            name: "Others",
            value: 73,
          },
        ],
      },
      {
        name: "LATAM",
        parent_value: "70",
        children: [
          {
            name: "Guatemala",
            value: 30,
          },
          {
            name: "Columbia",
            value: 73,
          },
          {
            name: "Australia",
            value: 60,
          },
          {
            name: "Brazil",
            value: 53,
          },
          {
            name: "Mexico",
            value: 56,
          },
          {
            name: "Chile",
            value: 73,
          },
          {
            name: "Others",
            value: 73,
          },
        ],
      },
      {
        name: "AMESA",
        parent_value: "30",
        children: [
          {
            name: "India",
            value: 40,
          },
          {
            name: "Soudi Arabia",
            value: 73,
          },
          {
            name: "China",
            value: 60,
          },
          {
            name: "Pakistan",
            value: 53,
          },
          {
            name: "Others",
            value: 26,
          },
        ],
      },
    ],
    root: "Global",
  },
];

//Treemap config:
let config = {
  data: filterTreemapData()[0],
  sourceFields: {
    value: "value",
  },
  margin: { top: 10, right: 0, bottom: 0, left: 0 },
  padding: { top: 20, inner: 6, outer: 20, all: 20 },
  svgWidthBorder: 34,
  svgHeightBorder: 45,
  transLeftSpace: 32,
  transTopSpace: 55,
  svgBackgroundColor: "#CC4748",
  svgBorderRadius: "4px",
  topHeadingCss: true,
  topHeadingCssClass: "top-heading-css",
  treemapLabelCssClass: "treemap-label-css",
  labelTopSpace: "3px",
  labelLeftSpace: "1px",
  labelRectHeight: 45,
  treemapRectBorder: "treemap-rect-css",
  colorMapping: { strong: "#438E4C", weak: "#C42625", average: "#E5951E" },
  childrenNodecolorMapping: {
    strong: "#4A9D4E",
    weak: "#C42625",
    average: "#E5951E",
  },
  getOuterBoxParam: getOuterBoxParam(),
  outer_rect: true,
  blockTextCallback: blockText,
  tooltipConfig: {
    opacity: 1,
    offsetX: -20,
    offsetY: 25,
    backgroundColor: "black",
    borderRadius: "5px",
    padding: "15px",
    color: "white",
    textAlign: "center",
    fontSize: "14px",
    zIndex: 2,
    tooltipTextColor: "#FFFFFF",
    fontSizeLevel1: "18px",
    fontSizeLevel2: "14px",
  },
};
//Function call to render treemap charts
renderTreeMap("#treeMapChart", config);
function blockText(d) {
  return `${d.data.name}`;
}

//Function to filter single level or multi level data based on selected URL param:
function filterTreemapData() {
  rootname = renderDrilldownChart();
  if (rootname != "country") {
    single_level_data = _.filter(single_level_data, function (d) {
      if (d["root"] == rootname) {
        return d;
      }
    });
    return single_level_data;
  } else {
    return multilevel_data;
  }
}
//get param value to draw the first level outer rect (if level2 is selected)
function getOuterBoxParam() {
  if (parse_url().searchKey["level2"] != undefined) {
    return true;
  } else {
    return false;
  }
}