개요

데이터 시각 형상 라이브러리를 사용하는 대시, 객체 데이터 이미지를 표시하는 데 사용할 그래프를 마우스 수평 막대로 작성하는 절차가 설명되어 있습니다.
Dash를 사용하면 pythn과 아주 적은 코드로만 이런 동적 그래프를 만들 수 있습니다.
제작된 도표는 다음과 같은 느낌을 준다.

배경.

이미지 데이터에서 추출한 고차원 특징량을 T-SNE와 UMAP로 차원 삭감을 하고 퍼즐 그래프로 도표를 만들어 데이터의 분포를 확인하는 것은 흔히 있는 일이다.
그때 신경 썼던 데이터를 확인할 수 있는 이미지의 움직임을 간단하게 그래프를 만들고 싶어요.

컨디션

Google Colab에서 구현되지만 로컬 Jupter에서도 구현할 수 있습니다.
차트는 Jupyter 내에 표시되며 행을 몇 개 변경하면 별도의 응용 프로그램으로 시작할 수도 있습니다.이 글 아래 보태다 에는 프로그램이 시작될 때의 코드가 첨부되어 있다.

절차.

설치 라이브러리

라이브러리 import

보조 함수 정의

차트 생성

대시로 표시

1. 라이브러리 설치

dash 및 jupyter대시를 설치합니다.

!pip install dash
!pip install jupyter_dash

2. 라이브러리 시작

사용한 총서.

from jupyter_dash import JupyterDash 
import dash_core_components as dcc 
import dash_html_components as html 
import plotly.express as px
from dash.dependencies import Input, Output
from sklearn.datasets import load_digits
from sklearn.manifold import TSNE
import numpy as np
from PIL import Image
from io import BytesIO
import base64

3. 보조 함수 정의

numby의 aray를 base 64로 변환하는 함수를 정의합니다.

def numpy_to_b64(array):
    # Convert from 0-16 to 0-255
    array = np.uint8(255 - 255/16 * array)

    im_pil = Image.fromarray(array)
    buff = BytesIO()
    im_pil.save(buff, format='png')
    im_b64 = base64.b64encode(buff.getvalue()).decode('utf-8')
    return im_b64

4. 도표 만들기

T-SNE를 통해 mnist의 데이터 차원을 2D로 축소합니다.
분포도로 결과를 표시하는 도표를 만듭니다.

digits = load_digits()
tsne = TSNE(n_components=2, random_state=0)
projections = tsne.fit_transform(digits.data)
fig = px.scatter(
    projections, x=0, y=1,
    color=digits.target
)

5. 대시로 표시

마우스 프레임에 이미지를 표시할 수 있도록 Callback을 정의합니다.

app = JupyterDash(__name__)

app.layout = html.Div([
                       html.Div(id="output"),
                       dcc.Graph(id="fig1", figure=fig)
])

@app.callback(
    Output('output', 'children'),
    [Input('fig1', 'hoverData')])
def display_image(hoverData):
    if hoverData:
        idx = hoverData['points'][0]['pointIndex']
        im_b64 = numpy_to_b64(digits.images[idx])
        value = 'data:image/png;base64,{}'.format(im_b64)
        return html.Img(src=value, height='100px')
    return None

app.run_server(mode="inline")

위의 작업을 수행하면 차트가 표시됩니다.

보태다

응용 프로그램으로 실행되는 경우 응용 프로그램.코드는py와 유사하다.python app.py처럼 프로그램을 실행하면 브라우저로 http://127.0.0.1:8050/를 열 때 도표를 표시합니다.
app.py

import dash
import dash_core_components as dcc 
import dash_html_components as html 
import plotly.express as px
from dash.dependencies import Input, Output
from sklearn.datasets import load_digits
from sklearn.manifold import TSNE
import numpy as np
from PIL import Image
from io import BytesIO
import base64


def numpy_to_b64(array):
    # Convert from 0-16 to 0-255
    array = np.uint8(255. - 255./16. * array)

    im_pil = Image.fromarray(array)
    buff = BytesIO()
    im_pil.save(buff, format="png")
    im_b64 = base64.b64encode(buff.getvalue()).decode("utf-8")
    return im_b64


digits = load_digits()
tsne = TSNE(n_components=2, random_state=0)
projections = tsne.fit_transform(digits.data)
fig = px.scatter(
    projections, x=0, y=1,
    color=digits.target
)

app = dash.Dash(__name__)

app.layout = html.Div([
                       html.Div(id="output"),
                       dcc.Graph(id="fig1", figure=fig)
])

@app.callback(
    Output('output', 'children'),
    [Input('fig1', 'hoverData')])
def display_image(hoverData):
    if hoverData:
        idx = hoverData['points'][0]['pointIndex']
        im_b64 = numpy_to_b64(digits.images[idx])
        value = 'data:image/png;base64,{}'.format(im_b64)
        return html.Img(src=value, height='100px')
    return None

app.run_server(debug=True)

참고 자료

Python Visualization Library Dash를 사용한 3개의 마우스 hover
https://qiita.com/OgawaHideyuki/items/b4e0c4f134c94037fd4f
Jupyter에서 Dash의 Jupyter를 사용할 수 있습니다.dash
https://qiita.com/OgawaHideyuki/items/725f4ffd93ffb0d30b6c