114 lines
2.6 KiB
Markdown
114 lines
2.6 KiB
Markdown
---
|
|
components:
|
|
- rx.plotly
|
|
---
|
|
|
|
# Plotly
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
import pandas as pd
|
|
import plotly.express as px
|
|
import plotly.graph_objects as go
|
|
|
|
def line():
|
|
df = pd.read_csv("data/canada_life.csv")
|
|
line = px.line(df, x="year", y="lifeExp", title="Life expectancy in Canada")
|
|
return line
|
|
|
|
|
|
# Read data from a csv
|
|
def mount():
|
|
z_data = pd.read_csv("data/mt_bruno_elevation.csv")
|
|
mount = go.Figure(data=[go.Surface(z=z_data.values)])
|
|
mount.update_traces(
|
|
contours_z=dict(
|
|
show=True, usecolormap=True, highlightcolor="limegreen", project_z=True
|
|
)
|
|
)
|
|
mount.update_layout(
|
|
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),
|
|
)
|
|
return mount
|
|
|
|
|
|
style = {
|
|
"box": {
|
|
"borderRadius": "1em",
|
|
"bg": "white",
|
|
"boxShadow": "rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px",
|
|
"padding": 5,
|
|
"width": "100%",
|
|
"overflow_x": "auto",
|
|
}
|
|
}
|
|
```
|
|
|
|
Plotly is a graphing library that can be used to create interactive graphs.
|
|
|
|
Let's create a line graph of life expectancy in Canada as an example.
|
|
|
|
```python eval
|
|
rx.center(
|
|
rx.plotly(data=line()),
|
|
height="400px",
|
|
style=style["box"],
|
|
)
|
|
```
|
|
|
|
First create a plotly figure. In this example we use plotly express to do so.
|
|
|
|
```python
|
|
import plotly.express as px
|
|
|
|
df = px.data.gapminder().query("country=='Canada'")
|
|
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
|
|
```
|
|
|
|
Now pass the plotly figure to the Plotly component.
|
|
|
|
```python
|
|
rx.plotly(data=fig, height="400px")
|
|
```
|
|
|
|
Now lets take a look at a more complex example.
|
|
Let's create a 3D surface plot of Mount Bruno.
|
|
|
|
```python eval
|
|
rx.center(
|
|
rx.vstack(
|
|
rx.plotly(data=mount()),
|
|
),
|
|
height="400px",
|
|
style=style["box"],
|
|
)
|
|
```
|
|
|
|
Read in the Mount Bruno data as a csv and create a plotly figure.
|
|
|
|
```python
|
|
import plotly.graph_objects as go
|
|
|
|
import pandas as pd
|
|
|
|
# Read data from a csv
|
|
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(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)
|
|
)
|
|
```
|
|
|
|
Now pass the plotly figure again to the plotly component.
|
|
|
|
```python
|
|
rx.plotly(data=fig, height="400px")
|
|
```
|