はじめに
D3.js(Data-Drive Documents)は入力データを基にグラフなどのチャートをブラウザに出力するためのライブラリです。サンプルを試した備忘録を投稿します。
前提
- Visual Studio Codeがインストール済み
- Node.js/npmがインストール済み
- gitからSampleをダウンロードして任意のディレクトリに解凍済み
- View In Browserがインストール済み(Market Placeより)
- OSはWindows7/10を想定
サンプル d3
ブラウザへコンパイラーのステータスとパフォーマンスのチャートを出力するサンプル。
ファイル構成
| パス | ファイル名 | 説明 |
|---|---|---|
| . | data.js | data.tsのコンパイルにて作成されたJavaScriptファイル |
| . | data.js.map | data.tsのコンパイルにて作成されたmapファイル |
| . | data.ts | ブラウザへ出力するチャート定義TypeScript |
| . | perf.html | ブラウザ出力用のhtml |
| . | README.md | このサンプルの説明と使用方法 |
| . | tsconfig.json | TypeScriptのコンパイルコンフィグファイル |
クラス図とオブジェクト図
実行
cd ./d3
tsc --sourcemap data.ts
perf.htmlをエディターで表示Ctrl+F1
結果
ポイント
data.tsのモジュールchartで描画プロット定義し、プロットの各変数の値を設定後、Document.addEventListenerで描画を実行します。
ブラウザ表示のperf.htmlでd3.vs.jsを呼び出しd3ライブラリをロード後、コンパイル済みdata.jsをロードしてブラウザにチャートを出力します。
perf.html抜粋
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="data.js"></script>
ノート
d3.jsの基本構造をメモしておきます。
チャートを出力するためには、TypeScriptでチャートのプロット定義(chart)とプロットの値定義(plot)およびブラウザ出力(document)の３つの定義が必要です。
そして、ブラウザ出力のhtmlでd3.jsとTypeScriptのコンパイル後のjsをロードします。
まとめ
数値を見える化するプレゼンにはチャートは必須アイテムです。
このサンプルでわかることは、チャートに結構プログラミングが必要なことです。汎用的なチャートのパターンクラスを作成したり、値の入力を外部ファイルから入力するなど標準化することでプログラミングの工数を低減できそうです。JavaScriptで実装できなかったクラスをTypeScriptでコーディングすることでd3ライブラリの有効活用ができます。
以上、おそまつ