【tableau】我が家のかわいいチンチラをViz化してみた【python】

はじめに

どうも、お茶太郎です。

今回は、さっくりとですが、画像データをレコードデータ化し、それを使ってtableauのVizを描画する手順をご説明いたします。
家のチンチラのかわいらしさを是非ご堪能ください。

Viz

賀正

概要

データは、pythonというプログラム言語で作っています。

最近、分析や機械学習で有名なプログラムですね。
このプログラムのまさに機械学習部分の入り口で使う機能でデータを作ります。
機械学習（詳しくないですが。。。）は、基本的にデータを配列化し、その配列化されたデータ間の類似度や、近似値を求めるための関数を定義していく作業だと認識しています。

その機械学習の画像処理、ここで使う画像データの配列化でViz用データを作成しています。

pythonの準備

このサイトの説明に従い、Anacondaをインストールします。

Anacondaはpythonを手軽に使えるパッケージツールです（あってるかな？）。

前準備

まず、画像を用意してください。
今回のサンプルプログラムでは、ファイル名を「gazou.jpg」としています。

それを特定のフォルダを作ってそこに入れて、デスクトップにでもおいてください。

Jupyter Notebookの起動

Windowsのメニューから、Jupyter Notebookを立ち上げます。

うまくインストール・起動できればブラウザが立ち上がり、下記画面が表示されます。

ブラウザが立ち上がらず、黒い画面で止まってしまうことがあります。
私の会社PCはこの状態です。「Jupyter Notebookで使用するブラウザの定義」がきちんとできていないのかと思っていますが、放置しています。

黒い画面の赤線部分、ここにURLが表示されています。
これをコピーしてブラウザに貼り付けてみてください。
それで、Jupyter Notebookが立ち上がると思います。

プログラム作成

今、表示されている画面はPC内のフォルダ階層のはずです。

DESKTOPに移動して、先ほど画像ファイルを置いたフォルダを選択してください。

下記のような状態のはずです（画像ファイルのみ表示されている）。

ここで、画面右上のNewをクリック、pythonのファイルを新規作成します。

下記、状態になるはずです。

ここの、『In』の部分に、下記コードを貼り付けてください。

import os #ファイル書き出し用に必要なOS関連操作
import sys
from PIL import Image #画像処理用
import numpy as np #配列処理用

im_gray = np.array(Image.open(os.getcwd() + '\\gazou.jpg').convert('L')) #画像ファイルをグレースケールで読み込み、配列化

np.savetxt(os.getcwd() + '\\gazou.csv', im_gray, fmt='%.2e') #確認のためにCSV出力（必須ではない）

with open(os.getcwd() + '\\gazou_Data.csv', mode='w') as f: #出力ファイルの設定
    f.writelines("X軸,Y軸,色" + '\n') #出力ファイルのヘッダ用意 #１行目にヘッダ出力
    
    
    #以下、配列データをX軸、Y軸、カラー値として出力
    for iY in range(im_gray.shape[0]): #Y軸の位置を定義
        for iX in range(im_gray.shape[1]): #X軸の位置を定義
            f.writelines(str(iX) + "," + str(im_gray.shape[0] - iY) + "," + str(255-im_gray[iY,iX]) + '\n')

print('おわり')

開いているプログラムと同じ階層の画像を読み込みますので、パスの修正は不要です。

実行

作成したプログラム（In[0]のはず。数値は実行するごとに増えます。）内にカーソルを移動する。

画面上部のメニュー、【▶Run】をクリック

数秒待機

補足
待機中は、ブラウザのタグ部分に砂時計が表示されます。

処理が終わると、「おわり」という文字が表示されます。

フォルダ内に、いくつかファイルが作成されています。

『gazou_Data.csv』が最終データです。

これをtableauで、描画してください。
tableau側の解説は、割愛いたします。

保存と終了

下記、タブに対して終了処理をします。

プログラムが表示されている画面上のメニューの保存ボタンをクリックするか、「ctr+s」で保存します。

もうひとつの画面で、Shutdown処理をする。

①プログラムを選択
②【Shutdown】クリック

これで、タブをとじてください。

最後にコマンドプロンプト
「ctr+c」を入力して、プログラムを終了させ、ウインドウも閉じる。

お茶太郎

これがよくわからねーから、いつも「ctr+c」「ctr+x」連打しているんだわ。
あと、画面はもっといろいろコマンド表示されているからな。

処理の説明

処理のイメージはこんな感じです。

ほぼ、Python実装の機能なので、インストールなど準備ができれば手軽に使えると思います。

色の情報が配列として並んでいる。
それを「X軸・Y軸の座標＋色情報」に置き換えて、CSVに吐き出すだけですね。

軸の反転、色調の反転を処理するために、引き算しています。
tableauでも調整できますが、めんどくさくないようにデータ出力時に処理しました。

最後に

以上、ざっくり解説でした。

今回は、単色のスケール画像（グレースケールで描画）でしたが、カラーにもチャレンジしたいと思います。

では、また。。。。

ノシ～～～～～～～～～～～

追記

ソース美しくないが。。。
いろいろなカラーコード出すバージョン。グレースケール、RGB３カラム、HEXで出力。
グレースケールは、RGB足して３で割ったやっつけです。これで大丈夫でしょうか？
描画チェックをしていないので、色調反転している可能性ありです。

import os
import sys
from PIL import Image
import numpy as np

im = np.array(Image.open(os.getcwd() + '\\gazou.jpg'))
#im = np.array(Image.open(os.getcwd() + '\\gazou.jpg').convert('L'))
#print(im)

Image.fromarray(im).save(os.getcwd() + '\\gazou2.jpg')
#np.savetxt(os.getcwd() + '\\gazou.csv', im, fmt='%.2e')

#print(im.shape[0])
#print(im.shape[1])
#print(im[0,1])

with open(os.getcwd() + '\\gazou_Data.csv', mode='w') as f:#出力ファイルのヘッダ用意
    f.writelines("X軸,Y軸,グレー,赤,緑,青,16進数" + '\n')
    
    
    for iY in range(im.shape[0]):
        for iX in range(im.shape[1]):
            gray_color = str(int(((255 - im[iY,iX][0]) + (255 - im[iY,iX][1]) + (255 - im[iY,iX][2]))/3))
            color_code = '#%02X%02X%02X' % (255 - im[iY,iX][0], 255 - im[iY,iX][1], 255 - im[iY,iX][2])
            f.writelines(str(iX) + "," + str(im_gray.shape[0] - iY) + gray_color + "," + str(255 - im[iY,iX][0]) + "," + str(255 - im[iY,iX][1]) + "," + str(255 - im[iY,iX][2]) + "," + color_code + '\n')

print('おわり')