grafico all'area interattiva utilizzando Protovis

Question

Questo è un bel progetto di scoraggiante per un nuovo arrivato Protovis, ma forse si poteva aiutarmi a dividerlo in pezzi digeribili?

Quello che vorrei di costruire è una "tabella di area interattiva", come abbozzato qui:

Prima di tutto, si tratta di dati ... Ho dati per province in 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 
....       ...   .   .    .     .

Per ogni provincia ed anno, vorrei essere in grado di disegnare un grafico ad area:

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

Poi vorrei aggiungere 2 tipi di interattività:

1. Selezione della Provincia
2. Tempo cursore

Insieme, le caselle di selezione e di scorrimento temporale determinano quali aree sono visibili in un dato momento. Se, ad esempio, provincia di A è selezionata e l'anno è del 1984, solo che sia visualizzato zona. Se il cursore Adesso viene trascinato, gli anni corrispondenti vengono ora visualizzati per Provincia A. Se un'altra Provincia è selezionata, le aree vengono sovrapposti ed entrambe le aree sono ridisegnato Quando il cursore tempo si muove.

domande Protovis:

1. Come faccio a formattare i dati (provincia, anno, x, y) per questa applicazione?
2. Come faccio a raggiungere il legame di caselle di controllo per zona?
3. Come faccio a implementare il dispositivo di scorrimento temporale? All'interno Protovis o come un componente esterno con gli ascoltatori che si innescano ri-rendering del grafico?

Answer 1

Formattazione dati: Il primo passo è quello di ottenere in JSON, utilizzando alcuni tool esterno (mi piace molto Google Refine per questo, anche se è uno piuttosto grande strumento se questo è tutto ciò che serve per - provare Mr. Data Converter per una scelta rapida e sporca). Questi strumenti vi probabilmente vi darà i dati come un oggetto JSON, in questo modo:

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

Una volta che hai i dati disponibili come JSON, ti consigliamo di farlo in forma per la vostra vis. Stai andando a voler passare ogni pv.Area un array di valori - dalla tua descrizione sembra che si desidera che il [10, 100, 1000, 10000] valori. Protovis ha un sacco di strumenti per la manipolazione dei dati - vedi l'operatore pv.Nest . Ci sono molti modi si potrebbe affrontare questo - potrei fare questo:

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

che vi dà un oggetto come:

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

In questo modo si prepara per gli elementi dell'interfaccia. Mantenere la matrice delle Province controllati e l'anno in corso in variabili globali:

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

e impostare la vostra zona per fare riferimento a quelle variabili:

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

Ora utilizzare alcuni altra libreria - io ho un debole per jQuery, con jQuery UI per il cursore - per creare i vostri elementi di interfaccia. La funzione onchange per ogni elemento deve solo impostare la corrispondente vis.render() variabile e chiamata globale (supponendo che il pannello principale è chiamato vis). Questo dovrebbe essere abbastanza semplice - vedi qui per un esempio di Protovis utilizzando jQuery UI per make un dispositivo di scorrimento temporale molto simile a quello che hai in mente.

Answer 2

Credo che si sta tentando di fare quel paio di tabelle:

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