How do I render multiple charts using PyScript?

When rendering charts with PyScript, the second will use data from the first. How do I make sure that the second figure/chart only renders the data that I want?

Plot 1 (Working as intended):

Plot 2 (With overlapping charts):

Code:

<div id="table-section" class="container-fluid"></div>
<div id="piechart" class="container-fluid gx-3"></div>
<div id="columngraph" class="container-fluid gx-3"></div>
<py-script>
    import pandas as pd
    import numpy as np
    import matplotlib.pyplot as plt
    import seaborn as sns
    from pyodide.http import open_url

    url = open_url('../data/salaries.csv')

    df = pd.read_csv(url)
    table = df.head().to_html(classes="table")
    Element('table-section').element.innerHTML = table
</py-script>
<py-script output="piechart">
    min, max = df.salary_in_usd.quantile([0.15,0.985])

    df_no_outliers=df[(df.salary_in_usd>min) & (df.salary_in_usd&lt;max)]

    top_jobs=df_no_outliers.job_title.value_counts()[:7]

    n=df_no_outliers.shape[0]
    job_distribution=top_jobs*100/n
    job_distribution.plot(kind='pie',autopct='%1.0f%%', figsize=(15,8))
    plt.title('Job Distribution among top 10 in demand job title')

    plt
</py-script>
<py-script output="columngraph">
    (sns.barplot(x='work_year', y='salary_in_usd', data=df_no_outliers))

    plt
</py-script>

Solution

To render multiple charts use matplotlib.pyplot.figure(). This uniquely identifies the figures.

For example:

<py-script output="piechart">

    plt.figure(1)
    min, max = df.salary_in_usd.quantile([0.15,0.985])
    df_no_outliers=df[(df.salary_in_usd>min) & (df.salary_in_usd&lt;max)]
    top_jobs=df_no_outliers.job_title.value_counts()[:7]
    n=df_no_outliers.shape[0]
    job_distribution=top_jobs*100/n
    job_distribution.plot(kind='pie',autopct='%1.0f%%', figsize=(15,8))
    plt.title('Job Distribution among top 10 in demand job title')
    plt

</py-script>
<py-script output="barplot">

    plt.figure(2)
    barplot = sns.barplot(x='work_year', y='salary_in_usd', data=df_no_outliers)
    plt.tight_layout()
    plt

</py-script>