Protovisを使用したインタラクティブエリアチャート

StackOverflow https://stackoverflow.com/questions/4773393

質問

これはProtovisの新人にとって非常に困難なプロジェクトですが、おそらくあなたは私がそれを消化可能なチャンクに分割するのを助けることができるかもしれませんか？

私が構築したいのは、ここでスケッチされているように、「インタラクティブなエリアチャート」です。 http://i.stack.imgur.com/7bs9W.png

まず第一に、それはデータです...私はExcelの州のデータを持っています：

Province   Year  10  100  1000  10000 
A          1970  2   4    6     3 
A          1971  3   6    8     5 
B          1970  6   9    12    6 
B          1971  4   8    11    8 
....       ...   .   .    .     .

各州と年について、私はエリアチャートを描くことができるようにしたいと思います：

vis.add(pv.Area) 
    .data(data.ProvinceA[1970]) 
    .bottom(1) 
    .interpolate("basis") 
    .left(function(d) x(d.x)) 
    .height(function(d) y(d.y)) 
    .fillStyle("rgb(21,173,210)") 
    .anchor("top").add(pv.Line) 
    .lineWidth(3);

次に、2種類のインタラクティブ性を追加したいと思います。

  1. 州の選択
  2. タイムスライダー

一緒に、選択チェックボックスとタイムスライダーは、いつでもどの領域が表示されるかを決定します。たとえば、州Aが選択され、年が1984年である場合、そのエリアのみが表示されます。タイムスライダーがドラッグされた場合、それに対応する年が州Aに表示されるようになりました。別の州がチェックされている場合、エリアはオーバーレイされ、時間スライダーが移動すると両方のエリアが再描画されます。

Protovisの質問：

  1. このアプリケーションのデータ（州、年、X、Y）をフォーマットするにはどうすればよいですか？
  2. エリアへのチェックボックスのバインディングを実現するにはどうすればよいですか？
  3. タイムスライダーを実装するにはどうすればよいですか？ Protovis内で、またはグラフの再レンダリングをトリガーするリスナーとの外部コンポーネントのように？
役に立ちましたか？

解決

フォーマットデータ：最初のステップは、外部ツールを使用してJSONに入れることです（私は本当に好きです Google Refine このため、それはあなたがそれを必要とするすべてであればかなり大きなツールですが - 試してみてください データコンバーター氏 迅速で汚れたオプションの場合）。これらのツールは、おそらくこのようなJSONオブジェクトとしてデータを提供します。

`[{"Province":"A", "Year":"1970", "10":2, "100":4, "1000":6, "10000":3}, ...]`

JSONとしてデータを利用できるようになったら、VISのためにそれを形にしたいと思うでしょう。あなたは各pv.areaを渡したいと思うでしょう - あなたの説明から、それはあなたが[10、100、1000、10000]値を望んでいるように見えます。 Protovisにはデータを操作するための多くのツールがあります - pv.nestオペレーター. 。あなたがこれにアプローチするかもしれない多くの方法があります - 私はこれをするかもしれません：

data = pv.nest(data)
    .key(function(x) {return x.Province})
    .key(function(x) {return x.Year})
    .rollup(function(v) {
        return [v[0]['10'], v[0]['100'], v[0]['1000'], v[0]['10000']];
    });

次のようなオブジェクトが表示されます。

{ 
    A: {
        1970: [2,4,6,3]
        // ...
    },
    // ...
}

これにより、インターフェイス要素を設定します。チェックされた州と今年の年をグローバル変数に保管してください。

var currentProvinces = ['A', 'B', ...];
var currentYear = 1970;

これらの変数を参照するように領域を設定します。

// a containing panel to help with layout and data
var panel = vis.add(pv.Panel)
    .data(function() currentProvinces); // making this a function allows it to 
                                        // be re-evaluated later
// the area itself
var area = panel.add(pv.Area)
    .data(function(province) data[province][currentYear]);
    // plus more area settings as needed

次に、他のライブラリを使用します - 私はjQueryに偏っています。スライダーにjQuery UIを使用して - インターフェイス要素を作成します。各要素のオンチェンジ関数は、対応するグローバル変数を設定して呼び出す必要があります vis.render() （ルートパネルが呼び出されると仮定します vis）。これは非常に簡単なはずです - 参照してください ここ jQuery UIを使用したProtovisの例の場合、あなたが念頭に置いているものと非常によく似た時間スライダーを作成します。

他のヒント

私はあなたがそのペアのチャートを作ろうとしていると思います：

http://mbostock.github.io/protovis/ex/zoom.html

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top