Estoy tratando de elegir la tecnología correcta para usar para actualizar un proyecto que básicamente muestra miles de puntos en un gráfico ampliable y panorámico. La implementación actual, que utiliza Protovis, tiene un rendimiento inferior. Compruébalo aquí:
http://www.planethunters.org/classify
Hay alrededor de 2000 puntos cuando se aleja completamente. Intente usar las manijas en la parte inferior para acercar un poco y arrástrelo para desplazarse. Verá que está bastante entrecortado y el uso de la CPU probablemente aumenta al 100% en un núcleo, a menos que tenga una computadora realmente rápida. Cada cambio en el área de enfoque requiere un rediseño de protovis, que es bastante lento y es peor con más puntos dibujados.
Me gustaría hacer algunas actualizaciones en 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. En el 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 se supone que es mejor para renderizar animaciones . Sin embargo, tengo dudas sobre cuánto mejor y cuál es su límite de rendimiento. Por esa razón, también estoy considerando una revisión más completa usando una biblioteca basada en lienzo como KineticJS . Sin embargo, antes de llegar 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 esta cantidad de datos 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 uno. El acercamiento, el alejamiento y la panorámica deben ser suaves. Si las bibliotecas SVG más recientes son decentes en esto, entonces tal vez la facilidad de uso de d3 supere la configuración aumentada para 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 creada por NYTimes que usa SVG, pero que aún se anima aceptablemente sin problemas: 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.
Me di cuenta de que algunos usuarios han utilizado un híbrido de manipulación de d3.js combinado con la representación de lienzo . Sin embargo, no puedo encontrar mucha documentación sobre esto en línea o ponerme en contacto con el OP de esa publicación. Si alguien tiene alguna experiencia en este tipo de implementación de DOM-to-Canvas ( demostración , código ), también me gustaría saber de usted. Parece ser un buen híbrido de poder manipular 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 seguirá ralentizando las cosas.
Sé que existen algunas preguntas que son similares a esta, pero ninguna de ellas hace exactamente lo mismo. Gracias por tu ayuda.
Seguimiento : la implementación que terminé usando está en https://github.com/zooniverse/LightCurves