D3 Tree map rendering for reusability purpOse.
npm install gramex-nested-treemap npm install d3Following 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 |
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;
}
}