| 92 | # --- PLOTTING DATA --- |
| 93 | @workflow.atom(dependencies=["load_data"]) |
| 94 | def plot_data(load_data): |
| 95 | df = load_data |
| 96 | text("## 3. Visualizing Data with `plotly()`") |
| 97 | text( |
| 98 | """ |
| 99 | Now, let's create an interactive scatter plot using Plotly and embed it using the `plotly()` component. |
| 100 | """ |
| 101 | ) |
| 102 | |
| 103 | # Create a scatter plot using Plotly Express |
| 104 | fig = px.scatter( |
| 105 | df, |
| 106 | x="quantity", |
| 107 | y="value", |
| 108 | text="item", |
| 109 | title="Quantity vs. Value", |
| 110 | labels={"quantity": "Quantity", "value": "Value"}, |
| 111 | ) |
| 112 | |
| 113 | # Add labels and style the plot |
| 114 | fig.update_traces( |
| 115 | textposition="top center", marker={"size": 12, "color": "lightblue"} |
| 116 | ) |
| 117 | fig.update_layout(template="plotly_white") |
| 118 | |
| 119 | # Display the plot using plotly() |
| 120 | plotly(fig) |
| 121 | |
| 122 | text( |
| 123 | """ |
| 124 | The `plotly()` function embeds interactive Plotly charts into your app. |
| 125 | **Example:** |
| 126 | ```python |
| 127 | from preswald import plotly |
| 128 | import plotly.express as px |
| 129 | fig = px.scatter(x=[1, 2, 3], y=[4, 5, 6]) |
| 130 | plotly(fig) |
| 131 | ``` |
| 132 | """ |
| 133 | ) |
| 134 | |
| 135 | |
| 136 | # --- SLIDER COMPONENT --- |