produciendo un gráfico "en vivo" con D3

Question

Recientemente comencé a aprender a usar el framework D3.js y, aunque parece que ha sido diseñado para hacer exactamente lo que quiero, no puedo encontrar un ejemplo simple de un gráfico de actualización "en vivo".

Estoy buscando algo así como un gráfico de líneas que se actualiza a medida que nuevos datos están disponibles. Se obtendrían nuevos datos al presionar una url json con una marca de tiempo "vista por última vez" o algún otro método AJAX-y.

edición: La parte D3 de la respuesta está aquí:

http://bost.ocks.org/mike/path/

Ahora, ¿cómo la gente recomiendan obtener los nuevos datos desde el servidor al cliente?

Answer 1

Estos son sólo dos ejemplos:

1. Puede hacer que el cliente tire los nuevos datos desde el servidor a intervalos regulares (es decir, usando un poco de llamadas AJAX).
2. Si el navegador lo admite, puede abrir una conexión web hacia el servidor, de modo que el servidor pueda insertar datos nuevos tan pronto como estén disponibles.

La elección de uno u otro depende de muchas variables: el número de conexiones que esperas, ¿cuál es la velocidad de actualización de los datos, que los navegadores va a apoyar, etc ...

En cualquier caso , la biblioteca d3.js no está involucrada en cómo obtiene los datos, sino que en su lugar cómo se muestran ellos.

Answer 2

Este tutorial le puede ayudar mucho para crear un gráfico de líneas en tiempo real: http://bost.ocks.org/mike/path/

me gustaría añadir unas cuantas observaciones:

datos asincrónicos

Al hacer una gráfico en tiempo real, a menudo obtienes los datos de forma asincrónica, por lo que no puedes saber el tiempo exacto entre cada "punto".

• Para la línea, tiene suerte porque la line descrita en el tutorial no se preocupa por eso.
• Para que la duración tenga un efecto de transición suave, es más complicado. La clave es establecer la duración para que sea el tiempo entre el último fotograma y el anterior. Esta es también una buena aproximación para la próxima ya que la red casi siempre tiene el mismo rendimiento.

Eje Y

En un gráfico de línea convencional, es fácil determinar el y dominio. Sin embargo, con los datos en vivo, el valor y a menudo puede salir del límite. Es por eso que recomendaría llamar a una función para establecer el dominio y en cada iteración. También puedes crear un cuadro delimitador.

Rendimiento

Como los datos se añade siempre es posible que desee estar muy atento al hecho de que tiene que borrar los valores que ya no utilizas, de lo contrario los datos se mantendrán cada vez más pesados ​​y la toda la animación podría colapsar.

Answer 3

Quizás este plugin también puede ser interesante: Cubism.

Cubism.js es un plugin D3 para la visualización de series de tiempo. Utilice Cubism para construir mejores paneles en tiempo real, extrayendo datos de Graphite, Cube y otras fuentes. El cubismo está disponible bajo la licencia de Apache en GitHub.

---

edición:

Un otro proyecto interessant puede ser Rickshaw que también aprovecha la D3.

conjunto de herramientas JavaScript para crear gráficos interactivos en tiempo real

Vea este ejemplo: Random Data in the Future