{"_id":"@arclamp/sunburst-chart","_rev":"1-19b7b7558a7962e864548ea7ad32c644","name":"@arclamp/sunburst-chart","dist-tags":{"latest":"1.4.6"},"versions":{"1.4.6":{"name":"@arclamp/sunburst-chart","version":"1.4.6","description":"Sunburst interactive chart web component for visualizing hierarchical data","license":"MIT","unpkg":"dist/@arclamp/sunburst-chart.min.js","main":"dist/@arclamp/sunburst-chart.common.js","module":"dist/@arclamp/sunburst-chart.module.js","repository":{"type":"git","url":"git+https://github.com/vasturiano/sunburst-chart.git"},"homepage":"https://github.com/vasturiano/sunburst-chart","keywords":["d3","d3-module","sunburst","hierarchical","graph","svg"],"author":{"name":"Vasco Asturiano","url":"https://bl.ocks.org/vasturiano"},"bugs":{"url":"https://github.com/vasturiano/sunburst-chart/issues"},"scripts":{"build":"rimraf dist && rollup -c","dev":"rollup -c -w","minify":"terser dist/@arclamp/sunburst-chart.js -o dist/@arclamp/sunburst-chart.min.js -c -m --comments '/Version/'","build-module":"rollup -c rollup.config.module.js","prepare":"npm run build && npm run minify && npm run build-module"},"dependencies":{"accessor-fn":"^1.2.2","d3-hierarchy":"^1.1.8","d3-interpolate":"^1.3.2","d3-path":"^1.0.7","d3-scale":"^3.0.0","d3-selection":"^1.4.0","d3-shape":"^1.3.5","d3-transition":"^1.2.0","kapsule":"^1.10.1"},"devDependencies":{"@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.4.4","@babel/plugin-proposal-object-rest-spread":"^7.4.4","@babel/preset-env":"^7.4.5","postcss-nested":"^4.1.2","postcss-simple-vars":"^5.0.2","rimraf":"^2.6.3","rollup":"^1.15.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^10.0.0","rollup-plugin-node-resolve":"^5.0.1","rollup-plugin-postcss":"^2.0.3","terser":"^4.0.0"},"publishConfig":{"access":"public"},"gitHead":"3d55b261de46452f0d895649716a16d5bed9cb2e","_id":"@arclamp/sunburst-chart@1.4.6","_nodeVersion":"11.15.0","_npmVersion":"6.9.0","_npmUser":{"name":"ronichoudhury","email":"aichoudh@gmail.com"},"dist":{"integrity":"sha512-zpyfjEQtsjkjODfDT7O1uijnTasbBmbYK3nw41spJZRHRMFrGgIWA5PZ4IrDEEZawGY+NPxaYM5dO0sHJJLrvQ==","shasum":"d6cfa1a4fe74cbce5f8acc2291f3d30e20ab3813","tarball":"https://registry.npmjs.org/@arclamp/sunburst-chart/-/sunburst-chart-1.4.6.tgz","fileCount":8,"unpackedSize":713031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdG+nNCRA9TVsSAnZWagAA9bIP/3qt2IwBByJfyWqtquRM\n7MzLcVklkr99jlCelgBlhq9aLzIERSWlLaAHzfpnLJsdaF0aEh5jFhT/Y4bV\nTEZNlovs491dmHwux+Ix4Abi/W85mBkQYRVhmNpEStbXJw/35nplgXICiVnM\nE+jhmPrkJf+KmkMYrLS94NVPvqJOE0ewGqYmeCdHzzFZF+2AqyKU4SUUUluW\nffHaBPaPZ+E6VAo6d/mhj13zEWI92z/cKWO6paAlmaj/TbnO1+B9T7QZ4hbg\n7q3intJJ5FUf1pneJxWH9cznmmEcAQE5htYrNksnn7wHBAik781Efdp638cv\nQMIUa2LSJa230Ponun3YlIVrF3UYkux/tByQW4JBM66B5cyLs+L4bNOWX6ZP\njfXi7YqiFbstlYvxsd672cU7IBMlfGzAku9TFKbChsbQKCB4+v4kuACKtT/A\nVnPcrj48X5QXA9MsUPaRuEZ0llHiItqVjLe1Et9xw3MIeviN73FMNdeIkXay\n7rzlLLB4BhGGsOZFyEhCxdXVgr8GTgNurIseXcBrFJuyYhjEaj7LGB9XaquK\nDvfFVFvDZOdD2NDdUirMUnHrlchT4fD1wCUJK4qnxg8sC6uQxMDr+KGyvUI2\n2UFM0bGc10FbE/CQSwqPJ+ZAlNLepk/oSyDS38H5SZ/dN1MsoGG09+F2TBya\nVLx7\r\n=Z/dz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtIxIT670a/4jNVmF337AKisvwUSesF+NSDWu3tLzMGQIhAJWhCvt8WvmNKA3EkFRUT7i0emnyq/JWuE1MEUgr/hDU"}]},"maintainers":[{"name":"ronichoudhury","email":"aichoudh@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sunburst-chart_1.4.6_1562110412976_0.10897948905765698"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-02T23:33:32.850Z","1.4.6":"2019-07-02T23:33:33.129Z","modified":"2022-04-04T15:18:47.798Z"},"maintainers":[{"name":"ronichoudhury","email":"aichoudh@gmail.com"}],"description":"Sunburst interactive chart web component for visualizing hierarchical data","homepage":"https://github.com/vasturiano/sunburst-chart","keywords":["d3","d3-module","sunburst","hierarchical","graph","svg"],"repository":{"type":"git","url":"git+https://github.com/vasturiano/sunburst-chart.git"},"author":{"name":"Vasco Asturiano","url":"https://bl.ocks.org/vasturiano"},"bugs":{"url":"https://github.com/vasturiano/sunburst-chart/issues"},"license":"MIT","readme":"Sunburst Chart\n==============\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![Dependencies][dependencies-img]][dependencies-url]\n\n
\n \n
\n\nAn interactive sunburst chart for representing hierarchical data, where each data node of a tree is represented by an annular segment within multi-layered rings. \n\nClicking on an arc focuses the view on the associated sub-tree, enabling a gradual exploration of the data. Clicking in the chart's center zooms out one level, while clicking on the canvas resets the zoom level to the root view.\nThe chart also responds to data changes by animating the arcs of each of the nodes into their new positions. \nThe arcs areas are linearly proportional to their data values, resulting in a decrease of the thickness of the outer layers in a quadratic fashion.\n\nFor improved performance, arcs smaller than a given threshold (`minSliceAngle`) 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/sunburst-chart/example/large-data) of a randomly generated large data structure.\n\nSee also the [Icicle](https://github.com/vasturiano/icicle-chart), [Circle Pack](https://github.com/vasturiano/circlepack-chart) and [Treemap](https://github.com/vasturiano/treemap-chart) charts.\n\n## Quick start\n\n```\nimport Sunburst from 'sunburst-chart';\n```\nor\n```\nSunburst = require('sunburst-chart');\n```\nor even\n```\n\n```\nthen\n```\nconst myChart = Sunburst();\nmyChart\n .data()\n ();\n```\n\n## API reference\n\n| Method | Description | Default |\n| --- | --- | --- |\n| data([object]) | Getter/setter for chart data (see below for syntax details). | |\n| width([number]) | Getter/setter for the chart width in px. | *<window width>* |\n| height([number]) | Getter/setter for the chart height in px. | *<window height>* |\n| children([string or fn]) | Getter/setter for a data node's children accessor, used to establish the hierarchical relationship between nodes. Supports either a string indicating the object's property name, or a `function(node)` which should return an array of nodes. | `children` |\n| label([string or fn]) | Getter/setter for a node object label accessor, used to display labels on the arcs and their tooltips. | `name` |\n| size([string or fn]) | Getter/setter for a node object size accessor, used to compute the angles of the arcs. | `value` |\n| color([string or fn]) | Getter/setter for a node object color accessor, used to color the arcs. | grey |\n| minSliceAngle([number]) | Getter/setter for the minimum angle of an arc (in degrees) required for it to be rendered in the DOM. | `0.2` |\n| sort([fn]) | Getter/setter for the compare method used to sort sibling arcs. 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 arcs 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/sunburst-chart/example/sort-by-size/), to order arcs by angular size, use: `(a, b) => b.value - a.value`. | *<existing order*> |\n| showLabels([boolean]) | Getter/setter for whether to show labels in the arcs. Regardless of this setting, labels too large to fit within an arc's boundaries are automatically hidden. | `true` |\n| tooltipContent([string or fn]) | Getter/setter for a node object tooltip content accessor. Use this to specify extra content in each of the arc's tooltips in addition to the node's full hierarchical name that's included by default. | |\n| focusOnNode([object]) | Getter/setter for the data node to focus the chart on. Use this method to retrieve the current node in focus, or to programmatically zoom the chart to a particular node. | |\n| onClick([fn]) | Callback function for click events. Includes the data node object (or `null` if clicking on background) as single argument. A falsy value (default) automatically focuses on clicked nodes, equivalent to `myChart.onClick(myChart.focusOnNode)`. | |\n\n## Data syntax\n\n```\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[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=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&business=L398E7PKP47E8¤cy_code=USD&source=url)!\n\n[npm-img]: https://img.shields.io/npm/v/sunburst-chart.svg\n[npm-url]: https://npmjs.org/package/sunburst-chart\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/sunburst-chart.svg\n[build-size-url]: https://bundlephobia.com/result?p=sunburst-chart\n[dependencies-img]: https://img.shields.io/david/vasturiano/sunburst-chart.svg\n[dependencies-url]: https://david-dm.org/vasturiano/sunburst-chart\n","readmeFilename":"README.md"}
![](\"https://vasturiano.github.io/sunburst-chart/example/flare/screenshot.png\")
\n