3 D3JS I

Introducción a D3.js

• D3.js es una librería de JavaScript que ofrece flexibilidad para diseñar visualizaciones detalladas.
• Los temas siguientes se centran exclusivamente en D3.

Objetivos de D3.js

• Permite diseñar gráficos con detalle.
• Usa JavaScript como lenguaje de programación.
• Aborda conceptos avanzados no comunes en la programación HTML.
• Facilita la creación de visualizaciones sin ser un diseñador experto.
• Permite basarse en ejemplos de GitHub y modificarlos.
• El objetivo del curso es capacitar al estudiante para diseñar e implementar visualizaciones desde cero o modificando existentes.
• Se introducen los conceptos básicos al inicio, para luego profundizar en temas posteriores.

Definición

• D3.js (Data-Driven Documents) es una librería JavaScript para crear y controlar gráficas dinámicas e interactivas en navegadores usando datos digitales.
• Permite un gran control sobre el resultado visual final, diferenciándose de otras librerías.
• Es compatible con estándares gráficos SVG (Scalable Vector Graphics), JavaScript, HTML5 y CSS3 (Cascading Style Sheets) y es compatible con W3C.

Conceptos importantes de D3.js

• Data driven documents: Permite reutilizar visualizaciones existentes, adaptando datos.
• Documentos orientados a datos: Permite adaptar datos o cambiar la forma en que D3 los lee, teniendo control absoluto sobre la visualización.
• Scalable Vector Graphics (SVG): Permite que las visualizaciones se adapten a diferentes resoluciones en pantallas de diversos tamaños.
• Compatible con estándares: Funciona en varios exploradores y dispositivos debido a su compatibilidad con JavaScript , HTML5 y CSS3(Cascading Style Sheets CSS3).

Funcionalidades de D3.js

• Loading: Carga información en la memoria del explorador.
• Binding: Vincula datos y objetos HTML, añadiendo información a elementos HTML existentes.
• Transforming: Transforma el código HTML basándose en los datos.
• Transitioning: Reacciona y da respuestas a la entrada del usuario diferentes.

Instalación de D3.js

• No requiere instalación de software, es de código abierto.
• Se puede acceder a la librería en su página web.

Formas de usar la librería JavaScript de D3 desde el código fuente

• Incluir la librería D3 desde el ordenador: Descargar d3.zip desde d3js.org, descomprimir y ubicar la librería en el directorio local.
• Incluir la librería D3 desde CDN (Content Delivery Network): se enlaza a la última versión de la librería usando un código específico.
• En los ejemplos, se usará la versión ofrecida en la web oficial: http://d3js.org/d3.v3.min.js

Elementos Básicos de D3.js y Generación de Elementos HTML

• D3 es capaz de transformar el código HTML y vincular datos con objetos HTML.
• Ejemplo para crear un objeto HTML y añadirle texto usando D3.
• La sintaxis de D3 sigue el concepto de encadenamiento o chaining.
• La sintaxis se trata de concatenar varias funciones una seguida de otra.

Sentencia HTML en D3.js

• Select: Selecciona el elemento body del HTML.
• Append: Indica añadir un elemento HTML, especificando su tipo.
• Text: Define el contenido de texto que se añadirá.

Modificar Elementos HTML y Atributos

• D3 permite añadir texto y modificar elementos y atributos HTML.

Añadir un atributo

• Se añade un atributo a un elemento p llamado descr y se imprime el valor.

Uso de Estilos

• Se hace a través de la función style.
• Se puede cambiar el tamaño de la fuente.
• Permite asignar un valor dinámico a variables u otros datos.
• Permite crear dinámicamente objetos HTML

Modificar varios elementos HTML

• Se puede modificar varios elementos al mismo tiempo.
• La hoja de estilo a utilizar está definida en styles.css.
• La clase red y la clase box están definidas de una forma determinada.
• Para iterar sobre cada elemento y hacer algo diferente, se utiliza un código específico.
• La función iterará sobre los diferentes elementos.
• d es el elemento div referenciado dentro de la función como this.

Sub elementos

• Se puede trabajar con sub elementos.
• Se puede seleccionar un sub elemento dentro de otro elemento.

Métodos para seleccionar un sub elemento

• identificador > elemento html
• doble select.

Ventajas de D3.js

• Es una librería JavaScript y puede ser usada con cualquier marco JS.
• Se centra en los datos, por lo cual es apropiada y especializada para la visualización de datos.
• Es de código abierto, te permite trabajar con el código fuente y añadir tus propias características.
• Funciona con estándares web, por lo que no se necesita ninguna otra tecnología, solo un navegador.
• Trabaja con estándares web como HTML, CSS y SVG, no se requiere ninguna nueva herramienta.
• Proporciona un control total sobre la visualización, dando una ventaja por sobre herramientas populares, como Tableau o QlivView.
• Es ligero y funciona directamente con los estándares web, es extremadamente rápido y funciona bien con grandes conjuntos de datos.
• Es una potente librería y una gran flexibilidad, casi sin limites.