11 marcos de JavaScript para crear gráficos

marco javascript: imagen gráfica
(Crédito de la imagen: futuro)

Los marcos de Javascript pueden cumplir una variedad de funciones. Aquí, veremos algunas bibliotecas que lo ayudarán a crear gráficos impresionantes.

El navegador ofrece varias superficies y API de dibujo de alta potencia. Los más notables son el elemento lienzo y los gráficos vectoriales escalables (SVG). Ambas funciones están ahora disponibles en casi todos los navegadores de escritorio y móviles, pero las API necesarias para usarlas son de nivel bastante bajo y el 'nivel bajo' generalmente se traduce en una gran cantidad de código tedioso y redundante solo para hacer cosas simples.

Dado que escribir código tedioso y redundante no ocupa un lugar destacado en la lista de cosas que los desarrolladores suelen disfrutar hacer, incluso con la mejores editores de código y el mejores laptops para programar , afortunadamente hay varias bibliotecas disponibles para ayudarlo con todos los requisitos de dibujo de su navegador.

En este artículo, veremos algunas de las opciones disponibles. Exploraremos las bibliotecas de JavaScript más populares y hablaremos sobre sus fortalezas y debilidades. También vamos a hacer un poco de especulación en algunos de los proyectos menos conocidos que satisfacen algunas necesidades de nicho muy interesantes, del tipo que no sabe que necesita hasta que los necesita. ¿Empezando desde cero? Prueba un top Creador de sitios web y considerar cual alojamiento web el servicio es el adecuado para usted.

01. D3.js

Marcos gráficos de JavaScript: D3.js

D3.js ofrece posibilidades ilimitadas, como demuestra la visualización interactiva de Hamilton de Shirley Wu(Crédito de la imagen: D3)

D3.js es el gran jefe de las bibliotecas gráficas de JavaScript. Con más de un millón de descargas semanales en sobre el nivel del mar , es muy posiblemente la más conocida y ampliamente utilizada de todas las bibliotecas gráficas. Incluso tiene el suyo Página de Wikipedia . Y, seamos sinceros, ¿no es eso cuando sabes que has llegado a lo grande?

D3 le permite crear visualizaciones de datos de cualquier tipo. Solo necesitas echar un vistazo a su página de ejemplos para ver el mundo de posibilidades. Mejor aún, visite Shirley Wu's visualización interactiva de cada línea del musical Hamilton si realmente quieres que te vuelen.

D3 es una herramienta que lo abarca todo. Tiene su propia selección de DOM, capacidades AJAX e incluso un generador de números aleatorios patentado. Cada componente de D3 es su propio módulo de nodo que debe importarse. Por ejemplo, el módulo de selección se llama selección d3. También hay módulos para matrices, formas, colores, arrastrar y soltar, tiempo y mucho más.

El poder de D3 viene con la compensación de la complejidad. La curva de aprendizaje puede ser empinada y el código aún puede parecer detallado. Crear algo tan simple como un gráfico de barras requiere que ensambles manualmente el eje, las escalas, las marcas e incluso dibujes los rectángulos que representarán las barras. Los desarrolladores a menudo se quejan de la comprensión de bajo nivel necesaria para ser eficaces con D3.

Esto se debe en gran parte a que la creación de visualizaciones de datos complejas requiere que tenga una comprensión de bajo nivel de la visualización que desea crear. D3 no es la mejor opción para gráficos prefabricados. Para eso, hay varias otras opciones que lo encontrarán en el ' pozo del éxito ' mucho mas rápido.

D3 es capaz de renderizar en lienzo y SVG. Sin embargo, la verdadera magia de D3 está en su capacidad para 'enlazar datos' con los gráficos que genera. Piense en un gráfico que cambia a medida que cambian los datos entrantes. Con SVG, cada elemento gráfico es un elemento individual que se puede seleccionar y actualizar. Esto no es posible con canvas y, dado que D3 se trata fundamentalmente de potenciar las visualizaciones de datos, SVG suele ser el formato de salida preferido.

02. Chart.js

Marcos gráficos de JavaScript: Chart.js

Chart.js tiene ocho tipos de gráficos prediseñados, lo que significa que los usuarios pueden comenzar a trabajar rápidamente(Crédito de la imagen: Chart.js)

Chart.js es un proyecto de código abierto para crear gráficos sólidos con JavaScript. La gran diferencia entre Chart.js y D3 es que, si bien puede crear casi cualquier cosa con D3, Chart.js lo limita a ocho tipos de gráficos prediseñados: línea, barra, circular, polar, burbuja, dispersión, área y mixto. Si bien esto parece limitante, es lo que hace que Chart.js sea más simple para comenzar. Esto es especialmente cierto para aquellos que no son expertos en visualización de datos pero conocen un gráfico básico.

La sintaxis se basa en un tipo de gráfico. Inicializa un nuevo gráfico en un elemento de lienzo existente, establece el tipo de gráfico y luego establece las opciones del gráfico. Chart.js solo se renderiza en lienzo. Esto no es un problema, ya que todos los navegadores modernos admiten el elemento lienzo HTML, pero podría ser un problema para los desarrolladores que tienen requisitos de compatibilidad con SVG.

También significa que está limitado en las animaciones posibles. De fábrica, Chart.js es compatible con todas las ecuaciones de aceleración y las animaciones se especifican con una configuración de propiedad. Si bien eso hace que obtener un gráfico animado sea rápido y fácil, no tener elementos SVG individuales le impide poder hacer animaciones complejas utilizando transiciones y animaciones CSS3.

A diferencia de D3, Chart.js no es modular, por lo que solo se necesita una inclusión de JavaScript para obtener soporte para todas las funciones y tipos de gráficos. Esto hace que sea más fácil comenzar, pero significa que sus activos pueden ser mucho mayores. Esto es especialmente cierto si necesita ejes de tiempo: Chart.js luego requiere Moment.js, que tiene ~ 51kb minificado y comprimido. Es mucho más fácil crear un gráfico de barras con Chart.js que con D3. Sin embargo, hay un techo que viene con la simplicidad. Es posible que llegue al límite de lo que hará de inmediato. A menudo, los desarrolladores comienzan con una solución como Chart.js y luego pasan a D3.

Si la simplicidad de Chart.js le atrae, es posible que realmente le guste la siguiente opción: Chartist.

03. Cartista

Marcos gráficos de JavaScript: Chartist

Una gran ventaja de usar Chartist es que responde de forma predeterminada(Crédito de la imagen: Chartist)

Chartista pretende ser una biblioteca de gráficos simple y optimizada que sea de tamaño pequeño y fácil de comenzar. También está diseñado para responder de forma predeterminada. Este es un problema mayor de lo que parece, ya que los marcos como D3 no cambian el tamaño de los gráficos automáticamente, sino que requieren que el desarrollador se vincule a los eventos y vuelva a dibujar los gráficos.

Chartist también es pequeño en comparación con Chart.js. Pesa solo 10 KB sin dependencias. Eso podría deberse a que solo ofrece tres tipos de gráficos: línea, barra y circular. Hay variaciones dentro de estos tipos (es decir, el diagrama de dispersión es un tipo de línea en Chartist) pero el tamaño pequeño y la facilidad de configuración se contrarrestan con la falta de tipos de gráficos listos para usar.

Chartist se renderiza en SVG en lugar de lienzo, lo que lo hace mucho más personalizable en términos de apariencia, además de proporcionar mucho más control sobre la interactividad y las animaciones. Sin embargo, no tener acceso de representación a un lienzo significa que es posible que tenga más dificultades para realizar ciertas acciones. Por ejemplo, existe una API para representar un lienzo en una imagen (toDataURI). Esa opción no existe para SVG, por lo que exportar un gráfico como imagen resultará mucho más complicado. En un mundo ideal, tendría la opción de renderizar en ambos modos.

Los gráficos Chartist son más fáciles de configurar que Chart.js, ya que hay menos opciones disponibles. Si bien es posible ampliar estos gráficos con bastante funcionalidad, su enfoque en la simplicidad significa que son, por definición, simples. Chartist es una gran solución para aquellos que necesitan una solución de gráficos básica. Los gráficos son intrínsecamente difíciles de configurar, ya que requieren algún tipo de conocimiento sobre cómo configurar los datos a lo largo de ciertos ejes y agrupados de ciertas formas. Chartist hace que la parte de los gráficos sea lo más simple posible, pero es posible que necesite una solución más poderosa a medida que se sienta más cómodo generando sus gráficos.

Chartist también enumera el soporte de marco de código abierto, incluidos React y Angular. No se menciona ningún paquete de Vue en su sitio.

04. Britecharts

Marcos gráficos de JavaScript: Britecharts

Britecharts envuelve D3, para que pueda disfrutar de la funcionalidad D3 sin tener que aprender cómo funciona(Crédito de la imagen: Britecharts)

Britecharts es una biblioteca de gráficos que envuelve D3. Fue creado por Eventbrite, quien luego abrió el proyecto bajo la licencia permisiva Apache V2.

Ofrece un conjunto de gráficos mínimo, pero estéticamente agradable. Si bien puede ser una gran tarea crear un gráfico de barras con vainilla D3, el ajuste de Britecharts lo hace tan simple como crear un nuevo objeto barChart y luego establecer su ancho y alto.

|_+_|

Britecharts tiene soporte para todos los tipos de gráficos básicos: línea, barra, anillo, viñeta, diagrama de dispersión, minigráfico y paso, que es más que los ofrecidos por bibliotecas como Chartist. También proporciona información sobre herramientas básica y funcionalidad de leyenda. Las animaciones de los gráficos están integradas y Eventbrite ha proporcionado algunos hermosos esquemas de colores.

En última instancia, Britecharts es una excelente opción para la funcionalidad básica de gráficos. Los objetos de configuración son bastante simples y aún obtienes el poder de D3 bajo las sábanas sin tener que saber nada sobre D3 en sí. Muchos desarrolladores encontrarán esta opción más atractiva que simplemente crear un gráfico completo desde cero con D3.

También se centra en los aspectos de vinculación de datos de D3, lo que lo hace bastante bueno para gráficos que deben cambiar a medida que cambian los datos subyacentes. Si bien es algo restrictivo en los tipos disponibles, también tiene un tipo de gráfico base que puede ampliar para crear nuevos tipos de gráficos propios.

05. Tipos de inmersiones

Marcos gráficos de JavaScript: Taucharts

Taucharts enseña a los usuarios los fundamentos de la visualización de datos(Crédito de la imagen: Taucharts)

Estilos de buceo es otra solución de gráficos que envuelve la complejidad de D3 en una API fácil de implementar. Se basa en los conceptos de La gramática de los gráficos , un libro del autor Leland Wilkinson. Proporciona información sobre cuándo y cómo usar qué visualizaciones de datos para mostrar diferentes tipos de datos.

Fuera de la caja, presenta gráficos de líneas, barras, diagramas de dispersión, áreas y facetas. Sin embargo, implementa los conceptos de The Grammar of Graphics en 'Taucharts Language', que proporciona un marco en el que implementar sus propias visualizaciones de datos.

Taucharts parece bastante atractivo y el hecho de que esté construido sobre D3 lo convierte en una opción atractiva y poderosa. Sin embargo, existe la sensación de que el desarrollador también necesita leer The Grammar of Graphics para aprovechar al máximo su poder.

Hasta ahora, hemos cubierto solo la visualización de datos y gráficos. Esto se debe a que dibujar gráficos es el caso de uso más común para una biblioteca de gráficos en un navegador. Pero de ninguna manera es el único. Otro escenario bastante común para los gráficos es, por supuesto, la animación.

06. Two.js

Marcos gráficos de JavaScript: Two.js

Twos.js se destaca en el manejo de animaciones 2D(Crédito de la imagen: Two.js)

No confundir con D3.js, two.js es una biblioteca JavaScript de código abierto para el dibujo bidimensional en la web. También puede apuntar a las tres opciones de gráficos en los navegadores modernos: SVG, Canvas y WebGL.

Two.js es algo similar a D3 en que se centra estrictamente en el dibujo y no tiene gráficos prefabricados o estructuras interactivas para elegir. Esto significa que, al igual que D3, necesita una comprensión subyacente del tipo de dibujo que está tratando de hacer y cómo lograrlo con las construcciones que proporciona two.js. Dibujar un círculo es bastante sencillo. Crear una animación detallada, por otro lado, es un esfuerzo mucho más complicado. Two.js solo abstrae el tedio de dibujar formas, no el tedio del dibujo en general.

Two.js también realiza un seguimiento de todos los objetos que crea, por lo que puede hacer referencia a ellos y animarlos en cualquier momento. Esto es particularmente importante si está desarrollando un juego y tiene activos que necesitan ser rastreados para cosas como la detección de colisiones. Tiene un bucle de animación incorporado, que le evita tener que preocuparse por los fotogramas de animación y facilita la vinculación en una biblioteca de animación como GreenSock .

Si bien two.js es poderoso, su naturaleza de forma libre puede dejar a algunos desarrolladores inseguros de cómo comenzar y es más una herramienta de nicho para el dibujo y la animación 2D. Otra excelente opción es pts.js.

07. Pts.js

Marcos gráficos de JavaScript: Pts.js

La metodología predeterminada de Pts es buena para visualizaciones interactivas, así como animaciones.(Crédito de la imagen: pts.js)

Pts también es una biblioteca de dibujos bidimensionales. Sin embargo, es fundamentalmente diferente a two.js, ya que utiliza una metodología predeterminada sobre cómo se deben ensamblar los dibujos y las animaciones: espacio, forma y punto. La analogía que utilizan sus desarrolladores para explicar esto es una del mundo físico. El espacio es papel. La forma es el lápiz. Y el punto es tu idea.

En cuanto a su implementación, el espacio es un elemento lienzo. Una vez que se crea el elemento de lienzo, puede agregarle jugadores. Pueden ser funciones u objetos. Estas funciones y objetos deben ajustarse a la interfaz predeterminada que tiene un espacio. Pts se basa en TypeScript, por lo que no es necesario adivinar cuáles son, ya que las herramientas que use probablemente sugieran las que tienen autocompletar.

Por ejemplo, un espacio tiene una función de inicio que puede especificar. Este es un código que se ejecuta cuando el espacio está listo. Dentro de estas funciones, el dibujo al espacio se produce mediante el objeto formulario. Los objetos de forma pueden dibujar cualquier tipo de forma y el punto es donde se encuentran estos elementos en el espacio.

Pts parece estar diseñado principalmente para crear visualizaciones y animaciones interactivas. Su implementación es interesante, aunque bastante abstracta. Los desarrolladores pueden tener dificultades para comprender el modelo de 'espacio, forma, punto' que requiere Pts. Este es otro obstáculo mental que deberá superarse además del de simplemente dibujar y animar formas.

08. Anime.js

Marcos gráficos de JavaScript: Anime.js

Anime.js funciona en un sistema escalonado, lo que ayuda a cronometrar sus animaciones(Crédito de la imagen: Anime.js)

Anime.js es principalmente una biblioteca de animación. Tiene un sistema de escalonamiento incorporado para que sea más simple tener animaciones complejas que se superponen o dependen de la ocurrencia de otra ejecución. Es común que las animaciones se programen juntas o se activen entre sí. El asombroso sistema hace que esto sea más fácil de implementar, ya que ayuda a aliviar parte de la sobrecarga de rastrear todo lo que sucede en la página y configurar manualmente los tiempos de animación.

A diferencia de las bibliotecas de dibujo cubiertas hasta ahora, anime.js no tiene API para dibujar formas. En cambio, asume que sus formas ya existen y que desea animarlas. Esto lo hace ideal para usar con bibliotecas como two.js. Anime.js tiene soporte para animar propiedades CSS, SVG, DOM e incluso objetos JavaScript.

Anime.js es una buena opción para animar dibujos existentes y probablemente se combinará con otra biblioteca. Debe considerarse una alternativa a algo como GreenSock y no un reemplazo para otras bibliotecas de dibujos. Es probable que Anime.js se use para animaciones más complejas que deben suceder como parte de una experiencia web interactiva.

09. PixiJS

Marcos gráficos de JavaScript: PixiJS

PixiJS es una biblioteca de dibujos 2D con una API que se creó y usó en Adobe Flash, por lo que algunos estarán familiarizados(Crédito de la imagen: PixiJS)

PixiJS es otra biblioteca de dibujos 2D. Su objetivo principal es facilitar la visualización, la animación y la gestión de gráficos 2D, para que puedas concentrarte en crear tu experiencia o juego sin preocuparte por seguir el ritmo de todas las formas e imágenes que tienes que dibujar y animar. Si está creando un juego, los activos (o sprites) pueden aumentar rápidamente a un número que es difícil de administrar. (¿Hay muchos activos que guardar? Manténgalos seguros en la forma más confiable almacenamiento en la nube .)

Un aspecto convincente de PixiJS es que proviene de una API que fue construida y utilizada ampliamente en Adobe Flash. Este es un gran beneficio para los desarrolladores que provienen de un entorno Flash, ya que la experiencia les resultará familiar. También es similar al SpriteKit de Apple.

PixiJS no es un motor de juego, por lo que si lo está usando para juegos, no encontrará ninguna herramienta o física para manejar cosas como la detección de colisiones. Tendrá que envolverlo en un motor de juego real o en uno que construya usted mismo, si se siente intrépido.

PixiJS se procesa en WebGL. WebGL es un motor para hacer gráficos acelerados por GPU en el navegador. Esto significa que es útil para animaciones y gráficos que usan una gran cantidad de recursos del sistema y funcionarían mejor cuando se procesan con una unidad de procesamiento de gráficos (GPU) discreta. Está basado en OpenGL, que es el equivalente de escritorio para ejecutar juegos y programas de gráficos 3D. Debajo del capó, WebGL usa el elemento lienzo HTML.

Los desarrolladores de gráficos serios apreciarán el poder de WebGL. Sin embargo, estas experiencias pueden degradarse en máquinas de menor potencia. Incluso mientras redactaba este artículo, muchas de las demostraciones de PixiJS provocaron una notable ralentización en mi sistema, que no tiene las capacidades de gama alta necesarias para gráficos y animaciones complejas.

10. Zdog

Marcos gráficos de JavaScript: Zdog

Zdog ofrece la apariencia de 3D usando dibujos 2D(Crédito de la imagen: Zdog)

La mayoría de los motores de dibujo que hemos discutido hasta ahora son bidimensionales. Esto se debe a que la mayoría de las interacciones que tenemos con nuestra pantalla ocurren en dos dimensiones: a lo largo de los ejes X e Y. Los dibujos y animaciones tridimensionales suelen ser mucho más complejos.

Zdog es una biblioteca para crear experiencias pseudo-3D que son en su mayoría de naturaleza plana. Se llama pseudo-3D porque mientras conceptualiza sus dibujos en el espacio 3D, los renderiza como formas planas. Utiliza trucos visuales para hacer que los objetos 2D parezcan 3D. El efecto es realmente interesante. Se ve completamente tridimensional cuando se ve la animación, pero cuando se toma una captura de pantalla, es claramente una imagen plana. Aquí hay un ejemplo: la demo rotativa de Mario.

Dado que las representaciones son 2D, Zdog puede representar en Canvas o SVG. Zdog es una opción fantástica para animaciones 3D en objetos simples, especialmente si esos activos incorporan aspectos de diseño plano. Los desarrolladores que quieran animación 3D pero no quieran empantanarse en el complejo mundo de los motores de gráficos 3D pueden encontrar en Zdog una solución adecuada. Además, con su enfoque en imágenes planas, Zdog puede permitirse una interfaz mucho más simple y un rendimiento mucho más alto que el que se requeriría para la representación 3D de imágenes gráficas complejas.

No tiene los elementos de un motor de juego, como la gestión de activos y la detección de colisiones, por lo que debería estar envuelto en un motor de juego o esas consideraciones se deben atender manualmente. Esto significa que Zdog es probablemente mejor para animaciones 3D aisladas en páginas de destino.

11. Snap.svg

Marcos gráficos de JavaScript: Snap.svg

Snap.svg tiene una API que seleccionará un elemento SVG para que luego le dibuje elementos(Crédito de la imagen: Snap.SVG)

Snap.svg dice que hace que 'trabajar con sus activos SVG sea tan fácil como jQuery hace que trabajar con DOM'. Es posible que pueda deducir de la referencia de jQuery que Snap.svg es un poco más antiguo, pero su API se siente tan fácil como jQuery y eso es algo bastante poderoso.

Snap.svg tiene una API limpia y simple para seleccionar su elemento SVG principal y luego dibujar elementos en él. Es más adecuado para desarrolladores que buscan una solución rápida para animar SVG. Es una opción particularmente buena si sus animaciones son simples y no tiene mucho conocimiento sobre motores de animación. Si bien está algo anticuado, ciertamente no debe pasarse por alto, ya que podría ser la forma más fácil de trabajar con sus SVG.

Snap.svg es refrescante en su simplicidad. Está enfocado al trabajo de seleccionar y trabajar con SVG y no intenta ser más que eso. Snap se puede combinar con otras bibliotecas de gráficos aquí para dibujar y renderizar en SVG. También es bueno si tiene SVG existentes y desea una forma fácil de trabajar con ellos.

Este artículo se publicó originalmente en la revista net.

Artículos relacionados: