PLOTLY SCATTER UPDATE
PLOTLY SCATTER CODE

Any argument passed through this function is JSON-serialized to the React component. The _component_func in my_component/_init_.py manages the call to the frontend web server to fetch the component. Step 2 - Bidirectional communication between Python and React

PLOTLY SCATTER CODE

If you omit that function, your component will have a height of 0 and be invisible to the eye, but it will actually be there if you inspect the page source code with your browser's devtools.

PLOTLY SCATTER UPDATE

We also make use of a React hook useEffect which runs an anonymous callback function after the component has rendered to compute the height of the render, then update the height of the iframe containing the component. This is the output served by the dev server which Streamlit retrieves and renders in the browser. On the Javascript side, we define a functional component M圜omponent which returns a single block with 'Hello world' inside. This private function returned by clare_component accesses frontend resources from the url the other running dev server delivering the frontend component ! If we want to understand things a bit, on the Python side we have a wrapper my_component() function which calls a private _component_func(). We're in Streamlit world, so livereload is enabled everywhere and the update in your browser should be instant. You can retrieve the JSON specification from a Figure in Python :Įnter fullscreen mode Exit fullscreen mode If you know Altair from the Vega ecosystem, Altair works as a Python wrapper for Vega-lite in the exact same way plotly.py is a Python wrapper for plotly.js. Plotly figures are represented by a JSON specification which the Python client generates for you that plotly.js can consume to render a graph. plotly.py is actually a Python wrapper for plotly.js. I have a longer tutorial here that addresses them but don't hesitate to check the React website if you want to go deeper.Ī lot of Data Scientists use plotly.py to build interactive charts. While this tutorial is accessible to anyone with no JS/React experience, I do skip on some important frontend/React concepts.

Let's build a quick example around it to help quickstart an answer to a forum question about Plotly cross-interactive filtering : can we build a scatterplot where selected points are sent back into Python ? We will solve this by creating a Plotly.js component with lasso selection and communicate selected points to Python. Streamlit Components are out ! This opens a lot of new possibilities as it makes it easy to integrate any interactive Javascript library into Streamlit, and send data back and forth between a Python script and a React component.

Plotly scatter