How can I update marker color via ‘extendData’?

Dash Python
1

I am trying to plot a live scatter plot which updates ‘x’, ‘y’, ‘hover text’ and ‘marker_color’ using ‘extendData’, but I face an error when it comes to updating ‘marker_color’.

image
image938×211 33.5 KB

I would appreciate any help on this issue. Code below.

import dash
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd

import plotly.graph_objects as go
from plotly.colors import sequential
from dash.dependencies import Input, Output

import warnings

warnings.filterwarnings("ignore")

data = pd.DataFrame()
data['Region'] = ['Western Europe', 
                'North America',
                'Australia and New Zealand', 
                'Middle East and Northern Africa',
                'Eastern Asia',
                'North America',
                'Southern Asia',
                'Southern Asia',
                'Southern Asia',
                'Latin America and Caribbean']

data["Happiness Rank"] = [1,2,3,4,5,6,7,8,9,10]
data["Dystopia Residual"]=[7.587,
                        7.561,
                        7.527,
                        7.522,
                        7.427,
                        7.406,
                        7.378,
                        7.364,
                        7.286,
                        7.284]

MARKER_COLOR = {
    "Western Europe": sequential.speed[8],
    "North America": sequential.Greys[6],
    "Australia and New Zealand": sequential.turbid[9],
    "Middle East and Northern Africa": sequential.solar[11],
    "Latin America and Caribbean": sequential.haline[2],
    "Southeastern Asia": sequential.Brwnyl[6],
    "Central and Eastern Europe": sequential.PuRd[7],
    "Eastern Asia": sequential.Oranges[7],
    "Sub-Saharan Africa": sequential.Oranges[3],
    "Southern Asia": sequential.Greys[3],
}

def generate_graph(df):
    fig1 = go.Figure()

    for region in df["Region"]:
        trace = go.Scatter(
            x=df["Happiness Rank"],
            y=df["Dystopia Residual"],
            mode="markers",
            name=region,
            marker_color=MARKER_COLOR[region],
        )
        fig1.add_trace(trace)

    return fig1

def generate_return_value(n_interval):
    return dict(
            x=[[data.loc[n_interval, "Happiness Rank"]]],
            y=[[data.loc[n_interval, "Dystopia Residual"]]],
            marker_color=[[MARKER_COLOR[data.loc[n_interval, "Region"]]]],
        ),


df = data.head(5)
fig = generate_graph(df)

app = dash.Dash(__name__, update_title=None) 
server = app.server
app.layout = html.Div(
    [
        dcc.Graph(id="graph", figure=fig),
        dcc.Interval(id="interval", interval=5 * 1000, n_intervals=5),
    ]
)


@app.callback(Output("graph", "extendData"), [Input("interval", "n_intervals")])
def update_data(n_intervals):
    if n_intervals:
        index = n_intervals
        value = generate_return_value(index)
        return (
            value
            [0],
        )
    return dash.no_update


if __name__ == "__main__":
    app.run_server(debug=True)
2

Hi @Alisha welcome to the forums.

The “magic underscore” is not working here, you would have to change to:

marker=dict(color=[[MARKER_COLOR[data.loc[n_interval, "Region"]]]])

3

Hi @AIMPED, thank you for your reply, but making this change introduces the following error.

MicrosoftTeams-image (2)
MicrosoftTeams-image (2)715×269 11.4 KB

4

Hi @Alisha

I am not sure, what you intend to do.

There are basically two options for the marker color: you can specify a single color for all markers in the trace or you can specify a list of colors which has to correspond to the length ofthe x and y arguments. You can try that with this code snippet.

import plotly.graph_objects as go

fig = go.Figure()

fig.add_scatter(
    x=[2,3,5,4], 
    y=[4,6,9,1],
    mode='markers',
    name='just a trace',
    marker= {
        #color': 'red'
        'color': ['red', 'blue', 'green', 'yellow']
    }
)