DC.js: Introducción a D3.js

D3.js es una biblioteca de JavaScript que se utiliza para crear visualizaciones interactivas en el navegador. La biblioteca D3 nos permite manipular elementos de una página web en el contexto de un conjunto de datos. Estos elementos pueden ser elementos HTML, SVG o Canvas y se pueden introducir, eliminar o editar de acuerdo con el contenido del conjunto de datos. Es una biblioteca para manipular objetos DOM. D3.js puede ser una valiosa ayuda en la exploración de datos. Le da control sobre la representación de sus datos y le permite agregar interactividad a los datos.

D3.js es uno de los marcos principales en comparación con otras bibliotecas. Esto es porque; funciona en la web y visualizaciones de datos y es de nivel empresarial. Otra razón es su gran flexibilidad, que permite a los desarrolladores de todo el mundo crear muchos gráficos avanzados. Además, ha ampliado en gran medida su funcionalidad.

Entendamos los conceptos básicos de D3.js, que son los siguientes:

• Selections
• Unión de datos
• SVG
• Transition
• Animation
• API D3.js

Entendamos cada uno de estos conceptos en detalle.

Trozos escogidos

Las selecciones es uno de los conceptos centrales en D3.js. Se basa en el concepto de Selector de CSS. Aquellos que han usado y conocen JQuery ya pueden entender fácilmente las selecciones. Nos permite seleccionar el DOM en función de los selectores de CSS y luego proporcionar opciones para modificar o agregar y eliminar los elementos del DOM.

Unión de datos

La unión de datos es otro concepto importante en D3.js. Funciona junto con las selecciones y nos permite manipular el documento HTML con respecto a nuestro conjunto de datos (una serie de valores numéricos). De forma predeterminada, D3.js otorga al conjunto de datos la máxima prioridad en sus métodos y cada elemento del conjunto de datos corresponde a un elemento HTML.

SVG

SVG significa Scalable Vector Graphics. SVG es un formato de gráficos vectoriales basado en XML. Proporciona opciones para dibujar diferentes formas, como líneas, rectángulos, círculos, elipses, etc. Por lo tanto, diseñar visualizaciones con SVG le brinda más poder y flexibilidad.

Transformación

SVG ofrece opciones para transformar un único elemento de forma SVG o un grupo de elementos SVG. La transformación SVG admite traslación, escala, rotación y sesgo.

Transición

La transición es el proceso de cambiar de un estado a otro de un artículo. D3.js proporciona un método de transición () para realizar la transición en la página HTML.

Animación

D3.js admite la animación a través de la transición. La animación se puede hacer con el uso adecuado de la transición. Las transiciones son una forma limitada de animación de fotogramas clave con solo dos fotogramas clave:start y end. El fotograma clave inicial suele ser el estado actual del DOM, y el fotograma clave final es un conjunto de atributos, estilos y otras propiedades que especifique. Las transiciones son adecuadas para la transición a una nueva vista sin un código complicado que depende de la vista inicial.

API D3.js

Entendamos brevemente algunos de los métodos importantes de la API de D3.js.

API de colecciones

Una colección es simplemente un objeto que agrupa varios elementos en una sola unidad. También se le llama contenedor. Contiene objetos, mapas, conjuntos y nidos.

API de rutas

Los trazados se utilizan para dibujar rectángulos, círculos, elipses, polilíneas, polígonos, líneas rectas y curvas. Los Trazados SVG representan el contorno de una forma que se puede trazar, rellenar, utilizar como trazado de recorte o cualquier combinación de los tres.

API de Axis

D3.js proporciona funciones para dibujar ejes. Un eje está formado por líneas, marcas y etiquetas. Un eje usa escala, por lo que cada eje deberá tener una escala para trabajar.

API de zoom

El zoom ayuda a escalar su contenido. Puede enfocarse en una región en particular usando el enfoque de hacer clic y arrastrar.

API de valores separados por delimitadores

Un delimitador es una secuencia de uno o más caracteres que se usa para especificar el límite entre regiones separadas e independientes en texto sin formato u otros datos. Un delimitador de campo es una secuencia de valores separados por comas. En resumen, los valores separados por delimitadores son valores separados por comas (CSV) o valores separados por tabulaciones (TSV).