Interaktiver Flächendiagramm mit Protovis

Question

Dies ist ein ziemlich entmutigendes Projekt für einen Protovis -Newcomer, aber vielleicht könnten Sie mir helfen, es in verdauliche Stücke aufzuteilen?

Was ich gerne erstellen möchte, ist ein "interaktives Gebietsdiagramm", wie hier skizziert:

Zunächst sind es die Daten ... Ich habe Daten für Provinzen 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 
....       ...   .   .    .     .

Für jede Provinz und jedes Jahr möchte ich in der Lage sein, eine Flächenkarte zu zeichnen:

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

Dann möchte ich 2 Arten von Interaktivität hinzufügen:

1. Auswahl der Provinz
2. Zeitleiter

Zusammen bestimmt die Auswahlkontrollkästchen und der Zeitschieberegler, welche Bereiche zu einem bestimmten Zeitpunkt sichtbar sind. Wenn beispielsweise die Provinz A ausgewählt ist und das Jahr 1984 ist, wird nur dieser Bereich angezeigt. Wenn der Zeitleiter jetzt gezogen wird, werden die entsprechenden Jahre jetzt für die Provinz A angezeigt. Wenn eine andere Provinz überprüft wird, werden die Bereiche überlagert und beide Bereiche werden neu gezeichnet, wenn sich der Zeitschieber bewegt.

Protovis Fragen:

1. Wie format ich die Daten (Provinz, Jahr, x, y) für diese Anwendung?
2. Wie erhalte ich die Bindung von Kontrollkästchen an den Bereich?
3. Wie implementiere ich den Time Slider? Innerhalb von Protovis oder wie eine externe Komponente mit Hörern, die die Wiederaufnahme des Diagramms auslösen?

Answer 1

Formatierungsdaten: Der erste Schritt besteht darin, es mit einem externen Tool in JSON zu bringen (ich mag es wirklich Google Refine Dazu ist es ein ziemlich großes Werkzeug, wenn dies alles ist, was Sie brauchen - versuchen Sie es - versuchen Sie es Mr. Data Converter für eine schnelle und schmutzige Option). Diese Tools geben Ihnen wahrscheinlich Daten als JSON -Objekt wie folgt an:

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

Sobald Sie die als JSON verfügbaren Daten zur Verfügung haben, möchten Sie sie für Ihr VIS in Form bringen. Sie möchten jeden Pv.AREA eine Reihe von Werten übergeben - aus Ihrer Beschreibung sieht es so aus, als ob Sie die Werte [10, 100, 1000, 10000] möchten. Protovis hat viele Tools zum Manipulieren von Daten - siehe die Pv.Nest Operator. Es gibt viele Möglichkeiten, wie Sie sich dem nähern könnten - ich könnte Folgendes tun:

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

Das gibt Ihnen ein Objekt wie:

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

Dies setzt Sie für die Schnittstellenelemente ein. Halten Sie die Auswahl an überprüften Provinzen und das laufende Jahr in globalen Variablen:

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

und richten Sie Ihren Bereich auf, um diese Variablen zu verweisen:

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

Verwenden Sie nun eine andere Bibliothek - ich bin Teil von JQuery, mit JQuery UI für den Schieberegler -, um Ihre Schnittstellenelemente zu erstellen. Die Onchange -Funktion für jedes Element muss nur die entsprechende globale Variable festlegen und aufrufen vis.render() (Angenommen, Ihr Stammfeld wird aufgerufen vis). Dies sollte ziemlich einfach sein - siehe hier Für ein Protovis -Beispiel, das die JQuery -Benutzeroberfläche verwendet, um einen Zeitschieberegler sehr ähnlich zu machen, was Sie im Sinn haben.

Answer 2

Ich denke, Sie versuchen, dieses Paar Charts zu erstellen:

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