JavaScriptベースのウィジットの構築方法

【R】[shiny] shinyにJavascriptを組み込む 1.導入の続きです. How to build a JavaScript based widgetを和訳しながら学びます.
今回はRではなく、html/javascriptによる作図方法のチュートリアルになっています.

個人的にそれぞれ1つの記事だけで、実際に作図ができるように情報提供をしたいと思ってはいますが、今回のコードだけでは実際に動くchartは作成できません. chart作成のためには、リポジトリから依存関係にあるフォルダをダウンロードしていただく必要があります.

1. 例 (Stand alone example)

まずはじめに、c3.jsが提供する最も単純な「gauge」(計器図)を使った可視化から始めます.

イメージ

それぞれのファイルのサンプルは、jsfiddleで表示されます

イメージ : jsfiddle

jsfiddleは、HTML・CSS・Javascriptのコードをインタラクティブに実行できるWebページです. コードの一部を変更すると、特定のライブラリがどのように機能するかを確認することができます. jsfiddle testのリンクから試してみましょう.
たとえば、↑のイメージの左下にあるJavascriptパネルについて、1行目の値を75から他の数値に変更し、左上の「実行」ボタンをクリックすると、ゲージの値が変更されるのが確認できます.

2. 図の作り方 (Recipe to construct charts)

HTML/Javascriptによる作図方法の手順を確認します.

一般的には以下のような手順です.
step1. ライブラリ固有のcss、Javascriptファイルを作成
step2. 図を格納するcontainer要素を作成する
step3. 図に表示させるデータのフォーマットを整える
step4. ライブラリ固有の指示を使ってcontainer内の図を与える
※ step5. グラフを更新する(データの更新・外観の変更・パラメータの更新)

3. 例 (First example)

最初の例を始めましょう.c3.jsによるgauge chartを作成します.全てのコードは以下のようになります.

example_01_gauge.html

html>
<head>
    <link href="c3.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="chart1"></div>

<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>

<script>
var gaugeData = {data: 75}; 

var chart1 = c3.generate({
  bindto: '#chart1',
  data: {
    json: gaugeData,
    type: 'gauge',
  },
  gauge: {
    min: 0,
    max: 100
  }
});
</script>

</body>
</html>

上記のコードは、リポジトリのexampleフォルダの中のexample_01_gauge.htmlに対応しています.
※このhtmlファイルはd3.v3.min.jsなどに依存するので、このファイルだけでは図は表示されません.

このコードを3.で述べた手順に分解して見ていきましょう.

step1.ライブラリ固有のcss、Javascriptファイルを作成

今回の例では、１つのcssファイルと2つのJavaScriptファイルが含まれています.これは、それぞれ3,9,10行目に書かれている部分に該当します.
cssファイルでは、画面上の要素のスタイルに関する指定を記載します. JavaScriptファイルでは、グラフを描写及び更新するロジックを記載します.

step2. 図を格納するcontainer要素を作成する

container要素はdivで作成できます.divタグは、htmlドキュメントのディビジョンを定義します.

<div id="chart1"></div>

ここでは、divにid(chart1)を付与しました.このidの値は一意であり、このdivにcssスタイルを割り当てるときに、要素を特定する際に利用します.

htmlに初めて触れる方で、これらの用語がまだわからない人は、W3Schoolsによるチュートリアルで簡単に理解することができます.

ここで最も重要な点は以下です.

ページ上に要素を作成し、要素上の関数を呼び出すためには、その要素の状態と内容を変更する必要があります.
We want to be able to create elements on a page and to target them in order to be able to call a function on them, which will alter the state and content in that element.

step3. 図に表示させるデータのフォーマットを整える

step3は最も困難なステップです.
dplyr・tidyrをつかったデータ収集・整形に加えて、データをshinyからブラウザに送信する必要があります.しかし、RでのデータフレームやリストなどをJavaScriptで使用するためには、JavaScriptが理解できるフォーマットに変換する必要があります.その変換作業はあなた自身の仕事です.

さきほどの例では、JavaScriptのデータは次の様になっています.
var gaugeData = {data: 75};

このコードでは、"データ"というkeyと"75"の値を持つgaugeDataという変数を作成しています.
Rからgaugeの値を75に設定する場合、チャートに送信される最終的なデータが次のようになっていることを確認する必要があります. この作業が比較的困難です.

方法として、shinyとhtmlwidgetsはR packageのjsonliteを介してデータ構造の変換をするやり方があります.
jsonliteの詳細はvignetteを参照してください.
特に便利なのは、fromJSONとtoJSON関数です.これはRとJavaScriptの間で、データのフォーマットがどのように変換されるのかを示すことができます.

例

ftom_to_json.R

if (!require("jsonlite"))
  install.packages("jsonlite")

library(jsonlite)
toJSON(list(data = 75))

結果

step4. ライブラリ固有の指示を使ってcontainer内の図を与える

この時点で、必要なcssスクリプトとJavaScriptを加え、idを設定したcontainer要素を作成し、gaugeDataというJSONデータセットを構築できています.これでチャートを作成する準備が整いました.

残念ながら、jsのライブラリ間でもチャートの表記方法は異なるため、以下のコードはc3.jsに特有のものになります.しかしこの例を学ぶことは、他のライブラリにおける作図方法に関しても,理解を助けるでしょう.
幾つかのサンプルを試すことで、構文は簡単に理解することができるでしょう. チャートの例はここに載っています.

全てのc3.jsコンポーネントは、c3.generate関数を呼び出すことで初期化されます.この関数は１つのオブジェクトを引数とし、コンポーネントに関する情報をc3に提供します.

例

test.js

var chart1 = c3.generate({
  bindto: '#chart1',
  data: {
    json: gaugeData,
    type: 'gauge',
  },
  gauge: {
    min: 0,
    max: 100
  }
});

このオブジェクトの最初のアイテムはbindtoです.この要素は、htmlページのどの要素をターゲットとしてコンポーネントを配置するかをc3に指示します.ここでは"#chart1"です.(divのid)

次に、チャートに表示する値の情報を持つJavaScript変数のgaugeData変数を渡します.

var gaugeData = {data: 75};

データは、"data"というkeyと"75"の値のペアとして提供されます.　データへの命名はgaugeでは必要ありませんが、後にビジュアルを拡張するときには、データに名前をつける必要があります.

以下のコードでは、データを保持する変数を渡し、c3にgauge型のグラフを作成するように指示します.

data: {
  json: gaugeData,
  type: 'gauge'
}

c3には、コンポーネントにデータを渡すための様々な方法があります.ここに詳細

最後に、gaugeの最小値と最大値を与えます.

gauge: {
  min: 0,
  max: 100
}

今回はここまで！html/Javascriptのチュートリアルが中心でした.

参考

How to build a JavaScript based widget
前回
【R】[shiny] shinyにJavascriptを組み込む 1.導入
続き
【R】[shiny] shinyにJavascriptを組み込む 5. Extending the gauge ~ tutorial1の終わりまで

【R】[shiny] shinyにJavascriptを組み込む 2.Stand alone example ~ 4.First example