Protovis frente a D3.js

84

TLDR: ¿Alguien tiene experiencia con protovis y D3.js para aclarar las diferencias entre los dos?

He estado jugando con protovis durante las últimas 2 semanas y hasta ahora ha sido genial. Excepto que ahora parece que me he estrellado contra una pared de ladrillos con animación.

protovis: http://vis.stanford.edu/protovis/

Quiero hacer una animación bastante simple, pero con protovis se siente menos intuitivo; estoy empezando a pensar que protovis nunca fue realmente diseñado para la animación. Entonces, comencé a buscar en D3.js:

http://mbostock.github.com/d3/ex/stack.html

Se ve muy similar, pero:

  • Parece más ligero
  • Parece estar orientado a interactuar con otros elementos DOM y SVG
  • Parece estar orientado a agregar animaciones

¿Alguien puede aclarar otras diferencias?

Estaría muy agradecido por todas y cada una de las aportaciones.

Por Richard Powell
fuente

Respuestas:

117

He trabajado bastante con Protovis y algunas cosas con D3. Además de los puntos que mencionas, creo que destacan las siguientes diferencias:

  • Donde Protovis proporciona una capa de abstracción simplificada entre las propiedades visuales que está especificando, D3 usa las especificaciones CSS y DOM reales, por lo que en lugar de .width(10)o .fillStyle('#00C')usaría .style('width', 10)o .attr('fill', '#00C'). En estos ejemplos, la diferencia es bastante trivial, pero cuando haces algo como dibujar una línea en una imagen SVG, hay grandes diferencias. El resultado es que usar D3 puede parecer un poco más bajo: tiene más control, pero debe estar bastante familiarizado con la sintaxis SVG para hacer algunas de las cosas que Protovis hace mucho más fácilmente.

  • Como puede observar, Protovis está todo renderizado en SVG, mientras que D3 puede usar otras partes del DOM. Esto significa que, para visualizaciones que no requieren elementos visuales basados ​​en SVG, puede usar D3 incluso con navegadores que no admiten SVG. También significa que es mucho más fácil integrar HTML y SVG en la misma visualización, lo cual es realmente bueno para cosas como tratar con texto (la manipulación y el diseño del texto son bastante débiles en Protovis).

  • D3 cambia o elimina algunas de las utilidades básicas de Protovis, como escalas y manipulación de datos. Me molesta repetidamente que las utilidades básicas les guste pv.sum()o pv.mean()no tengan equivalentes D3, aunque algunas, como .nest(), se comparten entre las dos bibliotecas. Editar 10/01/12: D3 ha llenado sus utilidades de datos, pero todavía hay algunos que incluye Protovis y D3 no lo hace, por ejemplo pv.dict, pv.numeratey pv.repeat. Es de suponer que se dejaron de lado porque se consideraron menos útiles en general.

  • D3 proporciona utilidades para solicitudes asincrónicas. Cuando quiero esto en Protovis, generalmente tengo que usar una biblioteca externa (es decir, jQuery).

  • La documentación de la API D3 carece casi por completo de estar incompleta, en comparación con los documentos bastante detallados de Protovis. Editar (30/8/13) : D3 ahora tiene documentación API completa y detallada en GitHub , por lo que este punto ya no es relevante.

  • Finalmente, no he hecho mucho con la animación, pero creo que tienes toda la razón: D3 proporciona más soporte de animación que Protovis, especialmente en términos de transiciones animadas. Protovis puede volver a renderizar parte o la totalidad de la visualización a pedido, pero no tiene ningún soporte para recorrer una animación de duración limitada; tendría que codificarlo todo a mano setInterval. D3 parece hacer de esto una parte mucho más integral de la biblioteca.

Editar (12/7/11) : Parece que hay una nueva diferencia importante: a partir del 28 de junio de 2011, Protovis ya no está en desarrollo activo y el equipo de Protovis está impulsando D3.js en su lugar. La última versión es bastante estable, por lo que esto no debería impedirte usarla, pero definitivamente es un punto a considerar.

nrabinowitz
fuente
Bastante correcto, excepto por el tercer punto. Puede incrustar un gráfico de Protovis en un elemento HTML arbitrario.
Geoff
@Jeff - Puede que haya exagerado el caso. Mi punto fue que D3 está diseñado para trabajar con elementos arbitrarios, mientras que hacer esto con Protovis (AFAIK) requiere trabajar fuera de la API establecida (por ejemplo, estableciendo la $dompropiedad raíz ). Bajaré el tono de ese punto.
nrabinowitz
1
@Jeff - Pensándolo bien, estoy abandonando ese punto por completo, de alguna manera nunca me había dado cuenta de la Panel#canvaspropiedad. Gracias por la nota.
nrabinowitz
Muchas gracias por la respuesta detallada, eso ha sido realmente útil
Por Richard Powell
2
Desde marzo de 2013, la referencia de API para la versión 3 de D3 parece estar completa y da una muy buena impresión. Además, hay una buena documentación con muchos tutoriales y buenos ejemplos.
Mobiletainment
32

Hay un tutorial que cubre las diferencias entre D3 y Protovis con cierto detalle. Estoy de acuerdo con la descripción de @ nrabinowitz, aunque señalaré que recientemente agregamos una extensa documentación de API .

mbostock
fuente
1
Sí, lo acabo de notar ayer (¡muy apreciado!). Actualizaré mi respuesta para la posteridad :).
nrabinowitz
6

Hay un artículo reciente de los Autores de Protovis / d3.js publicado en 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf principalmente sobre d3.js pero que contiene algunas de las razones por las que cambiaron ciertos cosas en el camino de Protovis a d3.js.

pintxo
fuente
Encontré ese papel útil . Sin hacer ninguna prueba, me da una idea de dónde funciona y dónde es imperfecto. Gracias.
Mike Gale