I am trying to use bokeh charts in streamlit for creating a scatterplot and also on hovering it shows an image of the datapoint. I am using streamlit 0.53 on python 3.6 on a ubuntu 18.04 machine.
I came across this post by @Marc and it has helped me a lot to come up with these visualizations but I am stuck at this last juncture for which I would be highly obliged if someone could guide me in the right direction.
The expected behaviour is as follows. When I export the figure to an html file, this is how it looks; I have hovered over the point (1,1) and this figure has popped up as a tooltip.
On streamlit however, this is how the chart output looks as follows, the tooltip doesn’t render the image…
The code that I have used to create these plots is as follows
import streamlit as st import pandas as pd from bokeh.plotting import figure, output_file, save from bokeh.models.tools import HoverTool from bokeh.models import ColumnDataSource output_file(f"index.html") p = figure( plot_width = 1500, plot_height = 900, title = f"Demo", x_axis_label = "X", y_axis_label = "Y", ) df = pd.read_csv("./demo.csv") p.scatter( y = "y", x = "x", source = ColumnDataSource(df), size = 10, ) hover = HoverTool() hover.tooltips = """ <div> <h2>Figure</h2> <div> <img src="@ImgName" alt="@ImgName" style="border:2px solid black; border-radius:20%" width="150"/> </div> </div> """ p.add_tools(hover) save(p) st.title("Visualization") st.dataframe(df.head()) st.bokeh_chart(p, use_container_width=True)
The data in the csv files is as follows
x,y,ImgName 1,1,/home/vinayak/st_bokeh/pics/circle.png 1,2,/home/vinayak/st_bokeh/pics/parallelogram.png 2,1,/home/vinayak/st_bokeh/pics/square.png
Could someone please help me figure out what could the issue be here? If this works, it would be a really great step toward helping me visualize abnormalities in my dataset while doing Machine Learning.
Thanks & Regards,