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）. タグで挟まれた部分がグラフ用コードで、グラフがインタラクティブでなくても見た目は同じです. インタラクティブなグラフのサンドボックスInteractive Graph Sandboxを開き、以下のコードから&lt;graph>タグ以外の部分をコピーして実験を始めましょう.

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

IsDragging 信号
ハンドルのオブジェクトをマウスで移動できるように、まずクリックの有無を検出する方法を考えます. そこで信号signalを追加して、クリックすると真に変わり (isDragging) 結果を示す文を表示する (debug) ことにします: For that, lets add a signal that becomes true when an object is clicked (isDragging), and a text mark to show (debug) the result:

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

ハンドルの目盛り上の位置の信号を設定
ハンドルの位置をピクセル値で示してもあまり役に立ちません - グラフのハンドルには図に有用な、例えば「年」のような位置を設定するほうが使いやすいからです. Vegaのスケール（目盛り）は、データ（例＝年）を画面上の座標に変換したり戻したり（インバート）する便利な仕掛けがあります. この段階では1960から2013までの線的なスケール「yearsScale」を付け加え、グラフの幅いっぱいにマッピングします（パッディングを除外）. さらにscaledHandlePosition信号も新たに加え、マウスを置いた座標Xを「年」に変換します. Vega scales provide a useful mechanism for converting between our data (e.g. years) and the screen coordinates, and back (invert). In this step, we add "yearsScale" linear scale for values 1960..2013, mapping it to the whole width of the graph (excluding padding). We also add a new scaledHandlePosition signal that translates from the mouse X position to the meaningful value in years.

「年」の値のクリーンアップ
既に気がついたかもしれませんが、実はハンドルは上記の設定のままではグラフの横幅を超して動かすことができ、間違った結果を表示してしまいます. またスケールの目盛りは整数ではなく、「年」の値として不釣合いです. この状態を訂正するため、もう1件、後処理の信号「currentYear」を作り、必要な範囲の整数に設定します. 初期値は意味のある範囲に設定し、ハンドルバーの位置と「yearLabel」をその値に結び付けます. 注意する点は、ハンドルの位置は画面の座標に合わせる必要があるため、「yearsScale」を使って値を逆変換します. Also, the scaled value is not an integer that we expect of the year value. To fix this, we can introduce one more post-processing signal called "currentYear" to convert it to an integer and limit it to the needed range. We also initialize it to a reasonable value, and we tie both the "yearLabel" and the position of the handle bar back to this value. Note that the handle's position needs to be in screen coordinates, so we have to use the "yearsScale" to convert the value back:

クリーンアップして仕上げ
いよいよデバッグ用のマークをすべて削除できます. また同じステップでスケールを決めるので、handlePositionとscaledHandlePositionの信号も無用です: We also don't need separate handlePosition and scaledHandlePosition signals because scaling can happen in the same step:

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