배경

공간 온도 분포 및 흑백 이미지의 픽셀 배열과 같이 2 차원 배열을 이미지로 시각화하고 싶을 수 있습니다.

Python에서는 matplotlib.pyplot.imshow()을 사용하면 좋지만 JavaScript로 브라우저에서 시각화하고 싶습니다

1. React를 사용하는 경우

1.1. 구현

시각화하고 싶은 배열과 칼라 스케일을 props 로서 주는 것으로 묘화를 실시하는 컴퍼넌트를 구현한다. 내부에서는 canvas의 ImageData 객체를 이용해 픽셀을 조작하고 있다.

Imshow.jsx

import React from "react";
import * as d3 from "d3";


export default class Imshow extends React.Component {
    componentDidMount() {
        this.imshow();
    }

    componentDidUpdate(prevProps) {
        if ( (this.props.data!==prevProps.data) || (this.props.interpolate!==prevProps.interpolate) ) {
            this.imshow();
        }
    }

    imshow = () => {
        const canvas = this.refs.canvas;

        // Square only
        const resolution = Math.sqrt(this.props.data.length);
        ["width", "height"].forEach(a => canvas.setAttribute(a, resolution));

        const context = canvas.getContext("2d");
        const imageData = context.createImageData(resolution, resolution);

        this.props.data.forEach((d, i) => {
            let color = isNaN(d) ? {r: 0, g: 0, b: 0} : d3.color(this.props.interpolate(d));
            imageData.data[i*4  ] = color.r;
            imageData.data[i*4+1] = color.g;
            imageData.data[i*4+2] = color.b;
            imageData.data[i*4+3] = 255;
        });
        context.putImageData(imageData, 0, 0);
    }

    render() {
        return (
            <canvas style={{ width: "100%", height: "100%" }} ref="canvas" />
        );
    }
}

1.2. 예

복소 대수 함수의 Domain Coloring이나 후지산의 고도에 이용하면 다음과 같다.




소스 코드는 GitHub에 있다(복소 로그 함수 , 후지산 )가, 데이터마저 준비 할 수 있으면 이하와 같은 느낌으로 사용할 수 있다.

<Imshow data={this.state.imshowData} interpolate={this.state.colorScale}/>

1.3. 주의점

위의 구현에서,

시각화하는 배열 props.data은 1 차원 배열이며, 정사각형의 시각화에 한정한다 (따라서 요소수는 자연수의 제곱인 전제)

2 차원 배열 d을 시각화하고 싶으면 [].concat.apply([], d)로 1 차원으로 변환 할 수 있습니다

배열의 shape와 화면상의 픽셀수는 독립적으로 설정할 수 있다

width, height를 100 %로 설정했기 때문에 화면의 픽셀 수는 부모 요소에 의해 정의됩니다

.

화면의 픽셀 수에 대해 배열이 작 으면 해상도가 낮아집니다

색상 스케일 props.interpolate은 props.data의 값을 색상으로 변환하는 함수

d3.js의 컬러 스케일 사용하기 쉽지만, 이것은 인수가 0-1이라고 가정하기 때문에 적절하게 스케일을 조정합니다

.


라는 점에 주의. 확장이 필요한 경우 쉽게 구현할 수 있어야 합니다.

2. React를 사용하지 않는 경우

요컨대 canvas 요소의 픽셀치를 지정하고 있을 뿐이므로, 「React 를 사용하는 경우」의 imshow() 내와 거의 같다. 소스 코드는 생략하지만, this.props.***를 변수로 바꾸거나 this.refs.canvas를 document.getElementBy***와 같이 하면 된다고 생각한다.