Vivimos en una época de crecimiento explosivo en la cantidad de datos generados y consumidos por la humanidad. En casi todas las aplicaciones que se desarrollan hoy en día, los datos se usan en algún lugar dentro de ellos o se visualizan. Utilizando datos, los programadores se esfuerzan por hacer que trabajar con sus programas sea lo más cómodo posible.
A veces puede suceder que lo más valioso e interesante que una aplicación puede proporcionar al usuario sean algunos datos. Sin embargo, si los representa en forma de una lista o tabla, es probable que trabajar con dichos datos sea tedioso. Además, si hay una gran cantidad de datos, al ver solo su representación más simple, el usuario tendrá dificultades para analizarlos y tomar decisiones basadas en ellos.
Los datos que representan al usuario de la aplicación, no solo deben ser valiosos para él en sí mismos. Deben estar diseñados de manera que sea rápido, conveniente y agradable trabajar con ellos.
Hoy presentamos a su atención una traducción de un material que analiza las bibliotecas JavaScript de código abierto para la visualización de datos.
1. D3
Biblioteca D3Quizás la biblioteca de código abierto
D3 (también llamada D3.js) pueda llamarse la más popular de las bibliotecas JS existentes para la visualización de datos. Este proyecto, en particular, ha reunido casi 80 mil estrellas en GitHub. La biblioteca fue creada para visualizar datos utilizando tecnologías como HTML, SVG y CSS.
Gracias a la atención de los creadores de la biblioteca a los estándares web, D3 ofrece a los desarrolladores un entorno holístico adecuado para su uso en navegadores modernos para visualizar datos, eliminando la necesidad de buscar algunas soluciones pagas. La biblioteca D3 combina componentes para la visualización de datos y un enfoque para trabajar con el DOM, que, una vez más, se basa en datos. D3 le permite enviar datos arbitrarios al DOM y luego aplicar las transformaciones apropiadas al documento. Aquí hay una gran
galería de ejemplos sobre el uso de esta biblioteca.
Por cierto, preste atención al hecho de que existe la opinión de que D3
no es
una biblioteca para la visualización de datos . Creemos que usted mismo puede decidir qué considerarlo y si usarlo en su proyecto.
2. Chart.js
Chart.jsLa biblioteca
Chart.js , que ha reunido alrededor de 40 mil estrellas en GitHub, es una solución muy popular para crear gráficos y diagramas HTML5 basados en el
<canvas> , diseñados para desarrollar aplicaciones web receptivas. La segunda versión actual de la biblioteca admite la combinación de gráficos de varios tipos (hay 8 tipos básicos de gráficos), varios sistemas de coordenadas. Chart.js se puede usar junto con la biblioteca
moment.js . La biblioteca, si es necesario, se puede descargar desde
cdnjs .
3. Three.js
Three.jsLa biblioteca
Three.js es una solución muy popular (alrededor de 45 mil estrellas en GitHub; más de 1000 personas contribuyeron al proyecto) para crear animación 3D usando WebGL. La flexibilidad y la abstracción del proyecto significa que Three.js se puede utilizar para visualizar datos en
2 y 3 dimensiones. Por ejemplo,
aquí hay un módulo especializado para Three.js, diseñado para crear gráficos tridimensionales. Aquí hay un
sandbox en línea para experimentos de visualización de datos. Si está pensando en visualizar datos utilizando WebGL, asegúrese de echar un vistazo a Three.js.
4. ECharts y Highcharts JS
Un ejemplo de trabajo con ECharts (imagen tomada de aquí )ECharts es un proyecto de Baidu, que ha reunido alrededor de 30 mil estrellas en GitHub, es una biblioteca para visualización de datos y gráficos en un navegador. Está escrito en JavaScript puro utilizando la biblioteca
zrender diseñada para trabajar con el
<canvas> .
La biblioteca admite gráficos mediante
<canvas> , SVG (4.0+) y VML. ECharts se puede usar no solo en el desarrollo de páginas diseñadas para navegadores de escritorio o móviles, sino también para la organización de una representación efectiva del servidor.
Aquí hay una galería de ejemplos del uso de esta biblioteca con la que puede experimentar en un entorno interactivo.
Highcharts jsLa biblioteca
Highcharts JS es bastante utilizada, recolectó alrededor de 8 mil estrellas en GitHub. El mecanismo principal utilizado por ella para la visualización de datos es la tecnología SVG, con la capacidad de cambiar a VML y
<canvas> para versiones anteriores de navegadores. Se afirma que 72 de las 100 compañías más grandes del mundo usan esta biblioteca, lo que, de ser cierto, hace de esta biblioteca la solución de gráficos más popular para grandes compañías como Facebook y Twitter.
5. MetricsGraphics.js
MetricsGraphics.jsLa biblioteca
MetricsGraphics.js (aproximadamente 7,000 estrellas en GitHub) es una solución optimizada para la visualización de series temporales. Se distingue por su tamaño relativamente pequeño (80 Kb en forma reducida) y le brinda al desarrollador un conjunto pequeño pero atento de herramientas altamente especializadas, entre las que se encuentran herramientas para construir gráficos de líneas, diagramas de dispersión, histogramas, gráficos de barras y tablas de datos.
Aquí hay una galería interactiva de ejemplos de trabajo con esta biblioteca.
6. Recharts
RechartsLa biblioteca
Recharts , con casi 10,000 estrellas en GitHub, es una solución de gráficos basada en React y D3 que parece funcionar con componentes declarativos de React. La biblioteca brinda al desarrollador soporte para SVG. Su árbol de dependencias liviano (basado en submódulos D3) es altamente personalizable a través de las propiedades de los componentes.
Aquí puede encontrar ejemplos de su uso.
7. Raphaël
RaphaëlLa biblioteca "vector" de
Raphaël (alrededor de 10 mil estrellas en GitHub) está diseñada para trabajar con gráficos vectoriales en un entorno web. Ella, como tecnología básica para crear objetos gráficos, usa SVG y VML. Como resultado, los objetos gráficos también son objetos DOM a los que puede conectarse, utilizando JavaScript, controladores de eventos. La biblioteca actualmente admite navegadores como Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.
7. C3
Ejemplo de biblioteca C3La biblioteca
C3 (aproximadamente 8 mil estrellas en GitHub) se basa en D3, proporciona al desarrollador la capacidad de usar clases para todos sus elementos, lo que le permite definir sus propios estilos usando las clases y usar las capacidades de D3. Además, admite varias API y devoluciones de llamada para organizar la interacción interactiva con gráficos. Utilizándolos, puede actualizar los gráficos incluso después de que se muestren en la página.
Aquí hay ejemplos del uso de esta biblioteca.
8. React-Vis, React Virtualized, Victoria
Kit de componentes React-VisEl conjunto de componentes
React-Vis (alrededor de 4 mil estrellas en GitHub) fue desarrollado por Uber y está diseñado para organizar un sistema uniforme de visualización de datos en aplicaciones React. Esta solución admite la presentación de datos en varias formas, en particular, en forma de mapas de calor y diagramas de dispersión. Para trabajar con esta biblioteca no se requiere un conocimiento preliminar, digamos, con algo como D3. Proporciona al desarrollador bloques de construcción modulares de bajo nivel, como los ejes X / Y.
Reaccionar conjunto de componentes virtualizadosEl conjunto de componentes
virtualizados React (alrededor de 12 mil estrellas en GitHub) está diseñado para organizar la representación efectiva de grandes conjuntos de datos tabulares. React ES6 virtualizado, CommonJS y UMD están disponibles, el proyecto es compatible con Webpack 4. Si tiene la intención de utilizar este conjunto de componentes, preste atención a la sección
Dependencias en su documentación.
Colección de componentes de victoriaVictory es una colección de componentes React diseñados para visualizar datos con capacidades interactivas. El proyecto fue creado por Formidable Labs, reunió alrededor de 6 mil estrellas en GitHub. Victory usa las mismas API para las aplicaciones React regulares y el entorno React Native, lo que facilita el desarrollo de soluciones multiplataforma. Victory ofrece a los desarrolladores formas flexibles y hermosas de usar las capacidades de los componentes React para la visualización de datos.
9. CartoDB
Servicio CartoDBLa plataforma
Carto (aproximadamente 2 mil estrellas en GitHub) está diseñada para la visualización y análisis de geodatos. En esta plataforma, puede descargar geodatos (por ejemplo, en formatos Shapefiles o GeoJSON), visualizarlos, colocarlos en un mapa, diseñarlos usando CartoCSS, puede buscarlos usando SQL.
Hay video tutoriales sobre cómo trabajar con esta plataforma.
10. RAWGraphs
Gráficos RAWLa biblioteca
RAWGraphs con aproximadamente 5,000 estrellas en GitHub proporciona una herramienta que le permite asociar tablas que contienen datos con herramientas de visualización. RAWGraphs se basa en D3, permite a los desarrolladores crear su propia visualización de datos vectoriales. Funciona con datos tabulares en varios formatos y admite datos que simplemente se pueden copiar desde otras aplicaciones. Los resultados de RAWGraphs se presentan en formato SVG, se pueden editar utilizando las aplicaciones apropiadas o en páginas web sin cambios.
Aquí hay ejemplos del uso de esta biblioteca.
11. Metabase
MetabaseLa biblioteca
Metabase , que ha recopilado más de 11 mil estrellas en GitHub, ofrece una forma bastante rápida y fácil de crear paneles de control que contienen datos visualizados que no requieren conocimiento de SQL. Al mismo tiempo, la biblioteca tiene un modo SQL especial diseñado para analistas y para personas que están involucradas profesionalmente en el procesamiento de datos. Metabase le permite
segmentar datos mediante la creación de filtros o conjuntos de filtros, la biblioteca admite la creación de métricas, indicadores calculados a los que tiene que acceder con bastante frecuencia. Otras características de Metabase incluyen soporte para enviar datos a Slack y proporcionar la capacidad de trabajar con ellos en este entorno utilizando
MetaBot . Esta biblioteca, quizás, puede considerarse una excelente herramienta para visualizar datos dentro de las empresas, aunque debe tenerse en cuenta que para dominarla, tomará un poco de esfuerzo.
Biblioteca de bonificación: Taucharts
TauchartsLa biblioteca de visualización de datos Taucharts (aproximadamente 2 mil estrellas en GitHub) se basa en la biblioteca D3. Proporciona al desarrollador una interfaz declarativa para organizar rápidamente la conexión de campos de datos con propiedades visuales. Su arquitectura le permite crear gráficos en los que las variables se agrupan utilizando coordenadas X e Y (
gráficos de facetas ). Taucharts le permite ampliar el comportamiento de los gráficos con complementos adecuados para su reutilización.
Resumen
Analizamos las bibliotecas de JavaScript para visualizar datos que se pueden utilizar en el desarrollo de aplicaciones web. Teniendo en cuenta lo que hablamos sobre el papel de los datos en el mundo moderno, no es sorprendente que haya una gran cantidad de soluciones para la visualización de datos. Por lo tanto, aquí hay algunas bibliotecas más similares (al estudiarlas, preste atención al hecho de que algunas de ellas no se han actualizado durante mucho tiempo):
Estimados lectores! ¿Qué bibliotecas utiliza para visualizar datos en sus proyectos web?
