Extension:Graph/Interactive Graph Tutorial/ja

このチュートリアルではインタラクティブなグラフの作成方法を説明するため、国ごとの出生率の変化を例題とします. 表示する年を選ぶスライダーを設定し、地図を使って世界の出生率の分布を示します. このグラフ限定のソースコードは独立したページavailable as a separate wiki pageで調べてください. インタラクティブなグラフのサンドボックスInteractive Graph Sandboxで使い方を実験できます. またVegaの説明文書全文complete Vega documentationにも興味があるかもしれません.

Move the slider to change the year, and hover the mouse over countries to read the rate. Try it !



図形を描くには
まずいくつかの要素を描くところから始めます（marks marks）. タグで挟まれた部分がグラフ用コードで、グラフがインタラクティブでなくても見た目は同じです. インタラクティブなグラフのサンドボックスInteractive Graph Sandboxを開き、以下のコードから&lt;graph>タグ以外の部分をコピーして実験を始めましょう.

ヒント: 実験用にグラフのスペックをVega Editorにコピーするには、編集ではなく「ソースを編集」を押します.



IsDragging 信号
ハンドルのオブジェクトをマウスで移動できるように、まずクリックの有無を検出する方法を考えます. そこで信号signalを追加して、クリックすると真に変わり (isDragging) 結果を示す文を表示する (debug) ことにします:



ハンドルの位置決めの信号
前節でオブジェクトにマウスが当たったかどうか検知したので、次に 信号を追加し、isDragging信号が真のときだけ変化するよう設定します. 作ったばかりの信号は「update」部でハンドルの「x」座標に付与します:



ハンドルの目盛り上の位置の信号を設定
ハンドルの位置をピクセル値で示してもあまり役に立ちません - グラフのハンドルには図に有用な、例えば「年」のような位置を設定するほうが使いやすいからです. Vegaのスケール（目盛り）は、データ（例＝年）を画面上の座標に変換したり戻したり（インバート）する便利な仕掛けがあります. この段階では1960から2013までの線的なスケール「yearsScale」を付け加え、グラフの幅いっぱいにマッピングします（パディングを除外）. さらにscaledHandlePosition信号も新たに加え、マウスを置いた座標Xを「年」に変換します.



「年」の値のクリーンアップ
既に気がついたかもしれませんが、実はハンドルは上記の設定のままではグラフの横幅を超して動かすことができ、間違った結果を表示してしまいます. またスケールの目盛りは整数ではなく、「年」の値として不釣合いです. この状態を訂正するため、もう1件、後処理の信号「currentYear」を作り、必要な範囲の整数に設定します. 初期値は意味のある範囲に設定し、ハンドルバーの位置と「yearLabel」をその値に結び付けます. 注意する点は、ハンドルの位置は画面の座標に合わせる必要があるため、「yearsScale」を使って値を逆変換します.



クリーンアップして仕上げ
いよいよデバッグ用のマークをすべて削除できます. また同じステップでスケールを決めるので、handlePositionとscaledHandlePositionの信号も無用です:



次のステップ
パート2へ続く