How to animate chart with multiple y axis (python) - python

I am trying to make animated plot (currently using plotly.express but open to any other solutions) with secondary y axis. I have read different threads about how to animate a bar chart with multiple groups (Plotly: How to animate a bar chart with multiple groups using plotly express?) and make second axis on plotly-express (Plotly: How to plot on secondary y-Axis with plotly express), however I havent found any answer on how to make animated plot with secondary y axis.
Here is my code
import pandas as pd
import plotly.express as px
df = pd.read_csv("plotly_animation_stackoverflow.csv")
px.bar(data_frame=df,x="date",y=["A","B","C"],animation_frame="lag",barmode="group")
and I cannot see the bar chart for column C because of scale issue
There is also an issue with plotly-express as my data frame expand with additional lags. I can easily do this in Tableau, however I am trying to keep this open source. Is there another way that I can pass a function to a plot that it applies additional lags as I move the slide bar?
here is the data
date,A,B,C,lag
8/22/2016,54987,36488,0.3389,0
8/23/2016,91957,73793,0.3389,0
8/24/2016,91957,73793,0.3357,0
8/25/2016,91957,73793,0.3291,0
8/26/2016,91957,73793,0.3295,0
8/29/2016,91957,73793,0.3281,0
8/30/2016,107657,82877,0.3273,0
8/31/2016,107657,82877,0.3247,0
9/1/2016,107657,82877,0.322,0
9/2/2016,107657,82877,0.3266,0
8/22/2016,54987,36488,NA,1
8/23/2016,91957,73793,0.3389,1
8/24/2016,91957,73793,0.3389,1
8/25/2016,91957,73793,0.3357,1
8/26/2016,91957,73793,0.3291,1
8/29/2016,91957,73793,0.3295,1
8/30/2016,107657,82877,0.3281,1
8/31/2016,107657,82877,0.3273,1
9/1/2016,107657,82877,0.3247,1
9/2/2016,107657,82877,0.322,1
9/3/2016,,,0.3266,1
8/22/2016,54987,36488,,2
8/23/2016,91957,73793,,2
8/24/2016,91957,73793,0.3389,2
8/25/2016,91957,73793,0.3389,2
8/26/2016,91957,73793,0.3357,2
8/29/2016,91957,73793,0.3291,2
8/30/2016,107657,82877,0.3295,2
8/31/2016,107657,82877,0.3281,2
9/1/2016,107657,82877,0.3273,2
9/2/2016,107657,82877,0.3247,2
9/3/2016,,,0.322,2
9/4/2016,,,0.3266,2


after building the figure, update required traces to use secondary y-axis. This needs to include traces within frames as well as traces within figure
configure secondary y-axis
import pandas as pd
import plotly.express as px
import io
data = """date,A,B,C,lag
8/22/2016,54987,36488,0.3389,0
8/23/2016,91957,73793,0.3389,0
8/24/2016,91957,73793,0.3357,0
8/25/2016,91957,73793,0.3291,0
8/26/2016,91957,73793,0.3295,0
8/29/2016,91957,73793,0.3281,0
8/30/2016,107657,82877,0.3273,0
8/31/2016,107657,82877,0.3247,0
9/1/2016,107657,82877,0.322,0
9/2/2016,107657,82877,0.3266,0
8/22/2016,54987,36488,NA,1
8/23/2016,91957,73793,0.3389,1
8/24/2016,91957,73793,0.3389,1
8/25/2016,91957,73793,0.3357,1
8/26/2016,91957,73793,0.3291,1
8/29/2016,91957,73793,0.3295,1
8/30/2016,107657,82877,0.3281,1
8/31/2016,107657,82877,0.3273,1
9/1/2016,107657,82877,0.3247,1
9/2/2016,107657,82877,0.322,1
9/3/2016,,,0.3266,1
8/22/2016,54987,36488,,2
8/23/2016,91957,73793,,2
8/24/2016,91957,73793,0.3389,2
8/25/2016,91957,73793,0.3389,2
8/26/2016,91957,73793,0.3357,2
8/29/2016,91957,73793,0.3291,2
8/30/2016,107657,82877,0.3295,2
8/31/2016,107657,82877,0.3281,2
9/1/2016,107657,82877,0.3273,2
9/2/2016,107657,82877,0.3247,2
9/3/2016,,,0.322,2
9/4/2016,,,0.3266,2"""
df = pd.read_csv(io.StringIO(data))
fig = px.bar(data_frame=df,x="date",y=["A","B","C"],animation_frame="lag",barmode="group")
# update approprate traces to use secondary yaxis
for t in fig.data:
if t.name=="C": t.update(yaxis="y2")
for f in fig.frames:
for t in f.data:
if t.name=="C": t.update(yaxis="y2")
# configure yaxis2 and give it some space
fig.update_layout(yaxis2={"overlaying":"y", "side":"right"}, xaxis={"domain":[0,.98]})

Related

How do you put the x axis labels on the top of the heatmap created with seaborn? [duplicate]

This question already has answers here:
How to move labels from bottom to top without adding "ticks"
(2 answers)
How to have the axis ticks in both top and bottom, left and right of a heatmap
(2 answers)
Closed 4 months ago.
I have created a heatmap using the seaborn and matplotlib package in python, and while it is perfectly suited for my current needs, I really would prefer to have the labels on the x-axis of the heatmap to be placed at the top of the plot, rather than at the bottom (which seems to be its default).
So an abridged form of my data looks like this:
NP NP1 NP2 NP3 NP4 NP5
identifier
A1BG~P04217 -0.094045 0.012229 0.102279 1.319618 0.002383
A2M~P01023 -0.805089 -0.477339 -0.351341 0.089735 -0.473815
AARS1~P49588 0.081827 -0.099849 -0.287426 0.101588 0.136366
ABCB6~Q9NP58 0.109911 0.458039 -0.039325 -0.484872 1.905586
ABCC1~I3L4X2 -0.560155 0.580285 0.012868 0.291303 -0.407900
ABCC4~O15439 0.055264 0.138630 -0.204665 0.191241 0.304999
ABCE1~P61221 -0.510108 -0.059724 -0.233365 0.078956 -0.651327
ABCF1~Q8NE71 -0.348526 -0.135414 -0.390021 -0.190644 -0.276303
ABHD10~Q9NUJ1 0.237959 -2.060834 0.325901 -0.778036 -4.046345
ABHD11~Q8NFV4 0.294587 1.193258 -0.797294 -0.148064 -1.153391
And when I use the following code:
import seaborn as sns
import matplotlib as plt
fig, ax = plt.subplots(figsize=(10,30))
ax = sns.heatmap(df_example, annot=True, xticklabels=True)
I get this kind of plot:
https://imgpile.com/i/T3zPH1
I should note that the this plot was made from the abridged dataframe above, the actual dataframe has thousands of identifiers, making it very long.
But as you can see, the labels on the x axis only appear at the bottom. I have been trying to get them to appear on the top, but seaborn doesn't seem to allow this kind of formatting.
So I have also tried using plotly express, but while I solve the issue of placing my x-axis labels on top, I have been completely unable to format the heat map as I had before using seaborn. The following code:
import plotly.express as px
fig = px.imshow(df_example, width= 500, height=6000)
fig.update_xaxes(side="top")
fig.show()
yields this kind of plot: https://imgpile.com/i/T3zF42.
I have tried many times to reformat it using the documentation from plotly (https://plotly.com/python/heatmaps/), but I can't seem to get it to work. When one thing is fixed, another problem arises. I really just want to keep using the seaborn based code as above, and just fix the x-axis labels. I'm also happy to have the x-axis label at both the top and bottom of the plot, but I can't get that work presently. Can someone advise me on what to do here?

Ok, so I did a bit more research, and it turns out you can add the follow code with the seaborn approach:
plt.tick_params(axis='both', which='major', labelsize=10, labelbottom = False, bottom=False, top = False, labeltop=True)

If your data are stored into csv file, you can use this code:
import pandas as pd
import plotly.express as px
df = pd.read_csv("file.csv").round(2)
fig = px.imshow(df.iloc[:,1:],
y = df['identifier'],
text_auto=True, aspect="auto")
fig.show()
The data in the CSV file are in the following format:
identifier NP1 NP2 NP3 NP4 NP5
A1BG~P04217 -0.094045 0.012229 0.102279 1.319618 0.002383
A2M~P01023 -0.805089 -0.477339 -0.351341 0.089735 -0.473815
AARS1~P49588 0.081827 -0.099849 -0.287426 0.101588 0.136366
ABCB6~Q9NP58 0.109911 0.458039 -0.039325 -0.484872 1.905586
ABCC1~I3L4X2 -0.560155 0.580285 0.012868 0.291303 -0.407900
ABCC4~O15439 0.055264 0.138630 -0.204665 0.191241 0.304999
ABCE1~P61221 -0.510108 -0.059724 -0.233365 0.078956 -0.651327
ABCF1~Q8NE71 -0.348526 -0.135414 -0.390021 -0.190644 -0.276303
ABHD10~Q9NUJ1 0.237959 -2.060834 0.325901 -0.778036 -4.046345
ABHD11~Q8NFV4 0.294587 1.193258 -0.797294 -0.148064 -1.153391
Now let's display the xaxis top of the heatmap by adding:
fig.update_layout(xaxis = dict(side ="top"))
Alternative solution if you have old version of Plotly:
fig = go.Figure(data=go.Heatmap(
x=df.columns[1:],
y=df.identifier,
z=df.iloc[:,1:],
text=df.iloc[:,1:],
texttemplate="%{text}"))
fig.update_layout(xaxis = dict(side ="top"))
fig.show()

Plotly Express - plot subset of dataframe columns by default and the rest as option

I am using plotly express to plot figures this way :
fig = px.line(df,
x=df.index,
y=df.columns
)
It displays the graph properly and shows all the columns by default (as lines in the graph) with option to uncheck (or check) them to disable showing whatever we want if needed.
What I would like is to show the same graph but by default uncheking some of the columns initially and keep the option to check or uncheck them for visualization.
This means that I cannot take only a subset of columns as new data frame to show as the other columns are still relevant.
Did not find anything in the documentation unfortunately...
Thank you in advance.

You can use the visible property of the traces to state it is only in the legend. Below shows all columns in the figure then first two columns are set as visible, all other columns are only in the legend.
import plotly.express as px
import pandas as pd
import numpy as np
# simulate dataframe
df = pd.DataFrame(
{c: np.random.uniform(0, 1, 100) + cn for cn, c in enumerate("ABCDEF")}
)
fig = px.line(df, x=df.index, y=df.columns)
# for example only display first two columns of data frame, all others can be displayed
# by clicking on legend item
fig.for_each_trace(
lambda t: t.update(visible=True if t.name in df.columns[:2] else "legendonly")
)

Plotly: How to plot candlestick charts on a subplot?

I am trying to plot a subplot which contains 14 candlestick charts of cryptocurrency data. (
https://www.kaggle.com/c/g-research-crypto-forecasting)
However, it seems that it can't display the figure properly.
Here is my code:
from plotly import subplots
import plotly.graph_objects as go
fig = subplots.make_subplots(rows=7,cols=2)
for ix,coin_name in enumerate(asset_details["Asset_Name"]):
coin_df = crypto_df[crypto_df["Asset_ID"]==asset_names_dict[coin_name]].set_index("timestamp")
coin_df_mini = coin_df.iloc[-100:]
column = lambda ix: 1 if ix % 2 == 0 else 2
candlestick = go.Candlestick(x=coin_df_mini.index, open=coin_df_mini['Open'], high=coin_df_mini['High'], low=coin_df_mini['Low'], close=coin_df_mini['Close'])
fig = fig.add_trace(candlestick, row=((ix//2) + 1), col=column(ix))
fig.update_layout(xaxis_rangeslider_visible=False)
fig.update_layout(title_text="Candlestick Charts", height=2800)
fig.show()
And here is the problem:
rangeslider_problem
No matter I plot the figure with or without the rangeslider, it's always out of shape.

You need to hide the slider on the x-axis unit created in the subplot. My answer was to do all the subplots manually. I don't have time to deal with this right now, but there is also a way to update the output content in a loop process.
fig.update_layout(xaxis1=dict(rangeslider=dict(visible=False)),
xaxis2=dict(rangeslider=dict(visible=False)),
xaxis3=dict(rangeslider=dict(visible=False)),
xaxis4=dict(rangeslider=dict(visible=False)),
xaxis5=dict(rangeslider=dict(visible=False)),
xaxis6=dict(rangeslider=dict(visible=False)),
xaxis7=dict(rangeslider=dict(visible=False)),
xaxis8=dict(rangeslider=dict(visible=False)),
xaxis9=dict(rangeslider=dict(visible=False)),
xaxis10=dict(rangeslider=dict(visible=False)),
xaxis11=dict(rangeslider=dict(visible=False)),
xaxis12=dict(rangeslider=dict(visible=False)),
xaxis13=dict(rangeslider=dict(visible=False)),
xaxis14=dict(rangeslider=dict(visible=False)),
)

Plotly: How to update / redraw a plotly express figure with new data?

During debugging or computationally heavy loops, i would like to see how my data processing evolves (for example in a line plot or an image).
In matplotlib the code can redraw / update the figure with plt.cla() and then plt.draw() or plt.pause(0.001), so that i can follow the progress of my computation in real time or while debugging. How do I do that in plotly express (or plotly)?

So i think i essentially figured it out. The trick is to not use go.Figure() to create a figure, but go.FigureWidget() Which is optically the same thing, but behind the scenes it's not.
documentation
youtube video demonstration
Those FigureWidgets are exactly there to be updated as new data comes in. They stay dynamic, and later calls can modify them.
A FigureWidget can be made from a Figure:
figure = go.Figure(data=data, layout=layout)
f2 = go.FigureWidget(figure)
f2 #display the figure
This is practical, because it makes it possible to use the simplified plotly express interface to create a Figure and then use this to construct a FigureWidget out of it. Unfortunately plotly express does not seem to have it's own simplified FigureWidget module. So one needs to use the more complicated go.FigureWidget.

I'm not sure if an idential functionality exists for plotly. But you can at least build a figure, expand your data source, and then just replace the data of the figure without touching any other of the figure elements like this:
for i, col in enumerate(fig.data):
fig.data[i]['y'] = df[df.columns[i]]
fig.data[i]['x'] = df.index
It should not matter if your figure is a result of using plotly.express or go.Figure since both approaches will produce a figure structure that can be edited by the code snippet above. You can test this for yourself by setting the two following snippets up in two different cells in JupyterLab.
Code for cell 1
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# code and plot setup
# settings
pd.options.plotting.backend = "plotly"
# sample dataframe of a wide format
np.random.seed(5); cols = list('abc')
X = np.random.randn(50,len(cols))
df=pd.DataFrame(X, columns=cols)
df.iloc[0]=0;df=df.cumsum()
# plotly figure
fig = df.plot(template = 'plotly_dark')
fig.show()
Code for cell 2
# create or retrieve new data
Y = np.random.randn(1,len(cols))
# organize new data in a df
df2 = pd.DataFrame(Y, columns = cols)
# add last row to df to new values
# this step can be skipped if your real world
# data is not a cumulative process like
# in this example
df2.iloc[-1] = df2.iloc[-1] + df.iloc[-1]
# append new data to existing df
df = df.append(df2, ignore_index=True)#.reset_index()
# replace old data in fig with new data
for i, col in enumerate(fig.data):
fig.data[i]['y'] = df[df.columns[i]]
fig.data[i]['x'] = df.index
fig.show()
Running the first cell will put together some data and build a figure like this:
Running the second cell will produce a new dataframe with only one row, append it to your original dataframe, replace the data in your existing figure, and show the figure again. You can run the second cell as many times as you like to redraw your figure with an expanding dataset. After 50 runs, your figure will look like this:

Python Plotly Express Scatter Plot

I want to create an interactive scatter plot; so I am using the plotly.graph_objects module.
My data has two columns of about 100 points.
When I make a line plot, I have no problem.
But when I try to make a scatter plot, Jupyter seems to hang (message at the bottom says - Local Host not responding)
It takes a while for Jupyter to respond and I still have no plot.
The code I am using is:
import plotly.express as px
import plotly.graph_objects as go
fig = go.Figure()
var_list = ['cloxth1 ()','cloxth2 ()']
for item in var_list:
stripped_item = item.replace(' ()','')
fig.add_trace(go.Scatter(
x=np.linspace(0,len(df),len(df)),
y=df[item],
mode='markers',
marker={'size':1},
name = item
))
fig.update_layout(title = 'CLOXTH',
xaxis_title = 'data samples',
yaxis_title = 'mV')
fig.show()
Is there anything wrong with the way I am using go.Scatter?
I tried using px.scatter instead. It seems to work, as in I get a scatter plot. But in the plotly.express case I am unable to have a proper legend for 'cloxth1' and 'cloxth2'; also, both data sets are plotted with the same color.
How can I get around this?
A few rows from the data:
Sample Data
# read in with
df = pd.read_clipboard(sep=',', index_col=[0])
# copy to clipboard
,time(s),Filename,time_stamp,time_vector(ms),time_vector_zerobased(ms),cloxth1(),cloxth2()
0.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:03.8,0,0,725.9097285,725.9097285
1.001,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:04.8,1001,1001,725.9097285,725.9097285
2.001,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:05.8,2001,2001,725.9097285,725.9097285
3.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:06.8,3002,3002,725.9097285,725.9097285
4.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:07.8,4000,4000,725.9097285,725.9097285
5.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:08.8,5002,5002,725.9097285,725.9097285
6.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:09.8,6002,6002,725.9097285,725.9097285
7.001,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:10.8,7001,7001,725.9097285,725.9097285
8.003,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:11.8,8003,8003,725.9097285,725.9097285
9.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:12.8,9002,9002,725.9097285,725.9097285
10.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:13.8,10000,10000,725.9097285,725.9097285
11.005,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:14.8,11005,11005,725.9097285,725.9097285
12.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:15.8,12000,12000,725.9097285,725.9097285
13.001,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:16.8,13001,13001,725.9097285,725.9097285
14.003,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:17.8,14003,14003,725.9097285,725.9097285
15.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:18.8,15000,15000,725.9097285,725.9097285
16.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:19.8,16002,16002,725.9097285,725.9097285
17.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:20.8,17000,17000,725.9097285,725.9097285
18.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:21.8,18000,18000,725.9097285,725.9097285
19.003,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:22.8,19003,19003,725.9097285,725.9097285
20.001,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:23.8,20001,20001,725.9097285,725.9097285
21.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:24.8,21000,21000,725.9097285,725.9097285
22.005,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:25.8,22005,22005,725.9097285,725.9097285
23.0,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:26.8,23000,23000,725.9097285,725.9097285
24.002,4DRBUP1N8HB706662_Trip-Detail_2020-07-20,00-04-03.csv.zip,04:27.8,24002,24002,725.9097285,725.9097285

Categories

Resources