Gráfico de área interactivo con Protovis

Question

Este es un proyecto bastante desalentador para un recién llegado a Protovis, pero ¿tal vez podría ayudarme a dividirlo en trozos digeribles?

Lo que me gustaría construir es una "tabla de área interactiva", como se esboza aquí:

En primer lugar, son los datos ... Tengo datos para provincias en 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 
....       ...   .   .    .     .

Para cada provincia y año, me gustaría poder dibujar una tabla de área:

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

Entonces me gustaría agregar 2 tipos de interactividad:

1. Selección de provincia
2. Control deslizante de tiempo

Juntos, las casillas de verificación de selección y el control deslizante de tiempo determinan qué áreas son visibles en un momento dado. Si, por ejemplo, la provincia A se selecciona y el año es 1984, solo se muestra esa área. Si el control deslizante de tiempo ahora se arrastra, los años correspondientes ahora se muestran para la Provincia A. Si se revisa otra provincia, las áreas se superponen y ambas áreas se vuelven a dibujar cuando se mueve el control deslizante.

Preguntas de Protovis:

1. ¿Cómo formateo los datos (provincia, año, x, y) para esta aplicación?
2. ¿Cómo logro el enlace de las casillas de verificación al área?
3. ¿Cómo implemento el control deslizante de tiempo? ¿Dentro de Protovis o como un componente externo con oyentes que desencadenan el reenvío del gráfico?

Answer 1

Formateo de datos: el primer paso es llevarlo a JSON, utilizando alguna herramienta externa (realmente me gusta Google Refine Para esto, aunque es una herramienta bastante grande si esto es para todo lo que necesitas, intente Sr. Converter de datos para una opción rápida y sucia). Estas herramientas probablemente le darán datos como objeto JSON, como este:

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

Una vez que tenga los datos disponibles como JSON, querrá ponerlos en forma para su VIS. Querrá pasar a cada PV. Protovis tiene muchas herramientas para manipular datos; consulte el PV.est Operador. Hay muchas maneras de abordar esto, podría hacer esto:

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

que te da un objeto como:

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

Esto lo configura para los elementos de la interfaz. Mantenga la variedad de provincias marcadas y el año actual en variables globales:

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

y configure su área para hacer referencia a esas 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

Ahora use alguna otra biblioteca, soy parcial a jQuery, con jQuery UI para el control deslizante, para crear sus elementos de interfaz. La función OnChange para cada elemento solo necesita establecer la variable global y la llamada correspondiente vis.render() (Suponiendo que se llama a su panel de raíz vis). Esto debería ser bastante simple, ver aquí Para un ejemplo de protovis usando la interfaz de usuario de jQuery para que un control deslizante de tiempo sea muy similar a lo que tiene en mente.

Answer 2

Creo que estás tratando de hacer ese par de gráficos:

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