Sunburst Chart D3 Component With Vue | Vue.D3.Sunburst

sunburst-chart-d3

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 legend and top slots 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.