dash-scattergl-random.py

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import numpy as np
import pandas as pd

app = dash.Dash()

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

df = pd.DataFrame({
    'Column {}'.format(i): np.random.rand(50) + i*10
    for i in range(6)})

app.layout = html.Div([
    html.Div(
        dcc.Graph(
            id='g1',
            selectedData=None
        ), className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='g2',
            selectedData=None
        ), className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='g3',
            selectedData=None
        ), className="four columns"
    )
], className="row")


def highlight(x, y):
    def callback(*selectedDatas):
        if not any(selectedDatas):
            selectedpoints = []
        else:
            selectedpoints = df.index
            for i, selected_data in enumerate(selectedDatas):
                if selected_data is not None:
                    selected_index = [
                        p['customdata'] for p in selected_data['points']
                    ]
                    if len(selected_index) > 0:
                        selectedpoints = np.intersect1d(
                            selectedpoints, selected_index)

        figure = {
            'data': [
                dict({
                    'x': df[x],
                    'y': df[y],
                    'text': df.index,
                    'selectedpoints': selectedpoints,
                    'customdata': df.index,
                    'type': 'scatter',
                    'mode': 'markers+text',
                    'textposition': 'top',
                    'marker': {
                        'color': '#0074D9',
                        'size': 12
                    },
                    'selected': {
                        'marker': {
                            'opacity': 1
                        },
                        'mode': 'markers+text'
                    },
                    'unselected': {
                        'marker': {
                            'opacity': 0.3,
                        },
                        'mode': 'markers'
                    }
                }),
            ],
            'layout': {
                'margin': {'l': 20, 'r': 0, 'b': 20, 't': 5},
                'dragmode': 'select',
                'hovermode': 'closest',
                'showlegend': False
            }
        }

        # Display a rectangle to highlight the previously selected region
        shape = {
            'type': 'rect',
            'line': {
                'width': 1,
                'dash': 'dot',
                'color': 'darkgrey'
            }
        }
        if selectedDatas[0] and selectedDatas[0]['range']:
            figure['layout']['shapes'] = [dict({
                'x0': selectedDatas[0]['range']['x'][0],
                'x1': selectedDatas[0]['range']['x'][1],
                'y0': selectedDatas[0]['range']['y'][0],
                'y1': selectedDatas[0]['range']['y'][1]
            }, **shape)]
        else:
            figure['layout']['shapes'] = [dict({
                'type': 'rect',
                'x0': np.min(df[x]),
                'x1': np.max(df[x]),
                'y0': np.min(df[y]),
                'y1': np.max(df[y])
            }, **shape)]

        return figure

    return callback


app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

# app.callback is a decorator which means that it takes a function
# as its argument.
# highlight is a function "generator": it's a function that returns function
app.callback(
    Output('g1', 'figure'),
    [Input('g1', 'selectedData'),
     Input('g2', 'selectedData'),
     Input('g3', 'selectedData')]
)(highlight('Column 0', 'Column 1'))

app.callback(
    Output('g2', 'figure'),
    [Input('g2', 'selectedData'),
     Input('g1', 'selectedData'),
     Input('g3', 'selectedData')]
)(highlight('Column 2', 'Column 3'))

app.callback(
    Output('g3', 'figure'),
    [Input('g3', 'selectedData'),
     Input('g1', 'selectedData'),
     Input('g2', 'selectedData')]
)(highlight('Column 4', 'Column 5'))


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