{"id":25429670,"url":"https://github.com/vasturiano/treemap-chart","last_synced_at":"2025-04-04T13:04:01.806Z","repository":{"id":34932936,"uuid":"191725315","full_name":"vasturiano/treemap-chart","owner":"vasturiano","description":"A treemap interactive chart web component for visualizing hierarchical data","archived":false,"fork":false,"pushed_at":"2025-03-21T15:46:01.000Z","size":833,"stargazers_count":71,"open_issues_count":8,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T12:01:40.007Z","etag":null,"topics":["chart","d3js","data-visualization","hierarchical-data","treemap"],"latest_commit_sha":null,"homepage":"https://vasturiano.github.io/treemap-chart/example/flare/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasturiano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-13T08:45:30.000Z","updated_at":"2025-03-21T15:46:04.000Z","dependencies_parsed_at":"2025-01-14T01:33:07.533Z","dependency_job_id":"28d9435d-1915-4357-98eb-773f8d0fd920","html_url":"https://github.com/vasturiano/treemap-chart","commit_stats":{"total_commits":69,"total_committers":2,"mean_commits":34.5,"dds":0.01449275362318836,"last_synced_commit":"243581f5db90a21f1ad3e59ecc8bbc16935c429c"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":"vasturiano/ui-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftreemap-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftreemap-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftreemap-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Ftreemap-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/treemap-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174418,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","d3js","data-visualization","hierarchical-data","treemap"],"created_at":"2025-02-17T02:19:35.991Z","updated_at":"2025-04-04T13:04:01.771Z","avatar_url":"https://github.com/vasturiano.png","language":"JavaScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!"],"categories":[],"sub_categories":[],"readme":"treemap-chart\n==================\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\n\u003cp align=\"center\"\u003e\n     \u003ca href=\"https://vasturiano.github.io/treemap-chart/example/flare\"\u003e\u003cimg width=\"80%\" src=\"https://vasturiano.github.io/treemap-chart/example/preview.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAn interactive treemap chart for visualizing proportions in hierarchical data, where nodes of a tree are represented as nested fully-packed rectangular tiles. \n\nSupports zooming interactions via mouse-wheel events or by clicking on a node, which focuses the viewport on the associated sub-tree.\nThe chart also responds to data changes by animating the dimensions of each of the nodes into their new positions. \n\nFor improved performance, nodes with area (`width`*`height`) smaller than a given threshold (`minBlockArea`) are excluded from the DOM, allowing for representation of large data sets while maintaining a smooth interaction. See [here for an example](https://vasturiano.github.io/treemap-chart/example/large-data) of a randomly generated large data structure.\n\nSee also the [Circle Pack](https://github.com/vasturiano/circlepack-chart), [Icicle](https://github.com/vasturiano/icicle-chart) and [Sunburst](https://github.com/vasturiano/sunburst-chart) charts.\n\n## Quick start\n\n```js\nimport Treemap from 'treemap-chart';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/treemap-chart\"\u003e\u003c/script\u003e\n```\nthen\n```js\nconst myChart = new Treemap(\u003cmyDOMElement\u003e)\n  .data(\u003cmyData\u003e);\n```\n\n## API reference\n\n| Method | Description | Default |\n| --- | --- | :--: |\n| \u003cb\u003edata\u003c/b\u003e([\u003ci\u003eobject\u003c/i\u003e]) | Getter/setter for chart data (see below for syntax details). | |\n| \u003cb\u003ewidth\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart width in px. | *\u0026lt;window width\u0026gt;* |\n| \u003cb\u003eheight\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the chart height in px. | *\u0026lt;window height\u0026gt;* |\n| \u003cb\u003echildren\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a data node's children accessor, used to establish the hierarchical relationship between nodes. Supports either a \u003ci\u003estring\u003c/i\u003e indicating the object's property name, or a `function(node)` which should return an array of nodes. | `children` |\n| \u003cb\u003elabel\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object label accessor, used to display labels on the blocks and their tooltips. | `name` |\n| \u003cb\u003esize\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object size accessor, used to compute the areas of the blocks. | `value` |\n| \u003cb\u003epadding\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the amount of padding between adjacent blocks, in px. | `2.5` |\n| \u003cb\u003ecolor\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object color accessor, used to color the blocks. | \u003ci\u003egrey\u003c/i\u003e |\n| \u003cb\u003enodeClassName\u003c/b\u003e([\u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object classname accessor. Determines the CSS class(es) to apply to each block node. |\n| \u003cb\u003eminBlockArea\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the minimum area of a block (in square px) required for it to be rendered in the DOM. | `100` |\n| \u003cb\u003eexcludeRoot\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether to exclude the root node from the representation. | `false` |\n| \u003cb\u003esort\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Getter/setter for the compare method used to sort sibling blocks. A value of `null` (*default*) maintains the existing order found in the input data structure. This method is equivalent to [d3-hierarchy's sort](https://github.com/d3/d3-hierarchy#node_sort), it receives two arguments representing two sibling nodes and expects a numeric return value (`-1`, `0` or `1`) indicating the order. Each element is an instance of [d3-hierarchy node](https://github.com/d3/d3-hierarchy#hierarchy) and has several useful properties to specify order: `data` (the corresponding data object), `value` (summed value of node and all its descendants) and `depth` (layer degree). For [example](https://vasturiano.github.io/treemap-chart/example/sort-by-size/), to order blocks by size, use: `(a, b) =\u003e b.value - a.value`. | *\u0026lt;existing order*\u0026gt; |\n| \u003cb\u003eshowLabels\u003c/b\u003e([\u003ci\u003eboolean\u003c/i\u003e]) | Getter/setter for whether to show labels in the nodes. Regardless of this setting, labels too large to fit within a block's width are automatically hidden. | `true` |\n| \u003cb\u003eshowTooltip\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Getter/setter to specify a node object tooltip's visibility. If this function returns `false` for a particular node, that node's tooltip will not display at all. If unspecified, all nodes' tooltips will display. | `() =\u003e true` |\n| \u003cb\u003etooltipTitle\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object tooltip title. The function should return a string to be displayed in bold in the first line of the tooltip. If unspecified, the full hierarchical name will be displayed. | |\n| \u003cb\u003etooltipContent\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object tooltip content. Use this to specify extra content in each of the block's tooltips in addition to the title set in `tooltipTitle`. | |\n| \u003cb\u003ezoomToNode\u003c/b\u003e([\u003ci\u003enode\u003c/i\u003e]) | Programmatically zoom the chart to a particular node. | |\n| \u003cb\u003ezoomBy\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Programmatically zoom the chart by a specific amount. `1` is unity, above one indicates a zoom-in and below a zoom-out. | |\n| \u003cb\u003ezoomReset\u003c/b\u003e() | Programmatically reset the zoom to the global view. | |\n| \u003cb\u003eonHover\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for mouse hover events. The data node object (or `null` if hovering on background) and the event object are included as arguments `onHover(node, event)`. | |\n| \u003cb\u003eonClick\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for click events. The data node object (or `null` if clicking on the background) and the event object are included as arguments `onClick(node, event)`. A falsy value (default) automatically zooms on clicked nodes, equivalent to `myChart.onClick(myChart.zoomToNode)`. | |\n| \u003cb\u003eonRightClick\u003c/b\u003e([\u003ci\u003efn\u003c/i\u003e]) | Callback function for right-click events. The data node object (or `null` if right-clicking on the background) and the event object are included as arguments `onRightClick(node, event)`. A falsy value (default) will fallback to the default browser behaviour, which is to open the context menu. | |\n| \u003cb\u003etransitionDuration\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the animation duration of transitions between states (opening, zoom in/out) in milliseconds. Enter `0` to disable animations. | `800` |\n\n## Data syntax\n\n```js\n{\n  name: \"root\",\n  children: [\n    {\n      name: \"leafA\",\n      value: 3\n    },\n    {\n      name: \"nodeB\",\n      children: [\n        {\n          name: \"leafBA\",\n          value: 5\n        },\n        {\n          name: \"leafBB\",\n          value: 1\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Giving Back\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=L398E7PKP47E8\u0026currency_code=USD\u0026source=url)!\n\n[npm-img]: https://img.shields.io/npm/v/treemap-chart\n[npm-url]: https://npmjs.org/package/treemap-chart\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/treemap-chart\n[build-size-url]: https://bundlephobia.com/result?p=treemap-chart\n[npm-downloads-img]: https://img.shields.io/npm/dt/treemap-chart\n[npm-downloads-url]: https://www.npmtrends.com/treemap-chart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Ftreemap-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Ftreemap-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Ftreemap-chart/lists"}