Black Lives Matter. Please consider donating to Black Girls Code today.

Can Plotly js do drill downs?

I have been learning Dash, but would like to look at Plotly js also.

One key function my users ask for continually is the ability to do drill downs. Can Plotly js do these?

The basic idea is to use on chart at a high level, like state, and clicking on part of the chart will filter data on a second chart which is at a lower level, like city.

For example, suppose you had a simple dashboard with two sales charts, one for sales by state and one for sales by cities in one state. The state sales are displayed on a horizontal bar chart that shows sales in descending order. If you wanted to see more details about the sales are in one state, you can click on a state bar, like Florida, and the city sales chart will display sales for Miami, Jacksonville, Orlando, Tampa, etc., in descending order by sales.

Is this possible in Plotly js? I know Dash can do it.

Hi @Jfrick100, plotly js has two drill-down-like charts for hierarchical data, namely treemap (https://plot.ly/javascript/treemaps/) and sunburst (https://plot.ly/javascript/sunburst-charts/). With the maxdepth attribute of these charts you can hide the inside levels until their parent is clicked. Note that the Python documentation pages for these charts have more examples (https://plot.ly/python/treemaps/ and https://plot.ly/python/sunburst-charts/).

Thank you for such a quick reply.

Does Plotly js have something equivalent to Dash’s callbacks? I like how Dash uses a callback on every figure that I have tried.

I appreciate your pointing out about treemaps and sunbursts. Most of what I have seen in business involves the use of other visualizations, like bar charts, line charts, or even tables as the source and a table as the target.

James

I found a great example of using one chart to filter data on another chart on a Tableau site.

Here is a screen shot of a map of the US. Each state is clickable. In my screen shot, a user has clicked on Washington state, and this caused the two charts beneath the map to update with Washington state’s metrics for Sales and Difference. Note: many of my dashboards have the 2 metric charts in a different

than the map of the US. So assume in my example screen shot that the three charts are in three different div’s.

I know how to do this in DASH with callbacks. I am looking to do similar functionality in Plotly js.

I have read about the events that can be used with Plotly js, but all of the examples only show how a single chart can be updated with an event.

How can I replicate this functionality?

I think the high level steps are (not necessarily in this order):

  1. pass the variable with “WA” as the state id
  2. filter a dataframe or create a dataframe of Washington metrics for the dates shown
  3. restyle the Sales chart
  4. restyle the Difference chart

Thanks for any advice.