teven commited on
Commit
d134af5
1 Parent(s): 628a594

plotly test

Browse files
Files changed (1) hide show
  1. app.py +55 -0
app.py ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import dash
2
+ from dash.exceptions import PreventUpdate
3
+ from dash import dcc, html
4
+ from dash.dependencies import Input, Output
5
+ import plotly.express as px
6
+ import pandas as pd
7
+
8
+ # Create dash app
9
+ app = dash.Dash(__name__)
10
+
11
+ # Set dog and cat images
12
+ dogImage = "https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/dog.png"
13
+ catImage = "https://d2ph5fj80uercy.cloudfront.net/06/cat3602.jpg"
14
+
15
+ # Generate dataframe
16
+ df = pd.DataFrame(
17
+ dict(
18
+ x=[1, 2],
19
+ y=[2, 4],
20
+ images=[dogImage, catImage],
21
+ )
22
+ )
23
+
24
+ # Create scatter plot with x and y coordinates
25
+ fig = px.scatter(df, x="x", y="y", custom_data=["images"])
26
+
27
+ # Update layout and update traces
28
+ fig.update_layout(clickmode='event+select')
29
+ fig.update_traces(marker_size=20)
30
+
31
+ # Create app layout to show dash graph
32
+ app.layout = html.Div(
33
+ [
34
+ dcc.Graph(
35
+ id="graph_interaction",
36
+ figure=fig,
37
+ ),
38
+ html.Img(id='image', src='')
39
+ ]
40
+ )
41
+
42
+
43
+ # html callback function to hover the data on specific coordinates
44
+ @app.callback(
45
+ Output('image', 'src'),
46
+ Input('graph_interaction', 'hoverData'))
47
+ def open_url(hoverData):
48
+ if hoverData:
49
+ return hoverData["points"][0]["customdata"][0]
50
+ else:
51
+ raise PreventUpdate
52
+
53
+
54
+ if __name__ == '__main__':
55
+ app.run_server(port=7860, debug=True, )