3 ways to create a visual dashboard (2023)

hvPlot .interactive、Panel .bind 和 Parametr .zależy

pass throughSophia YoungIMarka Skova Madsena

Interested in creating interactive dashboards in Python? Not only can you use different tools, but even with a tool like Panel, there are many ways to create your dashboard. Want to understand why there are different options and which approach is best for your use case? This article will walk you through three ways to create a table control panel:

hvPlot.interactiveTurn any DataFrame processing pipelines into a dashboard (great if you want to explore datasets!).
panel. bindCombine your widgets with interactive stories (great if you want to build any apps!).
parameterPlace your dashboard as an independent class (ideal if you want to build a complex codebase that supports both GUI and non-GUI usage).

We'll show you how to choose the method that's right for you, and we'll also show you how to create this interactive dashboard using all three methods:

Panel is an open source dashboard libraryHolographic displayAn ecosystem that includes eight libraries (see Figure 1), developed by our friends at AnacondaPhilippa Rudigera, Jean-Luc Stevens iJim BednarWith hundreds of thousands of downloads per month, HoloViz is the most popular Python visualization ecosystem.

ChecklistDesigned to create custom interactive applications and dashboards. There are many visualization tools and dashboards in Python, each with their own strengths and special features. To learn more about the Python dashboard landscape and to find out which tool is best for your use case, check out our previous blog postCompare the most popular dashboard-centric toolsHere I'm going to focus on the Panel and show you three different ways to use it so you can see which one best suits your goals and situation.

hvPlot is the recommended entry point for plotting in the HoloViz ecosystem. If you're familiar with Pandas or the Xarray .plot API, you already know how to use hvPlot: just replaceplot of landIdf.hvplot.

If you are primarily interested in exploring datasets stored in Pandas, Dask DataFrames or Xarray DataArrays, the .interactive hvPlot support is the best way to use panels. AND. interactive, you can very easily turn your edit pipeline into a dashboard with just a few lines of code. To learn more about how hvPlot .interactive works, seeOur previous blog posts and videosin this topic.

Below is the hvPlot.interactive code used to create the dashboard above. Here we will highlight some key points:

hvPlot.interactive focuses on data. Once you have a data frame, you can turn it into an interactive data frame by callingidf=df.interactive().
In this code we define three widgetsCylinder,producer, MEelevatorThis way our users can interactively check these three values. We can then pass the widget to the data processing pipeline, resulting in an interactive data processing pipelineProduction lineand build an interactive plotplotReflects the value selected by the widget.
We then use templates to display widgets in the sidebar and design the content of the app.

Note that even if you don't have a data frame to start with,hvplot.bind(function, widget).interactive()You can bind functions to widgets and make the associated functions interactive. This feature allows you to query data from a database or web API, so even if you don't, you can still use .interactiveHoweverYou have your data frame at your fingertips.

What if, instead of starting with the dataset you're exploring, you write functions that return what you want to display, whether it's the dataset or not?

pn.bind doesn't start with a data frame or the function that creates the data frame, it starts with a function. As you can see in the code below, the first 19 lines import the package and define the widget exactly as before. The difference starts on line 20, where we define a plot function that returns a plot (or whatever else the array can display).

Magic happens when we useimprovementBinding design functionsconspiracywith a widgetCylinder,producer,elevator. The result is an interactive storyinteractive story:

interactive plot = pn.bind(plot, cylinders, mfr, y-axis)

you can use itimprovement"Bundle" the widget to any number of different functions, then use the Toolbar to set each "bound" function to be called automatically when any widget associated with it is modified. This reactive programming model allows you to create any collection of widgets and output in your dashboard, and pn.bind is a great approach if your goal is to build applications rather than explore datasets.

And if you aremainlyWrite code for research, analysis, science or engineering, but youRETURNDo you want to support the optional GUI application interface? i.e. what if you need to maintain a codebase that can be used as a GUILubAs a command line, batch or other automated process?

If your code is usually organized as python functions, then pn.bind is fine for that. Just put the functions in an import file and "bind" them into an app.py widget in the file to create the GUI version. What if your code was organized as python classes? In this case, the board is designed to workparameterpackage that allows you to declare all code parameters in a python class and thenSuitablyOpen the GUI to edit these values while completely separating GUI code from non-GUI code.

As you can see in the code below, for this method we create a class calledinteractive dashboard.In this class we create three parametersCylinder,producer,elevatorNote that these are abstract parameters, not table widgets, so the code is not bound to any specific GUI context. More importantly, we don't need to rely on the array to call and use this class. We can use this dashboard class without using Panel or any other GUI library.

As with the pn.bind method above, we useconspiracyfunction to create our plot. This@param.dependsThe decorator allows us to explicitly express the dependencies between the drawing function and its parameters, so that we know that this drawing depends on three widgets.

We create an instance of this class by callingdashboard = interactiveDashboard();Then, in the last step, we use the template to display the parametersboard parametersin the sidebar and the plotdashboard. diagramin the content of the application.

Are you into data mining?

If you're a scientist or data scientist working with Panda, Dask DataFrame, or Xarray objects, get started with hvPlot.interactive. As a data analyst, I have found hvPlot.interactive to meet most of my dashboarding needs.

code complexity:

hvPlot .interactive < Panel .bind < Param .depends

hvPlot.interactive is the easiest to learn and implement, and produces very short, readable code. It works inside hvPlot. While it uses Panel to create Panel dashboards, you don't really need to know much about Panel.
The .bind array requires you to write a function, which is also very simple and is a better choice if you want to write an application that doesn't do heavy calculations centered around data frames.
Param .depends requires classes to be written, which is convenient for a subset of people who maintain large class-based Python codebases.

Application flexibility:

hvPlot .interactive < Panel .bind < Param .depends

hvPlot.interactive is limited to Pandas, Dask, Xarray DataFrames or functions that create such data objects.
The .bind array can handle collections and computations of arbitrary objects, but is specific to building applications.
The Param.depends method allows you to write GUI-enabled code, but it can also be used completely standalone without any GUI dependencies.

Can I use Jupyter Notebook to develop applications?

Yes exactly! Note that all three sample files shown above are .py files, but they can also be .ipynb files. So if you are a Jupyter Notebook user, you can create a dashboard in Jupyter Notebook and run ittable service file name.ipynbSupport your application.

What if I need more control? Should I use other supported methods like pn.depends, pn.interact, param.watch or HoloViews DynamicMap?

Most users are better off using one of the three methods listed in this document. pn.interact is primarily intended to migrate from ipywidets.interact, which has limited functionality. pn.bind replaces pn.depends and serves the same purpose while helping to isolate GUI code from the application rather than affecting domain-specific calculations. Param.watch is the base implementation of all these methods, so you can use it if you need absolute control over events and related calculations, but even for complex applications such control is rarely needed. HoloViews DynamicMap can be used to optimize your application to avoid flickering and provide small updates to parts of your design, but it is more difficult to describe than the approach here and is not required until you are ready to optimize the interactive performance.

Check the official documentation:holowiz.org,panel.holoviz.org, MEhvplot.holoviz.org.
Controlhttps://awesome-panel.org/Find inspiration.

I hope this article helps you! If you have any questions or want to connect with other HoloViz users, check out the sitehttps://discourse.holoviz.org/.

ThanksJim Bednarfeedback and support!

. . .

pass throughSophia YoungIMarka Skova MadsenaSeptember 20, 2022

Sophia Yang is a Senior Data Scientist at Anaconda. contact meLinkedin,Twitter, MEYoutubeand subscribe to DS/MLBook club❤️