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 API y superficies de dibujo de alta potencia. Los más notables son el elemento lienzo y los gráficos vectoriales escalables (SVG). Ambas funciones ahora están 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 haciendo, incluso con los mejores editores de código y las mejores computadoras portátiles 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 profundizar un poco en algunos de los proyectos menos conocidos que satisfacen algunas necesidades de nicho muy interesantes, del tipo que no sabes que necesitas hasta que los necesitas.
Consulte también nuestros artículos sobre los mejores marcos de JavaScript y herramientas de JavaScript para probar. ¿Comenzando desde cero? Luego, pruebe uno de los mejores creadores de sitios web y considere qué servicio de alojamiento web es el adecuado para usted. Quizás también quieras ver nuestra selección de tutoriales de CSS y JavaScript.
01. D3.js
D3.js ofrece posibilidades ilimitadas, como lo 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 de gráficos JavaScript. Con más de un millón de descargas semanales en npm, es posiblemente la biblioteca de gráficos más conocida y utilizada de todas. Incluso tiene su propia página de Wikipedia. Y, seamos realistas, ¿no es entonces cuando sabes que has llegado al gran momento?
D3 le permite crear visualizaciones de datos de cualquier tipo. Sólo necesitas echar un vistazo a su página de ejemplos para ver el mundo de posibilidades. Mejor aún, visita la visualización interactiva de Shirley Wu de cada línea del musical Hamilton si realmente quieres quedarte boquiabierto.
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 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 acompañado de la compensación de la complejidad. La curva de aprendizaje puede ser pronunciada y el código aún puede parecer detallado. Crear algo tan simple como un gráfico de barras requiere ensamblar manualmente los ejes, las escalas, las marcas e incluso dibujar los rectángulos que representarán las barras. Los desarrolladores a menudo se quejan del bajo nivel de comprensión necesario para ser eficaz con D3.
Esto se debe en gran medida a que la creación de visualizaciones de datos complejas requiere que usted tenga un conocimiento básico de la visualización que desea crear. D3 no es la mejor opción para gráficos precocidos. Para ello, existen otras opciones que le llevarán al “pozo del éxito” mucho más rápido.
D3 es capaz de renderizar en lienzo y SVG. Sin embargo, la verdadera magia de D3 está en su capacidad de “vincular datos” a 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 visualizaciones de datos, SVG suele ser el formato de salida preferido.
02. Gráfico.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 puedes crear casi cualquier cosa con D3, Chart.js te limita a ocho tipos de gráficos prediseñados: de líneas, de barras, circulares, polares, de burbujas, de dispersión, de área y mixtos. Si bien esto parece limitante, es lo que hace que sea más sencillo comenzar con Chart.js. Esto es especialmente cierto para aquellos que no son expertos en visualización de datos pero conocen un gráfico básico.
Toda 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 configura las opciones del gráfico. Chart.js solo se representa en el lienzo. Esto no es un problema ya que todos los navegadores modernos admiten el elemento de lienzo HTML, pero podría ser un problema para los desarrolladores que tienen requisitos para la compatibilidad con SVG.
También significa que estás limitado en las animaciones posibles. Listo para usar, Chart.js admite 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 realizar 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 está minimizado y comprimido en ~ 51 kb. 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 sencillez. Es posible que descubra que ha alcanzado el límite de lo que hará de forma inmediata. A menudo, los desarrolladores comienzan con una solución como Chart.js y luego pasan a D3.
Si le atrae la simplicidad de Chart.js, es posible que le guste la siguiente opción: Chartist.
03. cartista
Una gran ventaja de usar Chartist es que responde de forma predeterminada. (Crédito de la imagen: Chartista)
Chartist pretende ser una biblioteca de gráficos simple y optimizada, de tamaño pequeño y fácil de usar. También está diseñado para responder de forma predeterminada. Esto es más importante de lo que parece, ya que marcos como D3 no cambian el tamaño de los gráficos automáticamente, sino que requieren que el desarrollador se vincule con eventos y vuelva a dibujar los gráficos.
Chartist también es pequeño en comparación con Chart.js. Pesa apenas 10 KB y no tiene dependencias. Esto podría deberse a que sólo ofrece tres tipos de gráficos: de líneas, de barras y circulares. 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 ven contrarrestados por la falta de tipos de gráficos listos para usar.
Chartist renderiza en SVG en lugar de lienzo, lo que lo hace mucho más personalizable en términos de apariencia, además de brindar mucho más control sobre la interactividad y las animaciones. Sin embargo, no tener acceso a un lienzo significa que es posible que le resulte más difícil 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ías la opción de renderizar en ambos modos.
Los gráficos chartistas 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 quienes 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 cierto eje y agruparlos de determinadas maneras. 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 la compatibilidad con marcos de código abierto, incluidos React y Angular. No se menciona ningún paquete Vue en su sitio.
04. Britecharts
Britecharts incluye D3, para que pueda disfrutar de la funcionalidad de D3 sin tener que aprender cómo funciona (Crédito de la imagen: Britecharts)
Britecharts es una biblioteca de gráficos que incluye 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 toda una tarea crear un gráfico de barras con Vanilla D3, el ajuste de Britecharts lo hace tan simple como crear un nuevo objeto barChart y luego establecer su ancho y alto.
barChart.width(500).height(500);
Britecharts admite todos los tipos de gráficos básicos: líneas, barras, anillos, viñetas, diagramas de dispersión, minigráficos y escalonados, que son más que los que ofrecen 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 esquemas de colores hermosos.
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 que esta es una opción más atractiva que simplemente crear un gráfico completo desde cero con D3.
También se centra en los aspectos de enlace de datos de D3, lo que lo hace bastante bueno para gráficos que necesitan 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. Taucharts
Taucharts enseña a los usuarios los fundamentos de la visualización de datos (Crédito de la imagen: Taucharts)
Taucharts 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 The Grammar of Graphics, un libro del autor Leland Wilkinson. Proporciona comprensión sobre cuándo y cómo utilizar qué visualizaciones de datos para mostrar diferentes tipos de datos.
Desde el primer momento, incluye gráficos de líneas, barras, diagramas de dispersión, áreas y facetas. Sin embargo, implementa los conceptos de La gramática de los gráficos en el 'Lenguaje Taucharts', 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 La gramática de los gráficos para aprovechar al máximo su poder.
Hasta ahora hemos cubierto sólo gráficos y visualización de datos. Esto se debe a que dibujar gráficos es el caso de uso más común de una biblioteca de gráficos en un navegador. Pero no es ni mucho menos el único. Otro escenario bastante común para los gráficos es, por supuesto, la animación.
06. Dos.js
Twos.js se destaca cuando se maneja animación 2D (Crédito de la imagen: Two.js)
No debe confundirse con D3.js, two.js es una biblioteca JavaScript de código abierto para 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 el sentido de que se centra estrictamente en el dibujo y no tiene gráficos prefabricados ni estructuras interactivas para elegir. Esto significa que, al igual que D3, necesita una comprensión subyacente del tipo de dibujo que está intentando hacer y cómo lograrlo con las construcciones que proporciona two.js. Dibujar un círculo es bastante sencillo. Por otro lado, crear una animación detallada es una tarea mucho más complicada. Two.js solo abstrae el tedio de dibujar formas, no el tedio del dibujo general.
Two.js también realiza un seguimiento de todos los objetos que crea, para que pueda hacer referencia a ellos y animarlos en cualquier momento. Esto es particularmente importante si estás desarrollando juegos y…
