D3.js - Conceptos

D3.js es una biblioteca JavaScript de código abierto para:

Manipulación basada en datos del Modelo de objetos de documento (DOM).
Trabajar con datos y formas.
Diseño de elementos visuales para datos lineales, jerárquicos, de red y geográficos.
Habilitación de transiciones suaves entre los estados de la interfaz de usuario (UI).
Permitiendo la interacción efectiva del usuario.

Estándares web

Antes de que podamos comenzar a usar D3.js para crear visualizaciones, debemos familiarizarnos con los estándares web. Los siguientes estándares web se utilizan mucho en D3.js.

Lenguaje de marcado de hipertexto (HTML)
Modelo de objetos de documento (DOM)
Hojas de estilo en cascada (CSS)
Gráficos vectoriales escalables (SVG)
JavaScript

Repasemos cada uno de estos estándares web uno por uno en detalle.

Lenguaje de marcado de hipertexto (HTML)

Como sabemos, HTML se utiliza para estructurar el contenido de la página web. Se almacena en un archivo de texto con la extensión ".html".

Example - Un ejemplo típico de HTML básico se ve así

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

Modelo de objetos de documento (DOM)

Cuando un navegador carga una página HTML, se convierte en una estructura jerárquica. Cada etiqueta en HTML se convierte en un elemento / objeto en el DOM con una jerarquía padre-hijo. Hace que nuestro HTML esté más estructurado lógicamente. Una vez que se forma el DOM, resulta más fácil manipular (agregar / modificar / eliminar) los elementos de la página.

Entendamos el DOM usando el siguiente documento HTML:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

El modelo de objeto de documento del documento HTML anterior es el siguiente,

Hojas de estilo en cascada (CSS)

Mientras que HTML proporciona una estructura a la página web, los estilos CSS hacen que la página web sea más agradable de ver. CSS es unStyle Sheet Languagese utiliza para describir la presentación de un documento escrito en HTML o XML (incluidos dialectos XML como SVG o XHTML). CSS describe cómo se deben representar los elementos en una página web.

Gráficos vectoriales escalables (SVG)

SVG es una forma de representar imágenes en la página web. SVG no es una imagen directa, es solo una forma de crear imágenes usando texto. Como sugiere su nombre, es unScalable Vector. Se escala a sí mismo de acuerdo con el tamaño del navegador, por lo que cambiar el tamaño de su navegador no distorsionará la imagen. Todos los navegadores admiten SVG, excepto IE 8 y versiones anteriores. Las visualizaciones de datos son representaciones visuales y es conveniente usar SVG para renderizar visualizaciones usando D3.js.

Piense en SVG como un lienzo en el que podemos pintar diferentes formas. Entonces, para empezar, creemos una etiqueta SVG:

<svg width = "500" height = "500"></<svg>

La medida predeterminada para SVG son los píxeles, por lo que no necesitamos especificar si nuestra unidad es el píxel. Ahora, si queremos dibujar un rectángulo, podemos dibujarlo usando el siguiente código:

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

Podemos dibujar otras formas en SVG como - Línea, Círculo, Elipse, Texto y Ruta.

Al igual que diseñar elementos HTML, diseñar elementos SVG es simple. Establezcamos el color de fondo del rectángulo en amarillo. Para eso, necesitamos agregar un atributo "relleno" y especificar el valor en amarillo como se muestra a continuación:

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript es un lenguaje de secuencias de comandos del lado del cliente de tipo flexible que se ejecuta en el navegador del usuario. JavaScript interactúa con elementos HTML (elementos DOM) para que la interfaz de usuario web sea interactiva. JavaScript implementa elECMAScript Standards, que incluye funciones principales basadas en las especificaciones ECMA-262, así como otras funciones que no se basan en los estándares ECMAScript. El conocimiento de JavaScript es un requisito previo para D3.js.

↰ Previous page Next page ↱