# Is it possible to use extendData for distplot?

**URL:** <https://community.plotly.com/t/is-it-possible-to-use-extenddata-for-distplot/88920>\
**Category:** 📊 Plotly Python\
**Created:** [November 22, 2024, 8:48pm UTC](https://community.plotly.com/t/is-it-possible-to-use-extenddata-for-distplot/88920 "2024-11-22T20:48:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eledwin](https://avatars.discourse-cdn.com/v4/letter/e/45deac/32.png) [@Eledwin](https://community.plotly.com/u/Eledwin)\
**Post date:** [November 22, 2024, 8:48pm UTC](https://community.plotly.com/t/is-it-possible-to-use-extenddata-for-distplot/88920/1 "2024-11-22T20:48:51Z")

</div>

Hi,

I’m trying to display a KDE plot (or distplot) of a live stream of data coming from an MQTT broker using dash and plotly.  
For performance reason I’m doing most of the stuff in client\_side callback, and so far I’ve managed to plot in “real time” my data on a simple scatter graph.

Now I’m trying to use a distplot but I can’t find out the expected format of the trace my callback should return for the extendData property, I don’t even know if distplot support that… and don’t know where to look to find some info about it.

Here is the python code :

```python
figure = ff.create_distplot([[0,1]], ["A"])
app.layout = html.Div([
    dcc.Interval(id="graph_updater", interval=100),
    dcc.Graph(id="graph", figure=figure)
])

clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='graph_updater'
    ),
    Output('graph', 'extendData'),
    Input('graph_updater', 'n_intervals')
)

```

And my client\_side callback, do not worry about how I retrieve my SENSORS\_DATA this is working fine :

```JS

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        graph_updater: function(n_interval) {
            const sensor_path = "IMU_A";
            if(window.SENSORS_DATA == null)
                return window.dash_clientside.no_update;

            if(!(sensor_path in window.SENSORS_DATA))
                return window.dash_clientside.no_update;

            if(window.LATEST_INDEX_GRAPHED == null)
                window.LATEST_INDEX_GRAPHED = 0;

            //Prepare the new data
            nx = window.SENSORS_DATA[sensor_path]["timestamp"].slice(window.LATEST_INDEX_GRAPHED);
            ny = window.SENSORS_DATA[sensor_path]["roll"].slice(window.LATEST_INDEX_GRAPHED);

            window.LATEST_INDEX_GRAPHED = window.SENSORS_DATA[sensor_path]["timestamp"].length + 1; //Don't forget the +1 because the slice method is inclusive.
            //Need to return a tuple (dict(graph data to extend), [trace_index], number of data point to keep)
            return [{x: [ny]/*, y: [ny]*/}, [0], 5000];
        }
    }
});

```

I don’t know what to return in the client\_side callback… for the moment it’s not working and nothing change in the visualisation (but no error is thrown either).

Any help is appreciated, thanks !

---

<div class="post-metadata">

**Author:** ![justin06coston](https://avatars.discourse-cdn.com/v4/letter/j/ea5d25/32.png) [@justin06coston](https://community.plotly.com/u/justin06coston)\
**Post date:** [November 27, 2024, 6:00am UTC](https://community.plotly.com/t/is-it-possible-to-use-extenddata-for-distplot/88920/3 "2024-11-27T06:00:40Z")

</div>

> [@Eledwin](#):
>
> I’m trying to display a KDE plot (or distplot) of a live stream of data coming from an MQTT broker using dash and plotly.  
> For performance reason I’m doing most of the stuff in client\_side callback, and so far I’ve managed to plot in “real time” my data on a simple scatter graph. [este enlace](https://www.jovenesen-accion.com.co)
> 
> Now I’m trying to use a distplot but I can’t find out the expected format of the trace my callback should return for the extendData property, I don’t even know if distplot support that… and don’t know where to look to find some info about it.
> 
> Here is the python code :
> 
> ```auto
> figure = ff.create_distplot([[0,1]], ["A"])
> app.layout = html.Div([
> dcc.Interval(id="graph_updater", interval=100),
> dcc.Graph(id="graph", figure=figure)
> ])
> 
> clientside_callback(
> ClientsideFunction(
> namespace='clientside',
> function_name='graph_updater'
> ),
> Output('graph', 'extendData'),
> Input('graph_updater', 'n_intervals')
> )
> 
> ```
> 
> And my client\_side callback, do not worry about how I retrieve my SENSORS\_DATA this is working fine :
> 
> ```auto
> window.dash_clientside = Object.assign({}, window.dash_clientside, {
> clientside: {
> graph_updater: function(n_interval) {
> const sensor_path = "IMU_A";
> if(window.SENSORS_DATA == null)
> return window.dash_clientside.no_update;
> 
> if(!(sensor_path in window.SENSORS_DATA))
> return window.dash_clientside.no_update;
> 
> if(window.LATEST_INDEX_GRAPHED == null)
> window.LATEST_INDEX_GRAPHED = 0;
> 
> //Prepare the new data
> nx = window.SENSORS_DATA[sensor_path]["timestamp"].slice(window.LATEST_INDEX_GRAPHED);
> ny = window.SENSORS_DATA[sensor_path]["roll"].slice(window.LATEST_INDEX_GRAPHED);
> 
> window.LATEST_INDEX_GRAPHED = window.SENSORS_DATA[sensor_path]["timestamp"].length + 1; //Don't forget the +1 because the slice method is inclusive.
> //Need to return a tuple (dict(graph data to extend), [trace_index], number of data point to keep)
> return [{x: [ny]/*, y: [ny]*/}, [0], 5000];
> }
> }
> });
> 
> ```

To dynamically display a live KDE plot using Dash and Plotly while leveraging extendData, consider this alternative approach that sidesteps create\_distplot()'s limitations by building the plot from foundational components: Rather than relying on create\_distplot(), break the KDE visualization into two parts:

Histogram Bars: Represent the evolving frequency distribution.  
KDE Line: A dynamically smoothed line, recalculated in real-time using client-side smoothing. Step 1: Server-Side Setup for Histogram Base  
Instead of constructing the full figure server-side, initiate a simple histogram with empty data points: import dash  
from dash import dcc, html  
import plotly.graph\_objs as go

app = dash.Dash( **name** )

app.layout = html.Div([  
dcc.Graph(id=‘live-kde-graph’),  
dcc.Interval(id=‘update-interval’, interval=100)  
])

@app.callback(  
dash.Output(‘live-kde-graph’, ‘figure’),  
[dash.Input(‘update-interval’, ‘n\_intervals’)]  
)  
def initialize\_graph(n):  
if n == 0:  
return go.Figure(data=[go.Bar(x=, y=, name=‘Histogram’), go.Scatter(x=, y=, mode=‘lines’, name=‘KDE’)])  
return dash.no\_update

if **name** == ‘ **main** ’:  
app.run\_server(debug=True)  
Step 2: Client-Side Callback for Real-Time KDE Smoothing  
Implement the KDE smoothing using Gaussian or moving average logic in JavaScript: window.dash\_clientside = Object.assign({}, window.dash\_clientside, {  
clientside: {  
graph\_updater: function(n\_interval) {  
const data = window.LIVE\_DATA || ; // Replace with your MQTT data source  
if (data.length \< 5) return window.dash\_clientside.no\_update;

```
        const latestData = data.slice(-50); // Control how much data to display  

        const smoothedData = latestData.map((_, i) => {  
            const slice = latestData.slice(Math.max(i - 5, 0), i + 1);  
            return slice.reduce((sum, val) => sum + val, 0) / slice.length;  
        });  

        return [{  
            x: [Array.from({ length: smoothedData.length }, (_, i) => i)],  
            y: [smoothedData]  
        }, [1], 100]; // [1] refers to the KDE trace index  
    }  
}  

```

});

---

<div class="post-metadata">

**Author:** ![Eledwin](https://avatars.discourse-cdn.com/v4/letter/e/45deac/32.png) [@Eledwin](https://community.plotly.com/u/Eledwin)\
**Post date:** [November 27, 2024, 11:47am UTC](https://community.plotly.com/t/is-it-possible-to-use-extenddata-for-distplot/88920/4 "2024-11-27T11:47:10Z")

</div>

Yeah I figured I had to move away from distplot and create my own histogram. I actually went to use violin plot instead but now I’m running into performance issue… I’ve created a post here about it : [Plotly Violin performance for live update](https://community.plotly.com/t/plotly-violin-performance-for-live-update/89008)