[JavaScript]D3.jsでグラフを書こう!

福岡拠点の野田です。今日は、データ解析に欠かせない可視化を支援するツールとして、D3.jsの使い方を紹介します。

可視化をするとき、棒グラフだったり、線グラフを出力することが多いと思います。Python、Rなどを使った画像出力ももちろん簡単に実現できるのですが、凝った複雑なグラフを出そうとするとき、D3.jsで描くSVGの柔軟性には目を見張るところがあります。SVGは、Scalable Vector Graphicsの略でベクター情報のイメージデータになります。そのため、拡大しても非常に高精細に表示することができます。また、CSSやJavasciptでイベント制御も可能なため、凝った動きのあるグラフを実現できます。

D3.jsの最新版は、ver5.1.0(2018/05/02時点)になります。ver3.xからver4.xにアップデートした際に大きく変更があったため、今回は個人的にもなじみのあるver3.xでの使い方を紹介します。

使うためには、HTMLヘッダーに以下を組み込むだけ。とても簡単です。

ver3.x

 

ちなみにver5.xでは以下のような感じです。

ここからは、ver3.xでの記述例になります。
以下のような流れでグラフを表示します。

1) 領域確保

グラフを表示する領域を確保します。軸に値を表示するため、マージンを確保します。


2) スケール設定

値の描画変換を行うスケール(基準となる物差し)を指定します。のちにデータ描画でも使います。


3) 軸の描画

スケールをもとに軸を描画します。


4) 補助線の描画

必須ではないですが、指定することでぐっとクオリティがアップします。


5) データ値の描画

線グラフだったり、点グラフだったり、棒グラフなどデータを描画します。今回は、線グラフを扱います。

これでCSVを読み込むと以下のようなグラフを表示することができるようになります。

SVGは、HTMLと同じくXMLで記述されるDOM(文書オブジェクトモデル)の1種です。イベント処理も差し込むことができるため、HTMLと同様な感覚で動的処理を扱えるのは強みと思います。D3.js自体、jQueryなどと同様、DOM操作するための言語とも言えます。慣れが若干必要ですが、凝ったグラフの描けるは大きな魅力です。

これを機会にぜひ触れてみてください。

[PHP]ExcelでUTF-8のCSVが文字化けしないようにBOMをつけよう!

福岡拠点の香月です。

この記事はブラウザからダウンロードするCSVファイルをWebサーバー上で作成するようなPHPプログラムを開発している人向けのトピックです。

ExcelをインストールするとCSVファイル(Comma-Separeted Values)がExcelに関連づきます。テキストエディタでCSVファイルを開く場合と違い、Excelで開くと列が揃って見やすいという利点があります。やったー!

Excelやその他WindowsのアプリでCSVファイルを作成した場合、日本語も問題なく扱えます。保存して改めてExcelで開いても正しく表示されますよね。
しかし、WebからCSVファイルをダウンロードしてExcelで開いた場合に、稀に日本語が文字化けしていることがあります。

サーバー上で次のようなプログラムを組んでcsvファイルを出力します。

クライアント側で保存したcsvファイルをExcelで開くと…

残念ですね。これはCSVファイルの文字コードの違いが問題です。
Windowsのアプリでファイル保存した場合、文字コードはほぼShift-JISとなります。対して近年のWebサーバーで扱う文字コードはほぼUTF-8となっており、CSVファイルもUTF-8であることが多いでしょう。で、このUTF-8の文字コードですが、コード表上はアルファベットや記号(日本語を含む2バイト文字以外)はShift-JISと同じコード範囲を使用しています。つまり、アルファベットや記号だけで書かれたUTF-8のファイルは、Shift-JISのファイルと全く同一ということになります。
日本語Windows上のExcelでCSVファイルを読み込む場合、UTF-8とShift-JISの区別がつかないため、ExcelさんはShift-JISとして読んでしまい、日本語部分が文字化けしてしまう、ということになります。

この問題はUTF-8のCSVファイルの先頭に「BOM」をつけて出力することで回避することができます。先ほどのプログラムの先頭をこうしてBOMを追加します。

クライアント側で保存したcsvファイルをExcelで開くと…

正しく日本語で表示させることができました。

ちなみにこのBOMはユニコードの種類によってコードが決まっています。
ユーティリティ関数としてこのような関数を1つ作っておくと便利ですよ。

OpenGLが使うピクセルフォーマット

WindowsアプリでOpenGLを使ってプログラムを組む時の初期化処理の一環で、次のようにピクセルフォーマットを設定してやる必要があります。これを紹介しているサイトはいくつも見つかりますが、これが一体なにを示しているのか?まで解説しているところがないので調べてみました。

この部分って定型になっていて、気にしなくてもOpenGLプログラミングできますが、一度気になると調べたくなる性分なので仕方ない。

ここで使っているAPIの1つ目はChoosePixelFormat()です。このAPIはアプリを動作させるPC上で使用可能なピクセルフォーマットの番号を返してくれます。第一引数のhDCにはOpenGLで描画するウィンドウのデバイスコンテキストを指定します。第二引数のpfdにはPIXELFORMATDESCRIPTOR 変数のアドレスを指定します。前処理として、このPIXELFORMATDESCRIPTOR のメンバ変数に値を設定してやる必要があります。

nSize
PIXELFORMATDESCRIPTORのサイズ。Windows APIでよくやる手法です。nVersion
絶対1です。

dwFlags
ここで使用目的を指定します。OpenGLではこうです。
(0x01)PFD_DOUBLEBUFFER – ダブルバッファリングで描画高速化
(0x04)PFD_DRAW_TO_WINDOW – ウィンドウに対する描画
(0x20)PFD_SUPPORT_OPENGL – OpenGLサポート

iPixelType
PFD_TYPE_RGBAでRGBAでの使用を宣言します。
もう一つPDF_TYPE_COLORINDEXがありますが、こちらは使いません。

cColorBits
使用する色のビット数を指定します。
8bit – 白黒
24bit – RGB(赤緑青)
32bit – RGBA(赤緑青+透明度)

これを実行すると入力に応じて適切な番号が返ってくるので、これをSetPixcelFormat()に渡してデバイスコンテキストが使用するピクセルフォーマットとして設定するわけです。

ちなみにそのPCでどのようなピクセルフォーマットが使用可能かを取得するAPIも存在します。

DescribePixelFormat(hDC, 0, 0, NULL);でそのPCにあるピクセルフォーマットの個数が返ります。あとは第二引数にその番号を入れてやれば情報を取得することができます。ChoosePixelFormat() で帰ってきた番号を入れることで、OpenGLで使うピクセルフォーマットの内容も分かります。私の環境ではこうなっていました。