Estoy tratando de elegir la tecnología adecuada para actualizar un proyecto que básicamente representa miles de puntos en un gráfico ampliable y que se puede ampliar. La implementación actual, utilizando Protovis, no es satisfactoria. Échale un vistazo aquí:

http://www.planethunters.org/classify

Hay alrededor de 2000 puntos cuando está totalmente alejado. Intente usar los controles en la parte inferior para acercar un poco, y arrástrelos para desplazarse. Verás que es bastante entrecortado y que el uso de tu CPU probablemente suba al 100% en un solo núcleo a menos que tengas una computadora realmente rápida. Cada cambio en el área de enfoque llama a un redibujado a protovis que es bastante lento y peor con más puntos dibujados.

Me gustaría hacer algunas actualizaciones a la interfaz, así como cambiar la tecnología de visualización subyacente para que sea más receptiva con la animación y la interacción. Del siguiente artículo, parece que la elección es entre otra biblioteca basada en SVG o una basada en lienzo:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js, que surgió de Protovis, está basado en SVG y esSe supone que es mejor en la representación de animaciones.. Sin embargo, tengo dudas sobre cuánto mejor y cuál es su techo de rendimiento. Por esa razón, también estoy considerando una revisión más completa usando una biblioteca basada en lienzo comoCinética js. Sin embargo, antes de ir demasiado lejos en el uso de un enfoque u otro, me gustaría escuchar a alguien que haya hecho una aplicación web similar con tanta información y obtener su opinión.

Lo más importante es el rendimiento, con un enfoque secundario en la facilidad de agregar otras funciones de interacción y programar la animación. Probablemente no habrá más de 2000 puntos a la vez, con esas pequeñas barras de error en cada una.Acercar, alejar y desplazarse debe ser suave. Si las bibliotecas SVG más recientes son decentes en esto, entonces quizás la facilidad de uso de d3 sea mayor que la configuración incrementada de KineticJS, etc. Pero si hay una gran ventaja de rendimiento al usar un lienzo, especialmente para personas con computadoras más lentas, entonces Definitivamente preferiría ir por ese camino.

Ejemplo de aplicación hecha por NYTimes que usa SVG, pero aún así anima de manera aceptable:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Si puedo obtener ese rendimiento y no tener que escribir mi propio código de dibujo de lienzo, probablemente optaría por SVG.

Noté que algunos usuarios han usado un híbrido deManipulación d3.js combinada con renderizado de lienzo.. Sin embargo, no puedo encontrar mucha documentación sobre esto en línea o ponerse en contacto con el OP de esa publicación. Si alguien tiene experiencia en este tipo de DOM-to-Canvas (manifestación, código) implementación, me gustaría saber de usted también. Parece ser un buen híbrido de poder manipular los datos y tener un control personalizado sobre cómo renderizarlos (y, por lo tanto, el rendimiento), pero me pregunto si tener que cargar todo en el DOM todavía va a ralentizar las cosas.

Sé que existen algunas preguntas similares a esta, pero ninguna de ellas pregunta exactamente lo mismo. Gracias por tu ayuda.

Seguir: la implementación que terminé usando es enhttps://github.com/zooniverse/LightCurves