Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Finalize Basic Tutorials #6425

Merged
merged 26 commits into from
Mar 19, 2024
Merged

Finalize Basic Tutorials #6425

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
31ed209
content pn_bind
MarcSkovMadsen Mar 3, 2024
6aefbd7
add more references
MarcSkovMadsen Mar 3, 2024
5858f0a
update formulation
MarcSkovMadsen Mar 3, 2024
58deff2
add pn_rx
MarcSkovMadsen Mar 3, 2024
e166fa0
add note
MarcSkovMadsen Mar 3, 2024
64ca54d
fix
MarcSkovMadsen Mar 3, 2024
963212c
use .watch
MarcSkovMadsen Mar 3, 2024
0d6b122
review feedback
MarcSkovMadsen Mar 3, 2024
000febb
try to fix video on iphone
MarcSkovMadsen Mar 4, 2024
da14926
Update Community Tutorials
MarcSkovMadsen Mar 8, 2024
ee0b8d7
remove Thu Vu because outdated
MarcSkovMadsen Mar 8, 2024
622ddff
sort
MarcSkovMadsen Mar 8, 2024
e0cfa66
reorder
MarcSkovMadsen Mar 8, 2024
50e8532
CLEAN UP
MarcSkovMadsen Mar 8, 2024
c8bde59
Merge branch 'main' of https://github.com/holoviz/panel into enhancem…
MarcSkovMadsen Mar 8, 2024
d077e53
Merge branch 'main' of https://github.com/holoviz/panel into enhancem…
MarcSkovMadsen Mar 10, 2024
2686575
Merge remote-tracking branch 'origin/main' into enhancement/finalize-…
philippjfr Mar 11, 2024
d29d18e
Update pn_bind and pn_rx tutorials
philippjfr Mar 11, 2024
7361179
change height
MarcSkovMadsen Mar 14, 2024
ecf6bd3
review
MarcSkovMadsen Mar 14, 2024
80ddbbd
Merge branch 'main' into enhancement/finalize-basic-tutorial
MarcSkovMadsen Mar 15, 2024
fc4dea8
Merge branch 'main' into enhancement/finalize-basic-tutorial
philippjfr Mar 18, 2024
ac3f5e5
Replace table with definition list
philippjfr Mar 18, 2024
7504ce1
Some improvements for basic tutorials
philippjfr Mar 18, 2024
43e1c3b
Merge branch 'main' into enhancement/finalize-basic-tutorial
MarcSkovMadsen Mar 19, 2024
c7d6c0c
Merge branch 'enhancement/finalize-basic-tutorial' of https://github.…
MarcSkovMadsen Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added doc/_static/bar_chart_race.mp4
View file
Open in desktop
Binary file not shown.
11 changes: 11 additions & 0 deletions doc/tutorials/basic/build_animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,22 @@

In this tutorial, we will create a *bar chart race* using the [Altair](https://altair-viz.github.io) plotting library and the [`Player`](../../reference/widgets/Player.ipynb) widget.

*Todo: The below is for testing on ios. Clean up*
philippjfr marked this conversation as resolved.
Show resolved Hide resolved

https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4 NOT PLAYING ON IPHONE

<video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
<source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
Your browser does not support the video tag.
</video>

../../_static/bar_chart_race_2.mp4 IS PLAYING ON IPHONE

<video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
<source src="../../_static/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
Your browser does not support the video tag.
</video>

:::{dropdown} Dependencies

```bash
Expand Down
15 changes: 13 additions & 2 deletions doc/tutorials/basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Once you're comfortable, it's time to dive deeper:
|--------------------------|---------------------------|-------------------|------------------------------------------------------|
| **1. Display Content** | [`pn.panel`](pn_panel.md) | [Panes](panes.md) | [Performance Indicators](indicators_performance.md) |
| **2. Organize Content** | [Layouts](layouts.md) | [Control the Size](size.md) | [Align Content](align.md) |
| **3. Handle User Input** | [Widgets](widgets.md) | [React to User Input](pn_bind.md) | [Handle State](state.md) |
| **3. Handle User Input** | [Widgets](widgets.md) | [React to User Input](pn_bind.md) | [Reactive Expressions](pn_rx.md) |
| **4. Improve the look** | [Templates](templates.md)| [Designs](design.md) | [Styles](style.md) |
| **5. Improve the Feel** | [Caching](caching.md) | [Activity Indicators](indicators_activity.md) | [Progressive Updates](progressive_layouts.md) |

Expand All @@ -77,6 +77,17 @@ Now that you've got the basics down, it's time to put your skills to the test:

Let's start building some amazing wind turbine apps! 🌬️🌀

## Community Tutorials
Copy link
Collaborator Author

@MarcSkovMadsen MarcSkovMadsen Mar 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will probably have to update this list once in a while.

It would be really awesome if @sophiamyang would update the 3 Ways to Build a Panel Visualization Dashboard blog post. Main points to update would be

  • hvplot.interactive to pn.rx (code below)
  • button_type+button_style (as in code below)
  • sizing_mode of HoloViews pane (as in code below)
  • accent (as in code below)
  • the picture showing logos and download numbers. Panel logo is blue number and download numbers much higher.
import panel as pn
import hvplot.pandas

# Load Data
from bokeh.sampledata.autompg import autompg_clean as df

# Make DataFrame Pipeline Interactive
idf = pn.rx(df)

# Define Panel widgets
cylinders = pn.widgets.IntSlider(name='Cylinders', start=4, end=8, step=2)
mfr = pn.widgets.ToggleGroup(
    name='MFR',
    options=['ford', 'chevrolet', 'honda', 'toyota', 'audi'], 
    value=['ford', 'chevrolet', 'honda', 'toyota', 'audi'],
    button_type='primary',
    button_style="outline",
    )
yaxis = pn.widgets.RadioButtonGroup(
    name='Y axis', 
    options=['hp', 'weight'],
    button_type='primary',
    button_style="outline",
)

# Combine pipeline and widgets
rx_pipeline = (
    idf[
        (idf.cyl == cylinders) & 
        (idf.mfr.isin(mfr))
    ]
    .groupby(['origin', 'mpg'])[yaxis].mean()
    .to_frame()
    .reset_index()
    .sort_values(by='mpg')  
    .reset_index(drop=True)
)

# Pipe to hvplot
rx_plot = rx_pipeline.hvplot(x='mpg', y=yaxis, by='origin', color=["#ff6f69", "#ffcc5c", "#88d8b0"], line_width=6, height=400)

# Layout using Template
template = pn.template.FastListTemplate(
    title='Interactive DataFrame Dashboards with hvplot .interactive', 
    sidebar=[cylinders, 'Manufacturers', mfr, 'Y axis' , yaxis],
    main=[pn.pane.HoloViews(rx_plot, sizing_mode="stretch_width")],
    accent="#88d8b0",
)
template.servable()


Want more? Check out some amazing tutorials by the community.

- [3 Ways to Build a Panel Visualization Dashboard - Sophia Yang](https://towardsdatascience.com/3-ways-to-build-a-panel-visualization-dashboard-6e14148f529d) (Blog Post) | [PyTexas 2023](https://www.youtube.com/watch?v=8du4NNoOtII) (Video)
- [HoloViz: Visualization and Interactive Dashboards in Python - Jean-Luc Stevens](https://www.youtube.com/watch?v=61uHwBlxRug) (Video)
- [How to create Data Analytics Visualisation Dashboard using Python with Panel/Hvplot in just 10 mins - Atish Jain](https://www.youtube.com/watch?v=__QUQg96SFs) (Video)
- [Step-by-Step Guide to Create Multi-Page Dashboard using Panel - CoderzColumn](https://www.youtube.com/watch?v=G3M0lQcWpqE) (Video)
- [Transform a Python script into an interactive, web app and make it performant - Andrew Huang](https://blog.stackademic.com/transform-a-python-script-into-an-interactive-web-app-and-make-it-performant-73fa3b304cdf) (Blog Post)
- [Using Panel to Build Data Dashboards in Python - Will Norris](https://towardsdatascience.com/using-panel-to-build-data-dashboards-in-python-e87a04c9034d) (Blog Post)

```{toctree}
:titlesonly:
:hidden:
Expand All @@ -93,7 +104,7 @@ size
align
widgets
pn_bind
state
pn_rx
caching
indicators_activity
progressive_layouts
Expand Down
4 changes: 4 additions & 0 deletions doc/tutorials/basic/panes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ In this tutorial, we will learn to display objects with *Panes*:
A *Pane* is a component that can display an object. It takes an `object` as an argument.
:::

:::{note}
You might notice a lot of repetition from the previous section regarding `pn.panel`. Don't worry, it's intentional! We're doing this to empower you with the ability to compare and contrast. While `pn.panel` is incredibly user-friendly and versatile, specific Panes allow you to display output with precision and efficiency. This enables you to construct more intricate and high-performing applications.
:::

:::{note}
When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
:::
Expand Down
Loading
Loading