是否存在可以渲染numpy数组数据的python plotly/dash图像小部件? [英] Is there a python plotly/dash image widget that can render numpy array data?

问题描述

我正在评估python散点图和/或破折号，以替代用于更新图像的链接图的bokeh/holoviews.

I'm in the process of evaluating python plotly and/or dash as an alternative to bokeh/holoviews for linked plots that update images.

要求: 将数据点链接到图像: 我有散点图和热图，其中各个数据点代表从图像派生的值.我想从散点图中的数据点链接回该数据点的数值所源自的图像. 图像数据位于numpy数组中，或者可以由回调函数提供.我想避免将.png文件写入磁盘并将png文件嵌入html元素中.

Requirements: linking data point to image: I have scatter plots and heatmaps in which individual data points represent values derived from images. I would like to link back from a data point in a scatterplot to the image that the numerical value for this data point was derived from. The image data is in a numpy array or can be provided by a callback function. I would like to avoid writing a .png file to disk and embedding the png file in a html element.

将图像选择链接到数据点: 例如显示图像.根据图像中的选择(例如，简单的直方图)更新绘图.

linking image selections to data points: e.g. Display an image. Update a plot according to the selection in the image (e.g. a simple histogram).

但是，我似乎找不到在图/破折号中用于图像显示的小部件.我是想念东西还是真的没有这种东西吗?

However, I can't seem to find any widget for image display in plotly/dash. Am I missing something or is there really no such thing?

推荐答案

我想从散点图中的数据点链接回该数据点的数值所源自的图像.

I would like to link back from a data point in a scatterplot to the image that the numerical value for this data point was derived from.

请参见 https://plot.ly/dash/interactive-graphing .您可以将callback分配给dash_core_components.Graph的selectedData，hoverData或clickData属性.

See https://plot.ly/dash/interactive-graphing. You can assign a callback to selectedData, hoverData, or clickData property of the dash_core_components.Graph.

将图像选择链接到数据点:例如显示图像.根据图像中的选择(例如，简单的直方图)更新绘图.

linking image selections to data points: e.g. Display an image. Update a plot according to the selection in the image (e.g. a simple histogram).

您可以在绘图图上显示背景图像，然后使用相同的selectedData工具根据所选区域更新回调.这是一个简单的示例:

You could display a background image on a plotly graph and then use the same selectedData tools to update callbacks based off of the selected region. Here is a simple example:

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

app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})

RANGE = [0, 1]

def InteractiveImage(id, image_path):
    encoded_image = base64.b64encode(open(image_path, 'rb').read())
    return dcc.Graph(
        id=id,
        figure={
            'data': [],
            'layout': {
                'xaxis': {
                    'range': RANGE
                },
                'yaxis': {
                    'range': RANGE,
                    'scaleanchor': 'x',
                    'scaleratio': 1
                },
                'height': 600,
                'images': [{
                    'xref': 'x',
                    'yref': 'y',
                    'x': RANGE[0],
                    'y': RANGE[1],
                    'sizex': RANGE[1] - RANGE[0],
                    'sizey': RANGE[1] - RANGE[0],
                    'sizing': 'stretch',
                    'layer': 'below',
                    'source': 'data:image/png;base64,{}'.format(encoded_image)
                }],
                'dragmode': 'select'  # or 'lasso'
            }
        }
    )


app.layout = html.Div([
    html.Div(className='row', children=[
        html.Div(InteractiveImage('image', 'dash_app.png'), className='six columns'),
        html.Div(dcc.Graph(id='graph'), className='six columns')
    ]),
    html.Pre(id='console')
])


# display the event data for debugging
@app.callback(Output('console', 'children'), [Input('image', 'selectedData')])
def display_selected_data(selectedData):
    return json.dumps(selectedData, indent=2)


@app.callback(Output('graph', 'figure'), [Input('image', 'selectedData')])
def update_histogram(selectedData):
    x_range = selectedData['range']['x']
    x_range = selectedData['range']['y']
    # filter data based off of selection in here

    # for simple example purposes, we'll just display the selected RANGE
    return {
        'data': [{
            'x': x_range,
            'y': x_range,
            'mode': 'markers',
            'marker': {
                'size': 20
            }
        }],
        'layout': {
            'xaxis': {'range': RANGE},
            'yaxis': {'range': RANGE, 'scaleanchor': 'x', 'scaleratio': 1},
            'height': 600
        }
    }


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

这篇关于是否存在可以渲染numpy数组数据的python plotly/dash图像小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！