d3 js api functions tutorial with examples
Este tutorial explica varias funciones de la API de D3.js para agregar características como enlace de datos, unión, carga y análisis de datos, interpolación, etc.
D3.js es una biblioteca de visualización de datos JavaScript de código abierto que se compone de varias funciones de API que agrega características interesantes como enlace de datos, unión, carga y análisis de datos externos en formato CSV, XML y JSON, manipulación de números aleatorios, interpolación y texto. formateo e internacionalización junto con diversas funciones como animación, transición y formación de gráficos para visualización de datos.
mejores programas para recuperar archivos borrados
Puede consultar nuestros tutoriales anteriores sobre este serie d3 para conocer más sobre sus características, beneficios y requisitos previos.
Lo que vas a aprender:
Enlace de datos con D3.js
Para crear visualización de datos, como cuadros y gráficos, es necesario vincular o unir datos con un elemento DOM.
Los datos pueden ser una matriz que es un contenedor que contiene valores numéricos del mismo tipo, como se muestra a continuación.
|_+_|El primer paso será crear un objeto SVG, con el fin de tener un plano o un marco para construir la visualización de datos de datos externos, se selecciona el elemento HTML con d3.select () y se agrega SVG que actúa como lienzo agregando atributos. como el ancho y la altura del lienzo.
|_+_|El siguiente paso es la inserción del elemento SVG 'g' que actúa como un grupo que contiene otros elementos SVG.
|_+_|Además, enlaza o une datos a esta forma SVG adjunta con el lienzo, usando la función .data (datos).
|_+_|El siguiente paso es vincular datos a los elementos DOM utilizando el método .enter () a la función .data (datos).
|_+_|Además, agregue la forma SVG para que podamos adjuntar la forma al lienzo.
|_+_|A continuación se ofrece un ejemplo de vinculación de datos.
|_+_|Para unir datos, que en nuestro caso, es una densidad de población de continente
var infoset = [59.5, 17.2, 9.6, 7.6, 5.5, 0.5]
La pantalla variable se asigna a un área de dibujo adjuntando la forma SVG al elemento html, que es el cuerpo en nuestro caso.
El intervalo de escala variable toma la función scaleLinear () con parámetros de dominio y rango para trazar un gráfico para mostrar valores en la escala en un formato gráfico.
.data (infoset) .enter () ayudará a vincular nuestro conjunto de datos asignado a un Infoset variable.
El texto se agrega para trazar los valores contra los rectángulos de diferentes longitudes correspondientes a sus valores en el conjunto de datos.
Unir, cargar y analizar datos en D3.js
D3.js puede cargar datos externos o localmente en variables de diferentes tipos de archivos y vincular estos datos a elementos DOM.
Los diferentes formatos de datos son CSV, JSON, TSV y XML, mientras que d3.csv (), d3.JSON (), d3.tsv () y d3.xml () son los métodos respectivos proporcionados para cargar archivos de datos en diferentes formatos de fuentes externas enviando una solicitud http a la URL especificada para cargar archivos o datos de los formatos respectivos, así como ejecutar la función de devolución de llamada con los respectivos objetos de datos analizados.
La sintaxis para cargar el archivo de datos CSV es la siguiente.
|_+_|#1) La URL del primer parámetro anterior es la URL o la ruta del servidor del archivo csv, que es un archivo externo que debe cargar la función d3.csv. en nuestro caso, es
http: // localhost: 8080 / examples / movie_published.csv
#2) El segundo parámetro es opcional
#3) El tercer parámetro es Callback, que es una función que puede ser pasada como argumento por otra función, asegurándose de que el código específico se ejecute hasta que otro código haya terminado de ejecutarse para los formatos JSON, TSV y XML del archivo, la función d3.csv es reemplazado con d3.json, d3.tsv y d3.xml respectivamente.
A continuación, se ofrece un ejemplo para analizar datos externos.
|_+_|Si se abre en el navegador Google Chrome, haga clic en F12 y la actualización de la página mostrará el registro de la consola del código que en nuestro caso es console.log (datos), que mostrará los valores del conjunto de datos, con encabezados de columna, movie_name y year. se mostrará desde el archivo CSV guardado en la ubicación del servidor.
Manipulación de números aleatorios en D3.js
d3: los métodos de API aleatorios devuelven números aleatorios de varias distribuciones de probabilidad, que es una función matemática que calcula las posibilidades de que ocurran diferentes resultados posibles.
Estas funciones utilizan principalmente Math. función aleatoria de JavaScript que produce números que se encuentran entre el número mínimo y máximo del rango especificado, da como resultado un número único cada vez que Math. se ejecuta la función aleatoria.
- d3.randomUniform - Generar números aleatorios a partir de una distribución uniforme. P.ej. d3.randomUniform (1, 2) (): devolverá números aleatorios que incluyen 1 y menos de 2.
- d3.randomNormal - Generar números aleatorios a partir de una distribución normal, P.ej. d3.randomNormal (1, 2) (): devolverá un número entero que se encuentra entre un valor mínimo especificado y valores máximos.
- d3.randomLogNormal - Genere números aleatorios a partir de una distribución logarítmica normal, y el valor esperado será el valor del logaritmo natural para la variable aleatoria.
- d3.randomBates - Generar números aleatorios a partir de una distribución de Bates, con variables independientes.
- d3.randomIrwinHall - Genere números aleatorios a partir de una distribución de Irwin-Hall.
- d3.randomExponential - Generar números aleatorios a partir de una distribución exponencial.
Ejemplo de funciones aleatorias en d3
|_+_|Interpolación en D3.js
Los métodos API aplicados para interpolar entre dos valores aleatorios dependerán del tipo de valor final b, la sintaxis general es d3.interpolar (a, b). A continuación se muestra una tabla que enumera los tipos de datos del valor final b, y el método o función correspondiente que cambiará según el tipo de datos.
Tipo de valor final b | Nombre del método utilizado |
---|---|
Si b es una matriz genérica | interpolateArray ( ) |
Si b es booleano, nulo o indefinido | Se utilizará la constante b |
Si b es un número | interpolateNumber ( ) |
Si b es un color o una cadena que se refiere al color | interpolateRgb( ) |
Si b es una cita | interpolateDate( ) |
Si b es una cadena | interpolateString () |
Si b es una matriz de números escrita | interpolateNumberArray( ) |
Si b se refiere al número | interpolateNumber ( ) |
De lo contrario | interpolateObject ( ) |
El siguiente ejemplo explica:
- Función d3.interpolateNumber () con 10 como valor inicial y valor final como 20, los valores mostrados van desde el valor inicial 10 hasta el valor final 20 para parámetros de interpolación desde (0.0) a (0.5) hasta (1.0)
- Función d3.interpolateRgb () para dos nombres de colores diferentes que dan como resultado valores rgb ('r', 'g', 'b') correspondientes, para interpolar parámetros de (0.0) a (0.5) hasta (1.0)
- La función d3.interpolateDate () para dos fechas diferentes en el formato 'aaaa-mm-dd hh: mm: ss', mostrará fechas entre el rango de fechas anterior, para interpolar parámetros de (0.0) a (1.0)
A continuación se ofrece un ejemplo de interpolación de números, colores y fechas entre el rango.
|_+_|Formato de texto e internacionalización con D3.js
El formato de texto y la localización se pueden lograr en D3.js con formato de número, formato de fecha y funciones de configuración regional como se explica a continuación con ejemplos.
D3 - local ()
d3.locale (definición), devolverá la configuración regional específica a la definición, de forma predeterminada, la definición de la configuración regional es el inglés de EE. UU. para d3.locale (definición),
consultas sql para practicar con respuestas
Las propiedades para el formato de números para la definición de configuración regional se enumeran a continuación.
- decimal: El punto decimal generalmente se aplica en monedas como 25,75 ( P.ej. “.”).
- miles: Mil es un identificador o un separador que se usa como una coma después de mil valores como 2,475 ( P.ej. “,”).
- agrupamiento: Grupo de Array para cada grupo y el tamaño se puede verificar usando Arrayname [5], donde 5 es un índice y el tamaño de la matriz es 6 miembros.
- divisa: Prefijo y sufijo para las cadenas de moneda ( P.ej. [“$”, “”]).
- dateTime: El formato de fecha y hora (% c) tendrá fecha y hora ( P.ej. “%a %b %e %X %Y”).
- fecha: La fecha (% x) ( P.ej. “% M /% d /% Y”) cadena de formato en Mes Día y Año.
- hora: El tiempo (% X) ( P.ej. '% H:% M:% S') cadena de formato en horas, minutos y segundos.
- periodos: La madrugada del local y P.M. equivalentes ( P.ej. ['AM PM']).
- dias: Días de la semana, comenzando por el domingo, en alfabetos.
- shortDays: Días cortos o nombres abreviados como SUN, MON, etc. de los días de la semana, comenzando por el domingo.
- meses: Los nombres completos del mes son octubre (a partir de enero).
- meses cortos: Meses cortos o nombres abreviados como JAN, FEB, MAR, etc. de los meses (a partir de enero).
Todos los parámetros explicados anteriormente se muestran como variables con sus respectivos valores en la siguiente imagen.
D3.format
d3.format de la biblioteca JavaScript toma un número como argumento de entrada, la sintaxis es d3.format (especificador), para transformar números, se usa d3.format.
A continuación se ofrece un ejemplo de aplicación de formato basado en d3.
|_+_|Modificar con formatos de fecha con D3.js
Formateo de hora usando la biblioteca D3.js, donde d3.timeParse se puede aplicar con caracteres comodín, es decir, expresión regular que ayuda a convertir el formato de hora de entrada al formato deseado.
A continuación se ofrece un ejemplo del formato relacionado con la fecha y la hora.
|_+_|Conclusión
En este tutorial, hemos cubierto todos los métodos esenciales restantes de D3.js, como el enlace de datos, donde los datos en forma de matriz y se unen, cargan y analizan los datos están en formato CSV, JSON y XML.
También discutimos la manipulación usando números aleatorios y el método de interpolación para visualizar grupos de datos en tablas o gráficos, y formatear el texto y la localización usando los métodos d3.locale para números, fecha, hora y diferentes monedas locales.
Lectura recomendada
- Tutorial de inyección de JavaScript: prueba y prevención de ataques de inyección de JS en un sitio web
- TOP 45 preguntas de entrevistas de JavaScript con respuestas detalladas
- Las 10 mejores herramientas de prueba de API en 2021 (herramientas de prueba de API SOAP y REST)
- Tutorial de pruebas de API: una guía completa para principiantes
- Códigos de respuesta de API de descanso y tipos de solicitudes de descanso
- Prueba de API REST con pepino utilizando el enfoque BDD
- Tutorial de la API de descanso: arquitectura y restricciones de la API de REST
- Las 10 mejores herramientas de administración de API con comparación de funciones
- Las 20 preguntas y respuestas más importantes de la entrevista de pruebas de API