Vue.D3.Sunburst provides a reusable component for Vue sunburst charts based on D3.js.
Sunburst is the main component of this library and renders a sunburst schema based on data brackets using the children’s property of the hierarchy, the name property of the label, and the size property of the parentheses size.
sunburst chart js, plotly sunburst chart, sunburst chart d3, react sunburst chart, streamlit sunburst chart, sunburst chart code, sunburst chart online
Sunburst component provides four optional slots:
- The
legendandtopslots are designed to be used to display additional information such as the legend. - pop-up to create a popup for arc.
- The default aperture is intended to receive less component rendering behavior: for example, highlighting on mouseover or zooming on click.
Components that provide standard and reusable features are provided.
Features
- Reaction to data changes
- Responsive to volume changes
- Customizable with unlocked slots or modes and events
- Zoomable
How to make use of it:
Install & Download:
# NPM $ npm install vue-d3-sunburst --save
Usage
<sunburst :data="data">
<!-- Add behaviors -->
<template slot-scope="{ on, actions }">
<highlightOnHover v-bind="{ on, actions }"/>
<zoomOnClick v-bind="{ on, actions }"/>
<popUpOnHover v-bind="{ on, actions }"/>
</template>
<!-- Add information to be displayed on top the graph -->
<nodeInfoDisplayer slot="top" slot-scope="{ nodes }" :current="nodes.mouseOver" :root="nodes.root" description="of visits begin with this sequence of pages" />
<!-- Add bottom legend -->
<breadcrumbTrail slot="legend" slot-scope="{ nodes, colorGetter, width }" :current="nodes.mouseOver" :root="nodes.root" :colorGetter="colorGetter" :from="nodes.clicked" :width="width" />
<!-- Add pop-up -->
<template slot="pop-up" slot-scope="{ data }">
<div class="pop-up">{{data.name}}</div>
</template>
</sunburst>import {
breadcrumbTrail,
highlightOnHover,
nodeInfoDisplayer,
popUpOnHover,
sunburst,
zoomOnClick
} from 'vue-d3-sunburst';
import "vue-d3-sunburst/dist/vue-d3-sunburst.css";
export default {
components: {
breadcrumbTrail,
highlightOnHover,
nodeInfoDisplayer,
sunburst,
zoomOnClick
},
data() {
return {
tree: {
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{ "name": "AgglomerativeCluster", "size": 3938 },
{ "name": "CommunityStructure", "size": 3812 },
{ "name": "HierarchicalCluster", "size": 6714 },
{ "name": "MergeEdge", "size": 743 }
]
},
{
"name": "graph",
"children": [
{ "name": "BetweennessCentrality", "size": 3534 },
{ "name": "LinkDistance", "size": 5731 },
{ "name": "MaxFlowMinCut", "size": 7840 },
{ "name": "ShortestPaths", "size": 5914 },
{ "name": "SpanningTree", "size": 3416 }
]
},
{
"name": "optimization",
"children": [
{ "name": "AspectRatioBanker", "size": 7074 }
]
}
]
}
]
}
}
}
}Sunburst Component With Vue, D3.Sunburst Plugin/Github
See Demo And Download
Official Website(David-Desmaisons): Click Here
This superior jQuery/javascript plugin is developed by David-Desmaisons. For extra Advanced usage, please go to the official website.