# gramex-nested-treemap > D3 nested Reusable component Latest version **7.5.5** (published 2024-02-27) · ISC license · 0 weekly downloads ## Install ```sh npm install gramex-nested-treemap pnpm add gramex-nested-treemap yarn add gramex-nested-treemap bun add gramex-nested-treemap ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 7.5.5 | | Published | 2024-02-27 | | First published | 2023-08-11 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 37.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Neha Kumari | | Maintainers | nehakumari.ram | | Keywords | gramener, gramex, nested treemap, treemap, d3 | ## Links - npm: https://www.npmjs.com/package/gramex-nested-treemap - Repository: https://code.gramener.com/nehakumari.ram/gramex-nested-treemap - npm.io page: https://npm.io/package/gramex-nested-treemap ## Dependencies (2) - [d3](https://npm.io/package/d3.md) ^7.8.4 - [jquery](https://npm.io/package/jquery.md) ^3.6.4 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 7.5.5 (latest) — 2024-02-27 - 7.5.4 — 2023-12-12 - 7.5.3 — 2023-12-12 - 7.5.2 — 2023-11-27 - 7.5.1 — 2023-11-24 - 7.4.9 — 2023-11-22 - 7.4.8 — 2023-11-22 - 7.4.7 — 2023-11-02 - 7.4.6 — 2023-10-25 - 7.4.5 — 2023-10-25 - 7.4.4 — 2023-10-19 - 7.4.3 — 2023-10-19 - 7.4.2 — 2023-10-18 - 7.4.1 — 2023-10-18 - 7.3.9 — 2023-10-12 - … 10 more at https://npm.io/package/gramex-nested-treemap/versions ## README # GRAMEX-TREE-MAP D3 Tree map rendering for reusability purpOse. ## Installation ```bash npm install gramex-nested-treemap ``` ## Dependencies ```bash 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 ```html
``` JS ```javascript 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; } } ``` --- _Source: https://npm.io/package/gramex-nested-treemap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._