Tableau de zone interactive en utilisant Protovis

Question

Ceci est tout à fait un projet de taille pour un nouveau venu Protovis, mais vous pourriez peut-être me l'aider à diviser en morceaux digestibles?

Ce que je voudrais construire est un "tableau de zone interactive", comme esquissée ici:

Tout d'abord, ce sont les données ... J'ai données pour les provinces dans 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 
....       ...   .   .    .     .

Pour chaque province et l'année, je voudrais être en mesure de dessiner un tableau régional:

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); 

Alors je voudrais ajouter 2 types d'interactivité:

1. Sélection de Province
2. Temps curseur

Ensemble, les cases de sélection et le curseur temporel déterminent les zones sont visibles à tout moment. Si, par exemple, la province A est sélectionné et l'année 1984, seule cette zone est affichée. Si le curseur de temps est maintenant déplacé, les années correspondantes sont maintenant affichés pour la province A. Si une autre province est cochée, les zones sont recouvertes et les deux zones sont retracées lorsque le curseur se déplace.

Questions Protovis:

1. Comment formater les données (province, année, x, y) pour cette application?
2. Comment puis-je obtenir la liaison à la zone de cases à cocher?
3. Comment puis-je mettre le curseur de temps? Au sein Protovis ou comme un composant externe avec les auditeurs qui déclenchent re-rendu du graphique?

Answer 1

Mise en forme des données: La première étape consiste à obtenir en JSON, en utilisant un certain outil externe (je vraiment Mr. Data Converter pour une option rapide et sale). Ces outils vous donnera probablement des données comme un objet JSON, comme ceci:

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

Une fois que vous avez les données disponibles JSON, vous aurez envie de le mettre en forme pour votre vis. Vous allez vouloir passer chaque pv.Area un tableau de valeurs - de votre description, il semble que vous voulez que le [10, 100, 1000, 10000] valeurs. Protovis a beaucoup d'outils pour manipuler des données - voir le pv.Nest opérateur . Il y a beaucoup de façons dont vous pourriez aborder - je pourrais faire ceci:

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']];
    });

qui vous donne un objet comme:

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

Cela vous met en place les éléments d'interface. Gardez le tableau des provinces vérifiés et l'année en cours dans les variables globales:

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

et configurer votre région pour faire référence à ces variables:

// 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

Maintenant, utilisez une autre bibliothèque - Je suis partie à jQuery, avec jQuery UI pour le curseur - pour créer vos éléments d'interface. La fonction onchange pour chaque élément a juste besoin de définir la variable globale et appel vis.render() correspondant (en supposant que votre panneau de racine est appelé vis). Cela devrait être assez simple - voir pour un exemple Protovis en utilisant jQuery UI pour faire un curseur de temps très similaire à ce que vous avez à l'esprit.

Answer 2

Je pense que vous essayez de faire cette paire de cartes:

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