We Keep Coding

Adding text or cross sign on every subplot of plotly, each in unique positions of the subplots

I am struggling to put a cross sign in certain positions of each subplots of plotly in Python. I have 2 subplots and in each one, I want to out the cross in certain positions as below.
Position of the cross sign at the subplot_1 and 2 are attached.
import numpy as np
import plotly.graph_objs as go
import plotly.figure_factory as ff
from plotly.subplots import make_subplots
import string
#Define data for heatmap
N=5
x = np.array([10*k for k in range(N)])
y = np.linspace(0, 2, N)
z1 = np.random.randint(5,15, (N,N))
z2 = np.random.randint(10,27, (N,N))
mytext = np.array(list(string.ascii_uppercase))[:25].reshape(N,N)
fig1 = ff.create_annotated_heatmap(z1, x.tolist(), y.tolist(), colorscale='matter')
fig2 = ff.create_annotated_heatmap(z2, x.tolist(), y.tolist(), annotation_text=mytext, colorscale='Viridis')
fig = make_subplots(
rows=1, cols=2,
horizontal_spacing=0.05,
)
fig.add_trace(fig1.data[0], 1, 1)
fig.add_trace(fig2.data[0], 1, 2)
annot1 = list(fig1.layout.annotations)
annot2 = list(fig2.layout.annotations)
for k in range(len(annot2)):
annot2[k]['xref'] = 'x2'
annot2[k]['yref'] = 'y2'
fig.update_layout(annotations=annot1+annot2)

There are two ways to deal with this question: the first is to use the line mode of the scatterplot and the second is to add a shape. In the line mode of the scatterplot, the real starting position is -0.5, so the heatmap and the cross line are misaligned. So I chose to add a figure.
Also, I can now annotate without using figure_factory, so I'll use a graph object to construct the graph. The configuration is one heatmap combined with two shapes, with the y-axis and x-axis scales changed.
import numpy as np
import plotly.graph_objs as go
from plotly.subplots import make_subplots
np.random.seed(1)
fig = make_subplots(rows=1,
cols=2,
horizontal_spacing=0.05,
)
fig.add_trace(go.Heatmap(z=z1,
text=z1,
texttemplate='%{text}',
showscale=False,
),
row=1,col=1
)
fig.add_shape(type='line',
x0=1.5, y0=1.5, x1=2.5, y1=2.5,
line=dict(color='black', width=2)
)
fig.add_shape(type='line',
x0=2.5, y0=1.5, x1=1.5, y1=2.5,
line=dict(color='black', width=2)
)
fig.add_trace(go.Heatmap(z=z2,
text=mytext,
texttemplate='%{text}',
showscale=False,
colorscale = 'Viridis'
),
row=1,col=2
)
fig.add_shape(type='line',
x0=0.5, y0=-0.5, x1=1.5, y1=0.5,
line=dict(color='black', width=2),
row=1,col=2
)
fig.add_shape(type='line',
x0=1.5, y0=-0.5, x1=0.5, y1=0.5,
line=dict(color='black', width=2),
row=1, col=2
)
fig.update_yaxes(tickvals=[0,1,2,3,4], ticktext=y.tolist())
fig.update_xaxes(tickvals=[0,1,2,3,4], ticktext=x.tolist())
fig.update_layout(autosize=False, width=800)
fig.show()

How to highlight a single data point on a scatter plot using plotly express

In a scatter plot created using px.scatter, how do I mark one data point with a red star?
fig = px.scatter(df, x="sepal_width", y="sepal_length")
# Now set a single data point to color="red", symbol="star".

This isn't really highlighting an already existing data point within a trace you've already produced, but rather adding another one with a different visual appearance. But it does exactly what you're looking for:
fig.add_trace(go.Scatter(x=[3.5], y=[6.5], mode = 'markers',
marker_symbol = 'star',
marker_size = 15))
Plot:
Complete code:
import plotly.express as px
import pandas as pd
import plotly.graph_objects as go
df = px.data.iris() # iris is a pandas DataFrame
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.add_trace(go.Scatter(x=[3.5], y=[6.5], mode = 'markers',
marker_symbol = 'star',
marker_size = 15))
fig.show()

This directly modifies the Scatter trace's Marker itself:
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
trace = next(fig.select_traces())
# Modify kth point.
n = len(trace.x)
k = 136
color = [trace.marker.color] * n
color[k] = "red"
size = [8] * n
size[k] = 15
symbol = [trace.marker.symbol] * n
symbol[k] = "star"
# Update trace.
trace.marker.color = color
trace.marker.size = size
trace.marker.symbol = symbol
# Alternatively, call:
# fig.update_traces(marker=dict(color=color, size=size, symbol=symbol))
fig.show()

Placement of Y labels plotly python horizontal barchart

I'm looking for a way to get the y labels of a plotly horizontal barchart above the grouped bars. What i'm looking for is:
import pandas as pd
import plotly.graph_objects as go
test_df = pd.DataFrame({'component':['BAR 1','BAR 2','BAR 3'],'mean':[7.4,7.8,6.5],'mean_proj':[6.8,7.9,8.4]})
def barchart2(df,x1,x2,y):
fig = go.Figure()
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],orientation='h',hoverinfo=None,marker_color='#221435')),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],orientation='h',hoverinfo=None,marker_color='rgb(55,177,140)')),
fig.update_xaxes(showgrid=False, zeroline=False)
fig.update_yaxes(showgrid=False, zeroline=False)
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',plot_bgcolor='rgba(0,0,0,0)',bargap=0.20,margin=dict(t=30,b=5,l=25,r=0))
fig.update_layout(barmode='group')
return fig.write_html('test.html',auto_open=True)
barchart2(test_df,'mean','mean_proj','component')

An approach to simulating this is to duplicate traces and use text parameters on these traces
import pandas as pd
import plotly.graph_objects as go
test_df = pd.DataFrame({'component':['BAR 1','BAR 2','BAR 3'],'mean':[7.4,7.8,6.5],'mean_proj':[6.8,7.9,8.4]})
def barchart2(df,x1,x2,y):
fig = go.Figure()
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],marker_color='#221435')),
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],marker_color='rgba(0,0,0,0)', text=x1, showlegend=False)),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],marker_color='rgb(55,177,140)')),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],marker_color='rgba(0,0,0,0)', text=x2, showlegend=False)),
fig.update_traces(orientation="h", hoverinfo=None, insidetextanchor="start")
fig.update_xaxes(showgrid=False, zeroline=False)
fig.update_yaxes(showgrid=False, zeroline=False)
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',plot_bgcolor='rgba(0,0,0,0)',bargap=0.20,margin=dict(t=30,b=5,l=25,r=0))
fig.update_layout(barmode='group')
# return fig.write_html('test.html',auto_open=True)
return fig
barchart2(test_df,'mean','mean_proj','component')
where y-axis ticks are labels
Same technique.
import pandas as pd
import plotly.graph_objects as go
test_df = pd.DataFrame({'component':['BAR 1','BAR 2','BAR 3'],'mean':[7.4,7.8,6.5],'mean_proj':[6.8,7.9,8.4]})
def barchart2(df,x1,x2,y):
fig = go.Figure()
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],marker_color='#221435')),
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],marker_color='rgba(0,0,0,0)', text=df[y], showlegend=False)),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],marker_color='rgb(55,177,140)')),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],marker_color='rgba(0,0,0,0)', text=df[y], showlegend=False)),
fig.update_traces(orientation="h", hoverinfo=None, insidetextanchor="start")
fig.update_xaxes(showgrid=False, zeroline=False)
fig.update_yaxes(showgrid=False, zeroline=False)
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',plot_bgcolor='rgba(0,0,0,0)',bargap=0.20,margin=dict(t=30,b=5,l=25,r=0))
fig.update_layout(barmode='group')
# return fig.write_html('test.html',auto_open=True)
return fig.update_yaxes(visible=False)
barchart2(test_df,'mean','mean_proj','component')

For anyone who's looking for another way to fix this (without the use of hidden traces) you could also use fig.add_annotations. With add_annotations you can add text on certain places in the graph.
import pandas as pd
import plotly.graph_objects as go
test_df = pd.DataFrame({'component':['BAR 1','BAR 2','BAR 3','BAR 4','BAR 5','BAR 6','BAR 7'],'mean':[7.4,7.8,6.5,7.7,7.4,7.8,6.5],'mean_proj':[6.8,7.9,8.4,6.3,7.9,8.4,6.3]})
def barchart2(df,x1,x2,y,font):
fig = go.Figure()
fig.add_trace(go.Bar(name=x1,x=df[x1],y=df[y],orientation='h',hoverinfo=None,marker_color='#221435')),
fig.add_trace(go.Bar(name=x2,x=df[x2],y=df[y],orientation='h',hoverinfo=None,marker_color='rgb(55,177,140)')),
fig.update_xaxes(showgrid=False, zeroline=False,showticklabels=False)
fig.update_yaxes(showgrid=False, zeroline=False,showticklabels=False)
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)',plot_bgcolor='rgba(0,0,0,0)',bargap=0.50,
margin=dict(t=30,b=5,l=0,r=0),barmode='group',
legend=dict(yanchor='bottom',y=-0.1,xanchor='left',x=0,font=dict(family=font,size=25)))
startplace = 6.4
for i in df[y].unique():
fig.add_annotation(x=0.23,y=startplace,
text=i,
showarrow=False,
font=dict(family=font,color='#EB0045',size=25)),
startplace = startplace - 1
return fig.write_html('fig1.html',auto_open=True)
barchart2(test_df,'mean','mean_proj','component','Arial')
The code will result in the following graph:

How to add labels to subplots in plotly?

I am trying to plot a candlestick with volume, using the plotly. However I can not get the proper x and yaxis label.please help.I need y labels for both plot but xlabel for just the bottom one, also one title for both. Bellow is the code.
** one more question, how can I change the line color in the volume plot.Thank you
import numpy as np
import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly import tools
stock = 'AAPL'
df = web.DataReader(stock, data_source='yahoo', start='01-01-2019')
def chart_can_vol(df):
fig = tools.make_subplots(
rows=3, cols=1,
specs=[[{"rowspan": 2}],
[None],
[{}]],
shared_xaxes=True,
vertical_spacing=0.1)
fig.add_trace(go.Candlestick(x = df.index,
open = df['Open'],
close = df['Close'],
low = df['Low'],
high = df['High']),
row = 1, col = 1)
fig.update_layout(xaxis_rangeslider_visible = False)
fig.update_layout(
yaxis_title = 'Apple Stock Price USD ($)'
)
fig.add_trace(go.Scatter(x = df.index,
y = df['Volume']),
row = 3, col = 1)
fig.update_layout(
yaxis_title = 'Volume',
xaxis_title = 'Date'
)
fig.update_layout(title_text="Apple Stock")
fig.update_layout(width=900, height=900)
return fig
chart_can_vol(df)

When you make your subplots, you can add the subplot_titles attribute. In the code below, I used the titles "test1" and "test2". When you change your axis labels, you can use update_xaxes and update_yaxes, just make sure that the row and column values are the same for the update_axes method and the subplot.
To change the color of the line, you can add the line attribute within the scatterplot method and set it equal to a dictionary with a hex value of the color you want.
P.S. You should update plotly, because the tools.make_subplots was deprecated. Once you update, you can simply use make_subplots. Also, you are using pandas, when you should use pandas-datareader. See import statements.
Code:
import numpy as np
import pandas as pd
import pandas_datareader.data as web
import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly import tools
stock = 'AAPL'
df = web.DataReader(stock, data_source='yahoo', start='01-01-2019')
def chart_can_vol(df):
subplot_titles=["test1", "test2"]
rows = 2
cols = 2
height = 300 * rows
fig = make_subplots(
rows=3, cols=1,
specs=[[{"rowspan": 2}],
[None],
[{}]],
shared_xaxes=True,
subplot_titles=("test1", "test2"),
vertical_spacing=0.1)
fig.add_trace(go.Candlestick(x = df.index,
open = df['Open'],
close = df['Close'],
low = df['Low'],
high = df['High']),
row = 1, col = 1)
fig.update_layout(xaxis_rangeslider_visible = False)
fig.update_layout(
yaxis_title = 'Apple Stock Price USD ($)'
)
fig.add_trace(go.Scatter(x = df.index,
y = df['Volume'],
line= dict(color="#ffe476")),
row = 3, col = 1)
fig.update_xaxes(title_text="Date", row = 3, col = 1)
fig.update_yaxes(title_text="Volume", row = 3, col = 1)
fig.update_layout(title_text="Apple Stock")
fig.update_layout(width=900, height=900)
return fig
chart_can_vol(df).show()

Set up multiple subplots with moving averages using cufflinks and plotly offline

Im trying to select 4 different product prices from my dataframe and plot their moving average as a subplot (2,2) using plotly cufflinks. I would appreciate if anyone can guide on this.
I tried plotting the price as below.
I came across cufflinks technical analysis which allow me to plot moving average in a cleaner way, however, im not too sure how to apply it yet.
from plotly.offline import download_plotlyjs,init_notebook_mode,plot,iplot
from plotly import tools
import plotly.graph_objs as go
trace1= go.Scatter(name=',milk', x=df.Date, y=df['milk'])
trace2= go.Scatter(name='soap', x=df.Date, y=df['soap'])
trace3= go.Scatter(name='rice', x=df.Date, y=df['rice'])
trace4= go.Scatter(name='water', x=df.Date, y=df['water'])
fig = tools.make_subplots(rows=2, cols=2, subplot_titles=('milk', 'soap',
'rice', 'water'))
fig.append_trace(trace1, 1, 1)
fig.append_trace(trace2, 1, 2)
fig.append_trace(trace3, 2, 1)
fig.append_trace(trace4, 2, 2)
fig['layout'].update(height=1000, width=1800, title='supermarket')
plot(fig, filename='supermarket.html')
I would appreciate if someone could teach me how to use plotly cufflinks to plot four moving averages from the selected columns from a dataframe using plotly offline.

Insert the code section below in a Jupyter Notebook to produce the following plot using cufflinks and plotly offline:
Plot:
Code:
# imports
import plotly
from plotly import tools
import cufflinks as cf
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import pandas as pd
import numpy as np
from IPython.core.display import display, HTML
import copy
import plotly.graph_objs as go
####### PART 1 - SETUP AND SAMPLE DATA #######
# setup
display(HTML("<style>.container { width:55% !important; } .widget-select > select {background-color: gainsboro;}</style>"))
init_notebook_mode(connected=True)
np.random.seed(123)
cf.set_config_file(theme='pearl')
# Random data using cufflinks
df = cf.datagen.lines().iloc[:,0:4]
df.columns = ['StockA', 'StockB', 'StockC', 'StockD']
####### PART 2 - FUNCTION FOR MOVING AVERAGES #######
# Function for moving averages
def movingAvg(df, win, keepSource):
"""Add moving averages for all columns in a dataframe.
Arguments:
df -- pandas dataframe
win -- length of movingAvg estimation window
keepSource -- True or False for keep or drop source data in output dataframe
"""
df_temp = df.copy()
# Manage existing column names
colNames = list(df_temp.columns.values).copy()
removeNames = colNames.copy()
i = 0
for col in colNames:
# Make new names for movingAvgs
movingAvgName = colNames[i] + '_MA' #+ str(win)
# Add movingAvgs
df_temp[movingAvgName] = df[col].rolling(window=win).mean()
i = i + 1
# Remove estimates with insufficient window length
df_temp = df_temp.iloc[win:]
# Remove or keep source data
if keepSource == False:
df_temp = df_temp.drop(removeNames,1)
return df_temp
# Add moving averages to df
windowLength = 10
df = movingAvg(df=df, win=windowLength, keepSource = True)
####### PART 3 -PLOTLY RULES #######
# Structure lines / traces for the plots
# trace 1
trace1 = go.Scatter(
x=df.index,
y=df['StockA'],
name='StockA'
)
trace1_ma = go.Scatter(
x=df.index,
y=df['StockA_MA'],
name='StockA_MA'
)
# trace 2
trace2 = go.Scatter(
x=df.index,
y=df['StockB'],
name='StockB'
)
trace2_ma = go.Scatter(
x=df.index,
y=df['StockB_MA'],
name='StockB_MA'
)
# trace 3
trace3 = go.Scatter(
x=df.index,
y=df['StockC'],
name='StockC'
)
trace3_ma = go.Scatter(
x=df.index,
y=df['StockC_MA'],
name='StockC_MA'
)
# trace 4
trace4 = go.Scatter(
x=df.index,
y=df['StockD'],
name='StockD'
)
trace4_ma = go.Scatter(
x=df.index,
y=df['StockD_MA'],
name='StockD_MA'
)
# Structure traces as datasets
data1 = [trace1, trace1_ma]
data2 = [trace2, trace2_ma]
data3 = [trace3, trace3_ma]
data4 = [trace4, trace4_ma]
# Build figures
fig1 = go.Figure(data=data1)
fig2 = go.Figure(data=data2)
fig3 = go.Figure(data=data3)
fig4 = go.Figure(data=data4)
# Subplots setup and layout
figs = cf.subplots([fig1, fig2, fig3, fig4],shape=(2,2))
figs['layout'].update(height=800, width=1200,
title='Stocks with moving averages = '+ str(windowLength))
iplot(figs)