✨ Focus and Context Chart in Plotly Studio

[mattbrown]

Hey everyone! Here’s a quick tip on building a powerful Focus and Context chart in Plotly Studio. This type of chart is perfect for exploring large time-series datasets, allowing you to see both a high-level overview and a detailed view simultaneously.

What Is a Focus and Context Chart?

This chart type consists of two linked views:

• The Focus View (Top): This is your main chart. It displays a detailed, zoomed-in look at a specific time window of your data.

• The Context View (Bottom): This is the timeline overview. It shows the entire dataset and includes a “scrubbable” or selectable region that you can drag to choose the time period you want to see in the focus view above.

How It Works

The magic of this chart lies in the connection between the two views. When you select a time range on the bottom context view, it automatically updates the top focus view to display only the data from that selected period. This provides a seamless way to navigate through a large dataset without losing sight of the big picture.

Building It in Plotly Studio

Creating this is surprisingly simple in Plotly Studio. The key is to use the right prompt to enable this behavior. For example, I wrote a prompt like this:

Specimen collection frequency over time as a line chart with date range picker for temporal filtering. Show daily activity in this view. Create a scrubbable timeline thumbnail view below. Integrate the two charts via callback that filters the larger chart above when the timeline overview is scrubbed through.

Which produced a chart like this:

Plotly Studio’s AI will understand this command and generate the two connected charts for you. You get a fully interactive and integrated visualization, ready for exploring your data!

Happy charting!

[mattbrown]

Quick update to this post. I had forgotten that Dash actually has a Range Slider feature already, but it’s in the graphing objects library. Plotly Studio often prefers to create Plotly Express components due to their simplicity, so the prompt needs a little extra help to do it the official way.

Here’s the prompt I used:

Specimen collection frequency over time as a line chart. 

Use the Range Slider component that includes the timeline selector below the larger graph. 

Convert timestamps to datetimes to avoid type errors. Show dates as daily intervals.

And here’s the chart it produced:

I did run into a few data type related issues, which I fixed by specifying that it should convert timestamps into datetimes. Usually passing in a little information about the error you see in a chart is enough for Plotly Studio to fix it.

The upside of using the Range Slider instead of just Plotly Express charts is that you’ll get better performance and a smoother UX for your users.

If you run into places where Plotly Studio could be refined like this, let us know! We’re keen to get as many best practices into the software as possible.