D3 es una abreviatura de Data-Driven Documents, y D3.js es una biblioteca JavaScript de recursos para administrar documentos basados en datos. D3 es uno de los marcos más efectivos para trabajar en la visualización de datos. Permite al desarrollador crear visualizaciones de datos dinámicas e interactivas en el navegador con la ayuda de HTML, CSS y SVG. La visualización de datos es la representación de datos filtrados en forma de imágenes y gráficos. Las representaciones gráficas o pictóricas presentan incluso conjuntos de datos complejos con facilidad. Además, los patrones o análisis comparativos se pueden rastrear fácilmente con la ayuda de la visualización de datos, lo que permite al cliente tomar decisiones sin mucha lluvia de ideas. Estas visualizaciones se pueden desarrollar fácilmente utilizando marcos como D3.js. Mike Bostock escribió el marco D3. Antes de D3, el kit de herramientas de Protovis fue ampliamente utilizado para visualizaciones de datos. Aunque hay muchos otros marcos para la visualización de datos, D3.js ha dejado su huella debido a su flexibilidad y capacidad de aprendizaje.
Configuración del entorno D3.js:
Paso 1: para hacer uso de D3.js para un sitio web o una página web, lo primero que debe tenerse en cuenta es su instalación o importación de la biblioteca en la página web. El D3 es una biblioteca de código abierto. El código fuente está disponible gratuitamente en el sitio web de D3.js. Descargue la última versión de la biblioteca (5.7.0 actualmente). Descargue la biblioteca D3 desde el enlace de origen.
Paso 2: Descomprima el archivo .zip obtenido después de completar la descarga. Localice el archivo d3.min.js, que es la versión mínima del código fuente de D3. Copie ese archivo e inclúyalo en la carpeta raíz o en el directorio de la biblioteca principal de la página web. En la página web, incluya el archivo d3.min.js como se muestra.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--Adding the source file of D3 here --> <script src="../d3.min.js"></script> </head> <body> <script> // Write your d3 code here </script> </body> </html>
Ejemplo: en este ejemplo, podemos ver que al usar el método d3.greatest(), podemos obtener el valor más grande de la secuencia de una array.
Nombre de archivo: index.js
Javascript
// Defining d3 contrib variable
var d3 = require('d3');
var gfg = d3.greatest([5, 4, 3, 2, 1])
console.log(gfg)
Producción:
5
ventajas:
- D3 admite estándares web como HTML, CSS, SVG, que son conocidos por todos los programadores, por lo que cualquiera puede usarlo fácilmente. En resumen, D3 expone las capacidades de los estándares web como HTML5, CSS3 y SVG.
- Es bastante ligero y flexible con el código que es reutilizable, por lo que es preferible.
- Brinda un control más amplio al usuario para administrar la visualización y los datos que las otras API o marcos disponibles.
- Al ser un marco de código abierto, uno puede manipular fácilmente el código fuente de D3 según sus necesidades.
Desventajas:
- D3 no es compatible con versiones anteriores de navegadores. En caso de que alguien desee visualizar los datos con compatibilidad hacia atrás, la visualización puede ser necesariamente estática, debido a la mala compatibilidad.
- La seguridad sigue siendo un desafío para D3. Los datos no se pueden ocultar o proteger fácilmente con D3.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA