Hola, me llamo Luis y en esta ocasión les traigo este artículo.
D3.js
es una biblioteca de JavaScript para manipular documentos basados en datos y, en mi opinión, es la herramienta de visualización de datos número uno disponible. D3 puede crear gráficos hermosos, interactivos y accesibles.
Las posibilidades con D3 son infinitas. Sin embargo, D3 es conocido por una curva de aprendizaje empinada. Este artículo tiene como objetivo hacer que esa curva de aprendizaje sea un poco más superficial.
Como alguien que comenzó a programar (en Python) hace un par de meses, aprender D3 fue todo un desafío. No solo tuve que aprender una nueva biblioteca, sino que también tuve que aprender un nuevo lenguaje de programación.
Todavía no creo que haya dominado D3, ni mucho menos, pero está bien, porque lo único que importa es la visualización, no si entiendo las complejidades de la biblioteca D3 o no.
Este artículo está escrito para personas con (algo) de experiencia en programación, pero no asume ninguna experiencia previa en JavaScript.
Índice
Una explicación
D3.js
no es como ninguna otra biblioteca de visualización; no es como Plotly, donde arrojas los datos y te hace un diagrama. En D3, usted crea la trama poco a poco, usted es responsable de los detalles.
Esto puede sonar aterrador, pero es, de hecho, la mayor fortaleza de D3: te permite crear la trama exactamente como la imaginas. Sin embargo, es algo que debe tener en cuenta al usar D3.
Para usar la biblioteca D3 en JavaScript, primero debemos incluirla en nuestro archivo HTML. Y también tenemos que hacer un div
. Elemento del cuerpo donde debe tener lugar nuestra trama.
Ahora podemos crear nuestro archivo JavaScript y comenzar con la diversión del proceso.
En nuestro archivo JavaScript, lo primero que tenemos que hacer es definir las dimensiones y los márgenes de nuestra parcela.
Luego, tenemos que vincular una variable al div
que hicimos en nuestro HTML
. Podemos hacerlo seleccionándolo, también estamos definiendo las dimensiones y los márgenes del div
:
Entonces deberíamos leer nuestros datos. Lo hacemos usando d3.csv
(o d3.tsv
) esta función toma 2
argumentos; un enlace a nuestros datos y una función (que usa los datos del primer argumento). Para este ejemplo, usaremos un conjunto de datos, que encontré en galería-gráfica-d3
.
A partir de ahora, todo el código que mostraré es el código que debe ubicarse en la función dentro de d3.csv
. Para tener una idea de lo que está tratando, le recomendaría usar console.log(data)
y luego mirando en la consola en inspeccionar elemento.
Verá exactamente cómo se representan los datos que está utilizando.
Array (100) 0 x: "1", y: "0.03", CI_left: "0.008", CI_right: "0.1125" 1 x: "2", y: "0.04", CI_left: "0.008", CI_right: "0.15" 2 x: "3", y: "0.06", CI_left: "0.016", CI_right: "0.2" 3 x: "4", y: "0.09", CI_left: "0.032", CI_right: "0.2625" 4 x: "5", y: "0.13", CI_left: "0.048", CI_right: "0.3375" ...
Sus datos están representados en una matriz que contiene diccionarios (como se vio arriba, solo usaremos el x
y y
clave en este artículo). Las claves son las columnas y los valores son, bueno, los valores. Ahora que sabemos a qué nos enfrentamos, podemos empezar a hacer nuestra primera trama.
Primero, hay que definir los ejes. Podemos usar muchas funciones de D3 aquí, scaleLinear()
es el más utilizado y el que usaremos hoy. Crea una escala lineal. Para usar nuestra escala, tenemos que especificar el .domain()
y .range()
.
El dominio especifica el mínimo y máximo de los valores en nuestros datos, el rango especifica las coordenadas donde se ubicará el eje. Ambos toman una matriz de dos números.
Por ejemplo .domain([0, 100])
significa que 0
es el valor más pequeño que se muestra y 100
es el valor más grande que se muestra, y .range([0, width])
significa que la línea del eje abarca todo el ancho. Tenemos que especificar esto para ambos ejes.
Más tarde, podemos llamar a estos y tomará un valor y mostrará dónde pertenece ese punto de datos.
Sin embargo, los ejes aún no se muestran … Eso es porque no los hemos agregado a svg
. Todo lo que queremos que se muestre, debemos agregarlo a svg
. En este caso, tenemos que llamar a los ejes en una función d3; d3.axisBottom
y d3.axisLeft
.
¡Excelente! Ahora podemos ver los ejes.
Para crear una línea, tenemos que hacer cuatro cosas:
- Anexar un
path
alsvg
:svg.append("path")
; - Especifique qué datos se utilizarán:
.datum(data)
; - Realice cambios en los atributos:
.attr("fill", "none")
,.attr("stroke", "black")
, etc .; - Agrega un
d
-atributo, que determina la dirección de la línea. losd3.lines()
debe recibir unx
– y uny
-atributo. Toman una función, que debería devolver las columnas, que se introducen en las funciones de eje (porque devuelven el lugar donde deberían ubicarse los puntos).
Y ahí lo tienes, un diagrama lineal simple.
Conclusión
Este artículo establece los conceptos básicos del proceso de D3, todo lo que puede hacer después de esto es agregar más funciones o experimentar con diferentes tipos de parcelas.
Si entendió los pasos dados en este artículo, podrá comprender la mayoría del código D3. Básicamente, todo D3 es agregar más y más cosas svg
hasta que esté satisfecho.
El mejor consejo que puedo dar es mirar el trabajo de otras personas y trabajar a partir de eso. Agregue nuevas características a su trama buscando cómo y después de un tiempo lo dominará. Hay muchos recursos en línea que puede (o debe) usar.
Gracias por leer este artículo.
Añadir comentario