{"id":29930388,"url":"https://github.com/vasturiano/circlepack-chart","last_synced_at":"2025-08-02T16:14:51.937Z","repository":{"id":34932927,"uuid":"192444905","full_name":"vasturiano/circlepack-chart","owner":"vasturiano","description":"A circle packing interactive chart web component for visualizing hierarchical data","archived":false,"fork":false,"pushed_at":"2025-03-21T15:33:43.000Z","size":721,"stargazers_count":75,"open_issues_count":6,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-27T13:14:55.058Z","etag":null,"topics":["chart","circle-packing","d3js","data-visualization","hierarchical-data"],"latest_commit_sha":null,"homepage":"https://vasturiano.github.io/circlepack-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-18T01:43:21.000Z","updated_at":"2025-04-10T01:14:59.000Z","dependencies_parsed_at":"2024-06-19T19:06:10.145Z","dependency_job_id":"ad5401d3-b423-4b0a-8496-f01323694ab9","html_url":"https://github.com/vasturiano/circlepack-chart","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.015873015873015928","last_synced_commit":"18ee1315a3fb9b5b0a105b0d9842ca65dd473833"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":"vasturiano/ui-module","purl":"pkg:github/vasturiano/circlepack-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fcirclepack-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fcirclepack-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fcirclepack-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fcirclepack-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/circlepack-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Fcirclepack-chart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268416772,"owners_count":24246979,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","circle-packing","d3js","data-visualization","hierarchical-data"],"created_at":"2025-08-02T16:14:51.354Z","updated_at":"2025-08-02T16:14:51.925Z","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":"circlepack-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/circlepack-chart/example/flare\"\u003e\u003cimg width=\"80%\" src=\"https://vasturiano.github.io/circlepack-chart/example/preview.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAn interactive circle packing chart for visualizing proportions in hierarchical data, where nodes of a tree are represented as nested circles. \n\nSupports zooming interactions via mouse-wheel events or by clicking on a node, which focuses the viewport on the associated sub-tree. Clicking in the chart's background resets the zoom to its initial position.\nThe chart also responds to data changes by animating the dimensions of each of the nodes into their new positions. \n\nFor improved performance, circles with radius smaller than a given threshold (`minCircleRadius`) 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/circlepack-chart/example/large-data) of a randomly generated large data structure.\n\nSee also the [Treemap](https://github.com/vasturiano/treemap-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 CirclePack from 'circlepack-chart';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/circlepack-chart\"\u003e\u003c/script\u003e\n```\nthen\n```js\nconst myChart = new CirclePack(\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 circles 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 circles. | `value` |\n| \u003cb\u003epadding\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the amount of padding between adjacent circles, in px. | `4` |\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 circles. | \u003ci\u003egrey\u003c/i\u003e |\n| \u003cb\u003eborderWidth\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e, \u003ci\u003estring\u003c/i\u003e or \u003ci\u003efn\u003c/i\u003e]) | Getter/setter for a node object border width accessor, used to set the stroke width of each circle. | `1` |\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 circle node. |\n| \u003cb\u003eminCircleRadius\u003c/b\u003e([\u003ci\u003enumber\u003c/i\u003e]) | Getter/setter for the minimum radius of a circle (in px) required for it to be rendered in the DOM. | `3` |\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 circles. 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/circlepack-chart/example/sort-by-size/), to order circles 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 circle's diameter 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 circle'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 circles, 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/circlepack-chart\n[npm-url]: https://npmjs.org/package/circlepack-chart\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/circlepack-chart\n[build-size-url]: https://bundlephobia.com/result?p=circlepack-chart\n[npm-downloads-img]: https://img.shields.io/npm/dt/circlepack-chart\n[npm-downloads-url]: https://www.npmtrends.com/circlepack-chart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Fcirclepack-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Fcirclepack-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Fcirclepack-chart/lists"}