📣 Announcing Dash Sunburst

[chriddyp]

Hey Dash Club –

We’ve just created a set of tutorials to help Dash component plugin authors reconcile the differences between D3.js and React (Integrating D3.js into Dash Components | Dash for Python Documentation | Plotly). As part of these tutorials, we made a few D3.js components that are functional on their own. One of these is the Dash Sunburst component.

GitHub - plotly/dash-sunburst: Dash / React + D3 tutorial: Sunburst diagrams

Connecting these sunburst charts to Dash is really cool because it enables simple server-side updates via Dash callbacks. If your data is large, e.g. if you are viewing hundreds of layers, then a sunburst chart can quickly become incomprehensible. With Dash, you can update the chart from the Python backend, enabling you to progressively explore the radial network:

This work was sponsored by an organization If your organization would like to sponsor our development directly or through our commercial offerings, please reach out: Consulting, Training & Open-Source Development

[dayxx369]

Thank you very much for this. How can I download this package to use for dash? I am trying pip install dash_sunburst, but it is not working. Is there a link that you can possibly provide? thanks

[David22]

Everything explained here :https://plot.ly/python/v3/sunburst-charts/

[dayxx369]

This does not help me with downloading the dash_sunburst package. I cannot use go.Sunburst for some reason because when I run the program, the graph will not appear.

[pengchuzhang]

Actually, it is very straightforward to download and use it, took only five minutes.
However, I could not enlarge and shrink the size of a sunburst graph. Anyone can help this.
pzhang

[chriddyp]

FYI - We have two sunburst implementations now.

1. This post outlined a custom sunburst created from scratch with D3 as a separate Dash plugin. It’s intent was as much a tutorial on how to use D3 in a Dash component as it was to have a useful standalone chart type.
2. After we released this custom component, we took what we learned and created a 1st class dcc.Graph chart type. This was done by updating plotly.js, the underlying graphing library that powers Dash & the Plotly’s Python graphing library (plotly.py).

We recommend using the official dcc.Graph chart type - It has more features and will get more attention from us on the development side of things. This chart type is documented here: https://plot.ly/python/sunburst-charts/

[pengchuzhang]

Thanks for Chriddyp for this updated information. However, I could not make one of the simple example from /pyton/sunburst to work on dash. Here are my codes and error message:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash(’’)

app.scripts.config.serve_locally = True

app.css.config.serve_locally = True

app.layout = html.Div([
html.Div([dcc.Graph(id=‘sun’)]),
html.Div(id=‘output’, style={‘clear’: ‘both’}),
])

@app.callback((Output(‘sun’, ‘figure’), Input(‘output’, ‘data’)))
def updatesun(data):
fig = go.Figure(go.Sunburst(
labels=[“Eve”, “Cain”, “Seth”, “Enos”, “Noam”, “Abel”, “Awan”, “Enoch”, “Azura”],
parents=["", “Eve”, “Eve”, “Seth”, “Seth”, “Eve”, “Eve”, “Awan”, “Eve”],
values=[65, 14, 12, 10, 2, 6, 6, 4, 4],
branchvalues=“total”))
fig.update_layout(margin=dict(t=0, l=0, r=0, b=0)),
return fig

if name == ‘main’:
app.run_server(debug=True)

dash.exceptions.IncorrectTypeException: The output argument output.data must be of type dash.Output.

Please let me know what I need to make the dash work. Thanks/

Pengchu

[pengchuzhang]

Never mind, I figured out how to plot it by following the plotly documentation. Thanks.