How do I render multiple charts using PyScript?

Question

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>

Use CSS (styles) to size and position the DOM <div> elements. — John Hanley
– John Hanley, Commented Sep 22, 2022 at 5:13
I think the issue is with the Pyscript. I guess I am asking how to "reset". For instance, when I plot the chart, it plots all the previously defined charts as well. — Adn
– Adn, Commented Sep 22, 2022 at 9:51
Thanks for the heads up about the duplicate question @JohnHanley, that's my bad and I'll avoid doing it in the future. I figured out how to fix the issue for the most part. By using plt.figure() you can identify figures. So for example: plt.figure(1) for the pie chart and plt.figure(2) for the column chart. — Adn
– Adn, Commented Sep 26, 2022 at 8:59

tdy · Accepted Answer · 2022-09-27 02:33:30Z

1

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>

edited Sep 27, 2022 at 2:33

tdy

42.1k42 gold badges124 silver badges125 bronze badges

answered Sep 26, 2022 at 9:03

Adn

357 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I render multiple charts using PyScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related