Header Ads Widget

Ticker

6/recent/ticker-posts

Introducción a la biblioteca de JavaScript D3

 

Esta introducción a la biblioteca de JavaScript D3 nos permitirá aprender sobre algunos efectos de visualización realmente interesantes disponibles para nosotros. D3 es una poderosa biblioteca de visualización basada en datos escrita en el siempre popular lenguaje JavaScript. Fue creado por Michael Bostock, Jeffrey Heer, Vadim Ogievetsky y una comunidad de desarrolladores de código abierto. Esto nos permite crear gráficos basados ​​en datos que utilizan estándares web comunes que pueden ser interpretados por cualquiera de los navegadores web modernos más populares. Esto le permite utilizar JavaScript para crear visualizaciones HTML y CSS, además de gráficos SVG o gráficos vectoriales escalables. D3 hace uso de convenciones familiares como los selectores CSS tradicionales y una sintaxis similar a jQueryEchemos un vistazo a cómo empezar a utilizar la biblioteca de JavaScript D3 ahora.


Formato de selector familiar

Al igual que en CSS y jQuery, tiene un formato de selector familiar para trabajar con datos en el DOM. Con jQuery, prefijamos las selecciones con el signo de dólar y luego el selector dentro del paréntesis algo como jQuery('.someclass')Con D3, reemplaza el signo de dólar con el prefijo d3. Aquí hay un par de ejemplos de cómo seleccionar uno o todos los elementos en una página y luego actualizar su html.


Cómo seleccionar un elemento y actualizar el HTML con D3

Introducción a la biblioteca de JavaScript D3


Cómo seleccionar varios elementos y actualizar el HTML con D3

Cómo seleccionar varios elementos con D3


Cadenas de funciones con D3

Al igual que con jQuery y Laravel para el caso, puede encadenar funciones utilizando el .operador de punto Como probablemente sepa, esta es una forma muy conveniente de combinar una lista secuencial de acciones para tomar en un elemento o instancia de datos, de una sola vez. Veamos un ejemplo de lo que estamos hablando con D3.


Cómo hacer un círculo con D3 JS

Cómo hacer un círculo con D3 JS

¡Muy genial! Con solo un pequeño fragmento de secuencia de comandos, podemos seleccionar un elemento DOM, agregarle un SVG y luego dibujar un círculo y hacerlo azul usando una secuencia de comandos encadenados. Esta es la idea muy básica de cómo funciona D3. Notarás que podemos usar CSS básico para diseñar los elementos que creamos con D3. Se puede diseñar cualquier elemento SVG con JavaScript y D3 o cualquier hoja de estilo CSS que desee utilizar. Simplemente puede elegir lo que tenga sentido para usted cuando esté creando sus gráficos.


Manejo de datos con D3

D3 tiene un motor de análisis integrado para poder analizar datos de varios formatos de datos como archivos json, texto, html, tsv y csv. Además de poder manejar el análisis de sus datos, D3 también proporciona un mecanismo para el enlace de datos. Esto podría suceder usando algo como una llamada a la interfaz json a través de una URL y luego completando una función de devolución de llamada para procesar los datos resultantes. Echaremos un vistazo a ambos ejemplos de cómo hacer esto en episodios posteriores de D3.


Interactividad con D3

La biblioteca D3 también proporciona formas de habilitar la interacción avanzada con los gráficos de la página. Un motor de física integrado también es parte de D3 y puede dar cuenta de cosas como la fricción, los efectos de rebote, los gráficos impulsados ​​por la fuerza y ​​la gravedad. Más allá de esto, D3 tiene un sistema de eventos muy parecido a jQuery y JavaScript para proporcionar un comportamiento de clic y arrastre, así como varios comportamientos táctiles.


La estructura de la API D3

D3 tiene cientos de funciones y sería difícil memorizarlas todas. Sin embargo, podemos agruparlos en categorías relacionadas como tal.

  • Trozos escogidos
  • Matrices
  • Transiciones
  • Color
  • Matemáticas
  • Hora
  • SVG
  • Escamas
  • Diseños
  • Geografía
  • Geometría
  • Comportamientos

Introducción a la conclusión de la biblioteca de JavaScript D3

En este tutorial, echamos un vistazo al marco de JavaScript D3 que nos permite crear gráficos SVG basados ​​en datos en nuestras aplicaciones web. D3 es muy poderoso y hay mucho que aprender, por lo que dividiremos esto en varios tutoriales que cubren los diversos aspectos del marco. D3 también es muy popular y es uno de los repositorios más destacados en el popular sitio de codificación social Github.



Publicar un comentario

0 Comentarios