CODEWITHSUNDEEP
plotly
Woden
Woden

Reputation: 1386

Plotly: how to properly limit the row shown with a vertical scroller

I am analyzing the vaccination per hundred around the world and want to plot the country as row data and the numerical data as the column value. However, when I put the data in, lots of countries' names are hidden, with thin bars. How could I limit the rows, such as 20 rows of countries, scroll down to view more data? Thanks.

Illustration as below, currently using plotly.express. enter image description here

Upvotes: 0

Views: 793

Answers (1)

Rob Raymond
Rob Raymond

Reputation: 31156

import plotly.express as px
import pandas as pd
import io
import requests
from IPython.core.display import display, HTML

# get and prepare data...
df = pd.read_csv(io.StringIO(
    requests.get("https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv").text))
df["date"] = pd.to_datetime(df["date"])
dfp = df.dropna(subset=["continent", "total_vaccinations_per_hundred"]).loc[
    :, ["iso_code", "location", "date", "total_vaccinations_per_hundred"]
].sort_values("date").groupby("iso_code").last()


# give 15 pixels to each country for height
buffer = io.StringIO()
px.bar(dfp.sort_values("location", ascending=False),
       x="total_vaccinations_per_hundred",
       y="location",
       orientation="h"
      ).update_layout(height=len(dfp)*15).write_html(buffer, full_html=False)


# use HTML techniques for scoll bar, set heigh as required
HTML('<div style="overflow-y:scroll;height: 200px;">' + buffer.getvalue().encode().decode() + "</div>")

Upvotes: 1

Related Questions