d2bChart Sunburst

# d2b.chartSunburst()

Constructs a new sunburst chart generator with the default settings.

When using the d2b-sunburst generator you can draw a sunburst chart onto each element in the selection.

# sunburst(context)

Render the sunburst chart(s) to the given context, which may be either a d3-selection of html containers (e.g. div) or a corresponding d3-transition.

Before applying the d2b-sunburst-chart generator, you should join the data to the selected element(s) using selection.data or selection.datum. Here is the default data format.

# Default Sunburst Chart

Here is a live interactive demo of the default sunburst chart without any extra configurations. A sunburst chart is very similar to a tree data structure. It starts off with a root and branches out into its children until it reaches the leaf nodes. Each ring around the center represents a level of the sunburst (or tree), the most inner ring representing the root. Each ring is instatiated with the children array. Each segment of a ring represents a child, which is instatiated with the label and if the child is a node, then it also has the size properties. The child's ancestors retrieve their size data by adding all the sizes of their childrend.

# Basic

Here is a live interactive demo of the sunburst chart with basic property configurations. Some of these configurations include angles, ring sizes, and colors.

Here is a live interactive demo of the sunburst chart with breadcrumb property configurations. A breadcrumb is an expandable list of sunburst chart data. The root of the breadcrumb is visible (by default) and hovering over each ring expands this list to clearly display the details of that and its previous rings. Some of the breadcrumb configurations include visibility, orientation, and the html generated.

# Padding

Here is a live interactive demo of the sunburst chart with padding property configurations. These configurations pad the rings in the sunburst as well as the sunburst chart (without the legend) as a whole.

# Radius

Here is a live interactive demo of the sunburst chart with radius property configurations. These configurations affect the appearance of the rings' roundness and thickness.

# Root

Here is a live interactive demo of the sunburst chart with root property configurations. As previosuly mentioned, the root is the top-most node of the tree with child branches. The properties set in the root object can change the color, breadcrumb, label, and all of its children. Within the children array of objects, in addition to the root properities, the tooltip and selected are properties a child can have. If the child is a leaf node, it can also have the size property.

# Sort

Here is a live interactive demo of the sunburst chart with sort property configurations. Changes to these configuration (an accessor function) reorient the order of how the data in the sunburst is displayed.

# Tooltip

Here is a live interactive demo of the sunburst chart with tooltip property configurations. The tooltip is the textbox that appears when hovering over a sunburst ring. Each ring can have its own tooltip property and there is also a global tooltip object that gets applied to all the tooltips in the chart.

# Transition

Here is a live interactive demo of the sunburst chart with a transition configuration. If the button "Change Data!" is clicked, the sunburst chart will toggle between different data to demonstrate the transition animations. .transition() is used on the chart and chained with the desired .duration(2000) of microseconds.

# Typescript

Here is a live interactive demo of the default sunburst chart without any extra configurations using typescript. Typescript ensures proper types and properties are used when creating objects, arrays, etc.

# Properties

This is a complete list of properties that may be supplied to the axis chart datum. Bold properties are required.

PropertyDetails
data.root
The sunburst root node data.

Type: object
Required: true
data.ancestorBandingExponent
Ancestor (inner) band sizing exponent. An exponent of 1 will make the bands equal size.

Type: number
Default: 1
Optional: true
data.ancestorPadding
Defines the pixel distance between the ancestor (inner) and descendant (outer) bands.

Type: number
Default: 10
Optional: true
data.color
Sunburst arc color accessor function.

Type: string, (data) => string
Default: d => colorGenerator(d.label)
Optional: true
data.cornerRadius
Corner radius of sunburst arcs in pixels.

Type: number
Default: 0
Optional: true
data.descendantBandingExponent
Descendant (outer) band sizing exponent. An exponent of 1 will make the bands equal size.

Type: number
Default: 1
Optional: true
data.descendantLevels
The maximum number of descendant (outer) bands to show at a time. Deeper bands will be drawn when zooming.

Type: number
Default: Infinity
Optional: true
data.duration
The internal chart duration in miliseconds.

Type: number
Default: 250
Optional: true
data.endAngle
Sunburst chart end angle in radians.

Type: number
Default: 2 * Math.PI
Optional: true
data.highlight
Enable or disable the sunburst hover to highlight.

Type: boolean
Default: true
Optional: true
data.innerRadius
The pixel inner radius of the sunburst chart. Usually relative to the width / height of the container.

Type: number, (width, height) => number
Default: (width, height) => Math.min(width, height) / 2
Optional: true
data.outerRadius
The pixel outer radius of the sunburst chart. Usually relative to the width / height of the container.

Type: number, (width, height) => number
Default: (width, height) => Math.min(50, Math.min(width, height) / 4)
Optional: true
data.padAngle
Sunburst chart angle padding in radians.

Type: number
Default: 0
Optional: true
data.showLabels
Enable or disable the sunburst labels.

Type: boolean
Default: false
Optional: true
data.sort
Sunburst arc sort comparator. Use null to order arcs according to the children array.

Type: null, (a, b) => number
Default: null
Optional: true
data.startAngle
Sunburst chart start angle in radians.

Type: number
Default: 0
Optional: true
data.updated
Event hook for d2b charts. Will be after the chart is rendered. Note: Transitions may still occur after this lifecycle hook fires.

Type: (this, data) => void
Optional: true
data.zoomable
Enable or disable the sunburst click to zoom.

Type: boolean
Default: true
Optional: true
data.breadcrumbs
Chart breadcrumbs configuration options.

Type: object
Optional: true
data.chartPadding
The chart's inner padding (excluding the breadcrumbs) in pixels.

Type: number, object
Default: 10
Optional: true
data.padding
The chart's outer padding (including the breadcrumbs) in pixels.

Type: number, object
Default: 10
Optional: true
data.size
The pixel size of the chart.

Type: object
Optional: true
data.tooltip
Chart tooltip configuration options.

Type: object
Optional: true

results matching ""

    No results matching ""