Try Plotly on fastpages
Trying out compatibility of interactive Plotly plots on fastpages
Ok, So what's the trick?
The trick is simple. Instead of using simple fig.show(), use HTML(fig.to_html(include_plotlyjs='cdn')).
If you use fig.show(), then the figure would not be rendered in fastpages. So we convert the figure to HTML and display the HTML format in notebook. Also, the output of HTML would not be rendered in Jupyter notebook, when you working. So I generally use fig.show() when I am working with the notebook and once done, I replace all fig.show() with the HTML(fig.to_html(include_plotlyjs='cdn')).
All of the examples below are taken from Plotly Examples gallery
from IPython.display import HTML
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
# Other Common imports
import pandas as pd
import numpy as np
import re
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')
fig = go.Figure(data=[go.Surface(z=z_data.values)])
fig.update_traces(contours_z=dict(show=True, usecolormap=True,
highlightcolor="limegreen", project_z=True))
fig.update_layout(title='Mt Bruno Elevation', autosize=False,
scene_camera_eye=dict(x=1.87, y=0.88, z=-0.64),
width=500, height=500,
margin=dict(l=65, r=50, b=65, t=90)
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
df = px.data.iris()
fig = px.scatter_3d(df, x='sepal_length', y='sepal_width', z='petal_width',
color='species')
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
# Initialize figure with 4 3D subplots
fig = make_subplots(
rows=2, cols=2,
specs=[[{'type': 'surface'}, {'type': 'surface'}],
[{'type': 'surface'}, {'type': 'surface'}]])
# Generate data
x = np.linspace(-5, 80, 10)
y = np.linspace(-5, 60, 10)
xGrid, yGrid = np.meshgrid(y, x)
z = xGrid ** 3 + yGrid ** 3
# adding surfaces to subplots.
fig.add_trace(
go.Surface(x=x, y=y, z=z, colorscale='Viridis', showscale=False),
row=1, col=1)
fig.add_trace(
go.Surface(x=x, y=y, z=z, colorscale='RdBu', showscale=False),
row=1, col=2)
fig.add_trace(
go.Surface(x=x, y=y, z=z, colorscale='YlOrRd', showscale=False),
row=2, col=1)
fig.add_trace(
go.Surface(x=x, y=y, z=z, colorscale='YlGnBu', showscale=False),
row=2, col=2)
fig.update_layout(
title_text='3D subplots with different colorscales',
height=800,
width=800
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
# Create figure
fig = go.Figure()
# Add traces, one for each slider step
for step in np.arange(0, 5, 0.1):
fig.add_trace(
go.Scatter(
visible=False,
line=dict(color="#00CED1", width=6),
name="𝜈 = " + str(step),
x=np.arange(0, 10, 0.01),
y=np.sin(step * np.arange(0, 10, 0.01))))
# Make 10th trace visible
fig.data[10].visible = True
# Create and add slider
steps = []
for i in range(len(fig.data)):
step = dict(
method="update",
args=[{"visible": [False] * len(fig.data)},
{"title": "Slider switched to step: " + str(i)}], # layout attribute
)
step["args"][0]["visible"][i] = True # Toggle i'th trace to "visible"
steps.append(step)
sliders = [dict(
active=10,
currentvalue={"prefix": "Frequency: "},
pad={"t": 50},
steps=steps
)]
fig.update_layout(
sliders=sliders
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
url = "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv"
dataset = pd.read_csv(url)
years = ["1952", "1962", "1967", "1972", "1977", "1982", "1987", "1992", "1997", "2002",
"2007"]
# make list of continents
continents = []
for continent in dataset["continent"]:
if continent not in continents:
continents.append(continent)
# make figure
fig_dict = {
"data": [],
"layout": {},
"frames": []
}
# fill in most of layout
fig_dict["layout"]["xaxis"] = {"range": [30, 85], "title": "Life Expectancy"}
fig_dict["layout"]["yaxis"] = {"title": "GDP per Capita", "type": "log"}
fig_dict["layout"]["hovermode"] = "closest"
fig_dict["layout"]["updatemenus"] = [
{
"buttons": [
{
"args": [None, {"frame": {"duration": 500, "redraw": False},
"fromcurrent": True, "transition": {"duration": 300,
"easing": "quadratic-in-out"}}],
"label": "Play",
"method": "animate"
},
{
"args": [[None], {"frame": {"duration": 0, "redraw": False},
"mode": "immediate",
"transition": {"duration": 0}}],
"label": "Pause",
"method": "animate"
}
],
"direction": "left",
"pad": {"r": 10, "t": 87},
"showactive": False,
"type": "buttons",
"x": 0.1,
"xanchor": "right",
"y": 0,
"yanchor": "top"
}
]
sliders_dict = {
"active": 0,
"yanchor": "top",
"xanchor": "left",
"currentvalue": {
"font": {"size": 20},
"prefix": "Year:",
"visible": True,
"xanchor": "right"
},
"transition": {"duration": 300, "easing": "cubic-in-out"},
"pad": {"b": 10, "t": 50},
"len": 0.9,
"x": 0.1,
"y": 0,
"steps": []
}
# make data
year = 1952
for continent in continents:
dataset_by_year = dataset[dataset["year"] == year]
dataset_by_year_and_cont = dataset_by_year[
dataset_by_year["continent"] == continent]
data_dict = {
"x": list(dataset_by_year_and_cont["lifeExp"]),
"y": list(dataset_by_year_and_cont["gdpPercap"]),
"mode": "markers",
"text": list(dataset_by_year_and_cont["country"]),
"marker": {
"sizemode": "area",
"sizeref": 200000,
"size": list(dataset_by_year_and_cont["pop"])
},
"name": continent
}
fig_dict["data"].append(data_dict)
# make frames
for year in years:
frame = {"data": [], "name": str(year)}
for continent in continents:
dataset_by_year = dataset[dataset["year"] == int(year)]
dataset_by_year_and_cont = dataset_by_year[
dataset_by_year["continent"] == continent]
data_dict = {
"x": list(dataset_by_year_and_cont["lifeExp"]),
"y": list(dataset_by_year_and_cont["gdpPercap"]),
"mode": "markers",
"text": list(dataset_by_year_and_cont["country"]),
"marker": {
"sizemode": "area",
"sizeref": 200000,
"size": list(dataset_by_year_and_cont["pop"])
},
"name": continent
}
frame["data"].append(data_dict)
fig_dict["frames"].append(frame)
slider_step = {"args": [
[year],
{"frame": {"duration": 300, "redraw": False},
"mode": "immediate",
"transition": {"duration": 300}}
],
"label": year,
"method": "animate"}
sliders_dict["steps"].append(slider_step)
fig_dict["layout"]["sliders"] = [sliders_dict]
fig = go.Figure(fig_dict)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
np.random.seed(1)
x0 = np.random.normal(2, 0.4, 400)
y0 = np.random.normal(2, 0.4, 400)
x1 = np.random.normal(3, 0.6, 600)
y1 = np.random.normal(6, 0.4, 400)
x2 = np.random.normal(4, 0.2, 200)
y2 = np.random.normal(4, 0.4, 200)
# Create figure
fig = go.Figure()
# Add traces
fig.add_trace(
go.Scatter(
x=x0,
y=y0,
mode="markers",
marker=dict(color="DarkOrange")
)
)
fig.add_trace(
go.Scatter(
x=x1,
y=y1,
mode="markers",
marker=dict(color="Crimson")
)
)
fig.add_trace(
go.Scatter(
x=x2,
y=y2,
mode="markers",
marker=dict(color="RebeccaPurple")
)
)
# Add buttons that add shapes
cluster0 = [dict(type="circle",
xref="x", yref="y",
x0=min(x0), y0=min(y0),
x1=max(x0), y1=max(y0),
line=dict(color="DarkOrange"))]
cluster1 = [dict(type="circle",
xref="x", yref="y",
x0=min(x1), y0=min(y1),
x1=max(x1), y1=max(y1),
line=dict(color="Crimson"))]
cluster2 = [dict(type="circle",
xref="x", yref="y",
x0=min(x2), y0=min(y2),
x1=max(x2), y1=max(y2),
line=dict(color="RebeccaPurple"))]
fig.update_layout(
updatemenus=[
dict(
type="buttons",
buttons=[
dict(label="None",
method="relayout",
args=["shapes", []]),
dict(label="Cluster 0",
method="relayout",
args=["shapes", cluster0]),
dict(label="Cluster 1",
method="relayout",
args=["shapes", cluster1]),
dict(label="Cluster 2",
method="relayout",
args=["shapes", cluster2]),
dict(label="All",
method="relayout",
args=["shapes", cluster0 + cluster1 + cluster2])
],
)
]
)
# Update remaining layout properties
fig.update_layout(
title_text="Highlight Clusters",
showlegend=False,
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
# Generate dataset
import numpy as np
np.random.seed(1)
x0 = np.random.normal(2, 0.4, 400)
y0 = np.random.normal(2, 0.4, 400)
x1 = np.random.normal(3, 0.6, 600)
y1 = np.random.normal(6, 0.4, 400)
x2 = np.random.normal(4, 0.2, 200)
y2 = np.random.normal(4, 0.4, 200)
# Create figure
fig = go.Figure()
# Add traces
fig.add_trace(
go.Scatter(
x=x0,
y=y0,
mode="markers",
marker=dict(color="DarkOrange")
)
)
fig.add_trace(
go.Scatter(
x=x1,
y=y1,
mode="markers",
marker=dict(color="Crimson")
)
)
fig.add_trace(
go.Scatter(
x=x2,
y=y2,
mode="markers",
marker=dict(color="RebeccaPurple")
)
)
# Add buttons that add shapes
cluster0 = [dict(type="circle",
xref="x", yref="y",
x0=min(x0), y0=min(y0),
x1=max(x0), y1=max(y0),
line=dict(color="DarkOrange"))]
cluster1 = [dict(type="circle",
xref="x", yref="y",
x0=min(x1), y0=min(y1),
x1=max(x1), y1=max(y1),
line=dict(color="Crimson"))]
cluster2 = [dict(type="circle",
xref="x", yref="y",
x0=min(x2), y0=min(y2),
x1=max(x2), y1=max(y2),
line=dict(color="RebeccaPurple"))]
fig.update_layout(
updatemenus=[
dict(buttons=list([
dict(label="None",
method="relayout",
args=["shapes", []]),
dict(label="Cluster 0",
method="relayout",
args=["shapes", cluster0]),
dict(label="Cluster 1",
method="relayout",
args=["shapes", cluster1]),
dict(label="Cluster 2",
method="relayout",
args=["shapes", cluster2]),
dict(label="All",
method="relayout",
args=["shapes", cluster0 + cluster1 + cluster2])
]),
)
]
)
# Update remaining layout properties
fig.update_layout(
title_text="Highlight Clusters",
showlegend=False,
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
# Load data
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]
# Create figure
fig = go.Figure()
fig.add_trace(
go.Scatter(x=list(df.Date), y=list(df.High)))
# Set title
fig.update_layout(
title_text="Time series with range slider and selectors"
)
# Add range slider
fig.update_layout(
xaxis=dict(
rangeselector=dict(
buttons=list([
dict(count=1,
label="1m",
step="month",
stepmode="backward"),
dict(count=6,
label="6m",
step="month",
stepmode="backward"),
dict(count=1,
label="YTD",
step="year",
stepmode="todate"),
dict(count=1,
label="1y",
step="year",
stepmode="backward"),
dict(step="all")
])
),
rangeslider=dict(
visible=True
),
type="date"
)
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))
np.random.seed(1)
x = np.random.rand(100)
y = np.random.rand(100)
f = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])
scatter = f.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
f.layout.hovermode = 'closest'
# create our callback function
def update_point(trace, points, selector):
c = list(scatter.marker.color)
s = list(scatter.marker.size)
for i in points.point_inds:
c[i] = '#bae2be'
s[i] = 20
with f.batch_update():
scatter.marker.color = c
scatter.marker.size = s
scatter.on_click(update_point)
# f.show()
HTML(f.to_html(include_plotlyjs='cdn'))
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/Mining-BTC-180.csv")
for i, row in enumerate(df["Date"]):
p = re.compile(" 00:00:00")
datetime = p.split(df["Date"][i])[0]
df.iloc[i, 1] = datetime
fig = make_subplots(
rows=3, cols=1,
shared_xaxes=True,
vertical_spacing=0.03,
specs=[[{"type": "table"}],
[{"type": "scatter"}],
[{"type": "scatter"}]]
)
fig.add_trace(
go.Scatter(
x=df["Date"],
y=df["Mining-revenue-USD"],
mode="lines",
name="mining revenue"
),
row=3, col=1
)
fig.add_trace(
go.Scatter(
x=df["Date"],
y=df["Hash-rate"],
mode="lines",
name="hash-rate-TH/s"
),
row=2, col=1
)
fig.add_trace(
go.Table(
header=dict(
values=["Date", "Number<br>Transactions", "Output<br>Volume (BTC)",
"Market<br>Price", "Hash<br>Rate", "Cost per<br>trans-USD",
"Mining<br>Revenue-USD", "Trasaction<br>fees-BTC"],
font=dict(size=10),
align="left"
),
cells=dict(
values=[df[k].tolist() for k in df.columns[1:]],
align = "left")
),
row=1, col=1
)
fig.update_layout(
height=800,
showlegend=False,
title_text="Bitcoin mining stats for 180 days",
)
# fig.show()
HTML(fig.to_html(include_plotlyjs='cdn'))