Ingeniero en RisingStack, interesado en JS, Golang,. NET Core.
recientemente, tuvimos el placer de participar en un proyecto de aprendizaje automático que involucra bibliotecas como React y D3.js. Entre muchas tareas, desarrollé algunos gráficos que ayudan a procesar el resultado de modelos de ML como Naive Bayes en forma de un gráfico de líneas o un gráfico de barras agrupadas.,
En este artículo, me gustaría presentar mi progreso con D3.js hasta ahora y mostrar el uso básico de la biblioteca a través del ejemplo simple de un gráfico de barras.
después de leer este artículo, aprenderás a crear D3.js gráficos como esto:
El código fuente completo está disponible aquí.
en RisingStack también somos aficionados al ecosistema JavaScript, el backend y el desarrollo front-end. Personalmente, estoy interesado en ambos., En el backend, puedo ver a través de la lógica de negocio subyacente de una aplicación, mientras que también tengo la oportunidad de crear cosas de aspecto impresionante en el front-end. Ahí es donde D3.¡js entra en escena!
Actualización: 2da parte de mi d3.la serie de tutoriales js también está disponible: construyendo un D3.JS Calendar Heatmap (para visualizar los datos de uso de StackOverflow)
Qué es D3.js?
D3.js es una biblioteca JavaScript basada en datos para manipular elementos DOM.
» D3 le ayuda a dar vida a los datos utilizando HTML, SVG y CSS., El énfasis de D3 en los estándares web le brinda todas las capacidades de los navegadores modernos sin atarse a un marco propietario, combinando potentes componentes de visualización y un enfoque basado en datos para la manipulación del DOM.»- d3js.org
¿por Qué crear gráficos con D3.¿js en primer lugar? ¿Por qué no mostrar una imagen?
bueno, los gráficos se basan en información procedente de recursos de terceros que requiere visualización dinámica durante el tiempo de renderizado. Además, SVG es una herramienta muy poderosa que se adapta bien a este caso de aplicación.,
tomemos un desvío para ver qué beneficios podemos obtener del uso de SVG.
los beneficios de SVG
SVG significa gráficos vectoriales escalables, que técnicamente es un lenguaje de marcado basado en XML.
se usa comúnmente para dibujar gráficos vectoriales, especificar líneas y formas o modificar imágenes existentes. Puede encontrar la lista de elementos disponibles aquí.
Pros:
- compatible con todos los navegadores principales;
- tiene interfaz DOM, no requiere lib de terceros;
- escalable, puede mantener alta resolución;
- tamaño reducido en comparación con otros formatos de imagen.,
contras:
- solo puede mostrar imágenes bidimensionales;
- curva de aprendizaje larga;
- El renderizado puede tardar mucho tiempo con operaciones de cálculo intensivo.
a pesar de sus desventajas, SVG es una gran herramienta para mostrar iconos, logotipos, ilustraciones o, en este caso, gráficos.
primeros pasos con D3.JS
elegí gráfico de barras para comenzar porque representa un elemento visual de baja complejidad mientras enseña la aplicación básica de D3.js en sí. Esto no debería engañarte, D3 proporciona un gran conjunto de herramientas para visualizar datos., Echa un vistazo a su página de github para algunos casos de uso realmente agradables!
un gráfico de barras puede ser horizontal o vertical en función de su orientación. Voy a ir con el vertical aka gráfico de columnas.
en este diagrama, voy a mostrar los 10 lenguajes de programación más queridos basados en el resultado de la Encuesta de desarrolladores de Stack Overflow de 2018.
¡es hora de dibujar!
SVG tiene un sistema de coordenadas que comienza desde la esquina superior izquierda (0;0). El eje X positivo va a la derecha, mientras que el eje y positivo se dirige a la parte inferior., Por lo tanto, la altura del SVG debe tenerse en cuenta cuando se trata de calcular la coordenada y de un elemento.
Eso es suficiente verificación de antecedentes, vamos a escribir un poco de código!
Quiero crear un gráfico con 1000 píxeles de ancho y 600 píxeles de alto.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>En el fragmento de código anterior, puedo seleccionar el creado <svg> elemento en el archivo HTML con d3 select. Este método de selección acepta todo tipo de cadenas selectoras y devuelve el primer elemento coincidente., Use selectAll si desea obtener todos ellos.
también defino un valor de margen que le da un poco de relleno adicional al gráfico. El relleno se puede aplicar con un elemento <g> traducido por el valor deseado. A partir de Ahora, me baso en este grupo para mantener una distancia saludable de cualquier otro contenido de la página.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);agregar atributos a un elemento es tan fácil como llamar al método attr. El primer parámetro del método toma un atributo que quiero aplicar al elemento DOM seleccionado., El segundo parámetro es el valor o una función de devolución de llamada que devuelve el valor de la misma. El código anterior simplemente mueve el inicio del gráfico a la posición (60;60) del SVG.
compatible con D3.formatos de entrada js
para comenzar a dibujar, necesito definir la fuente de datos desde la que estoy trabajando. Para este tutorial, utilizo una matriz JavaScript simple que contiene objetos con el nombre de los idiomas y sus tasas de porcentaje, pero es importante mencionar que D3.js soporta múltiples formatos de datos.
la biblioteca tiene funcionalidad incorporada para cargar desde XMLHttpRequest, .archivos csv, archivos de texto, etc., Cada una de estas fuentes puede contener datos que D3.js puede utilizar, lo único importante es construir una matriz a partir de ellos. Tenga en cuenta que, a partir de la versión 5.0, La biblioteca utiliza promesas en lugar de devoluciones de llamada para cargar datos, que es un cambio no compatible con versiones anteriores.
escala, ejes
continuemos con los ejes del gráfico. Para dibujar el eje y, necesito establecer el límite de valor más bajo y más alto que en este caso son 0 y 100.
estoy trabajando con porcentajes en este tutorial, pero hay funciones de utilidad para tipos de datos que no sean números que explicaré más adelante.,
Tengo que dividir la altura del gráfico entre estos dos valores en partes iguales. Para esto, creo algo que se llama función de escalado.
const yScale = d3.scaleLinear() .range() .domain(); La escala lineal es el tipo de escala más conocido. Convierte un dominio de entrada continua en un rango de salida continua. Observe el range y domain método. El primero toma la longitud que debe dividirse entre los límites de los valores de dominio.,
recuerde, el sistema de coordenadas SVG comienza desde la esquina superior izquierda, por eso el rango toma la altura como primer parámetro y no cero.
crear un eje a la izquierda es tan simple como agregar otro grupo y llamar al método axisLeft de D3 con la función de escala como parámetro.
chart.append('g') .call(d3.axisLeft(yScale));ahora, continúe con el eje X.
tenga en cuenta que uso scaleBand para el eje x que ayuda a dividir el rango en bandas y calcular las coordenadas y anchos de las barras con relleno adicional.
D3.,js también es capaz de manejar el tipo de fecha entre muchos otros. scaleTime es muy similar a scaleLinear excepto que el dominio es aquí una matriz de fechas.
dibujar barras en D3.JS
piensa en qué tipo de entrada necesitamos para dibujar las barras. Cada uno de ellos representa un valor que se ilustra con formas simples, específicamente rectángulos. En el siguiente fragmento de código, los añado al elemento group creado.
primero, IselectAll elementos en el gráfico que regresa con un conjunto de resultados vacío., Luego, la función data indica con cuántos elementos se debe actualizar el DOM en función de la longitud del array. enter identifica los elementos que faltan si la entrada de datos es más larga que la selección. Esto devuelve una nueva selección que representa los elementos que deben agregarse. Por lo general, esto es seguido por un append que agrega elementos al DOM.
básicamente, le digo A D3.JS para añadir un rectángulo para cada miembro de la matriz.
ahora, esto solo agrega rectángulos uno encima del otro que no tienen altura o anchura., Estos dos atributos tienen que ser calculados y ahí es donde las funciones de escalado vuelven a ser útiles.
vea, agrego las coordenadas de los rectángulos con la llamada attr. El segundo parámetro puede ser una devolución de llamada que toma 3 parámetros: el miembro real de los datos de entrada, el índice de los mismos y toda la entrada.
.attr(’x’, (actual, index, array) => xScale(actual.value))la función de escalado devuelve la coordenada para un valor de dominio dado. Calcular las coordenadas es pan comido, el truco está con la altura de la barra., La coordenada y calculada tiene que restarse de la altura del gráfico para obtener la representación correcta del valor como una columna.
defino el ancho de los rectángulos con la función de escalado también. scaleBandtiene una función bandwidth que devuelve el ancho calculado para un elemento basado en el relleno de conjunto.
Buen trabajo, pero no tan elegante, ¿verdad?
para evitar que nuestra audiencia de sangrado de los ojos, vamos a añadir un poco de información y mejorar las imágenes!, 😉
consejos para hacer gráficos de barras
Hay algunas reglas básicas con gráficos de barras que vale la pena mencionar.
- evite usar efectos 3D;
- Ordene los puntos de datos de forma intuitiva, alfabética o ordenada;
- mantenga la distancia entre las bandas;
- comience el eje y en 0 y no con el valor más bajo;
- Use colores consistentes;
- agregue etiquetas de eje, título, línea de origen.
D3.JS Grid System
quiero resaltar los valores agregando líneas de cuadrícula en el fondo.,
adelante, experimente con líneas verticales y horizontales, pero mi consejo es mostrar solo una de ellas. Las líneas excesivas pueden distraer. Este fragmento de código presenta cómo agregar ambas soluciones.
prefiero las líneas de cuadrícula verticales en este caso porque conducen los ojos y mantienen la imagen general simple y simple.
etiquetas en D3.js
También quiero hacer que el diagrama sea más completo agregando alguna guía textual. Vamos a dar un nombre al gráfico y añadir etiquetas para los ejes.,
Los textos son elementos SVG que pueden añadirse al SVG o a los grupos. Se pueden posicionar con coordenadas x e y mientras que la alineación del texto se realiza con el atributo text-anchor. Para agregar la etiqueta en sí, simplemente llame al método text en el elemento text.
interactividad con D3.js
tenemos un gráfico bastante informativo, pero aún así, hay posibilidades de hacerlo interactivo también.
en el siguiente bloque de código te muestro cómo agregar oyentes de eventos a elementos SVG.,
tenga en cuenta que uso expresión de función en lugar de una función de flecha porque acceso al elemento a través de this palabra clave.
establezco la opacidad del elemento SVG seleccionado a la mitad del valor original al pasar el ratón por encima y lo restablezco cuando el cursor ABANDONA el área.
También puede obtener las coordenadas del ratón con d3.mouse. Devuelve una matriz con las coordenadas x e Y. De esta manera, mostrar una información sobre herramientas en la punta del cursor no sería ningún problema.
crear diagramas llamativos no es una forma de arte fácil.,
uno podría requerir la sabiduría de diseñadores gráficos, investigadores de experiencia de usuario y otras criaturas poderosas. En el siguiente ejemplo voy a mostrar algunas posibilidades para aumentar su gráfico!
Tengo valores muy similares mostrados en el gráfico, por lo que para resaltar las divergencias entre los valores de la barra, configuré un detector de eventos para el evento mouseenter. Cada vez que el usuario pasa el cursor sobre una columna a específica, se dibuja una línea horizontal en la parte superior de esa barra. Además, también calculo las diferencias en comparación con las otras bandas y lo muestro en las barras.,
Bastante limpio, ¿eh? También agregué el ejemplo de opacidad a este y aumenté el ancho de la barra.
el método transition indica que quiero animar los cambios en el DOM. Su intervalo se establece con la función duration que toma milisegundos como argumentos. Esta transición de arriba se desvanece el color de la banda y ampliar el ancho de la barra.
para dibujar una línea SVG, necesito un punto de inicio y un punto de destino., Esto puede ser configurado a través de la etiqueta x1, y1 y x2, y2 coordenadas. La línea no será visible hasta que establezca el color de la misma con el atributo stroke.
solo revelé parte del evento mouseenter aquí, así que ten en cuenta que tienes que revertir o eliminar los cambios en el evento mouseout. El código fuente completo está disponible al final del artículo.
¡vamos a añadir un poco de estilo al Gráfico!,
vamos a ver lo que hemos logrado hasta ahora y cómo podemos sacudir este gráfico con un poco de estilo. Puede agregar atributos de clase a elementos SVG con la misma función attr que usamos antes.
el diagrama tiene un buen conjunto de funcionalidades. En lugar de una imagen aburrida y estática, también revela las divergencias entre los valores representados en el mouse hover. El título pone el gráfico en contexto y las etiquetas ayudan a identificar los ejes con la unidad de medida. También agrego una nueva etiqueta en la esquina inferior derecha para marcar la fuente de entrada.,
lo único que queda es actualizar los colores y las fuentes!
Los gráficos con fondo oscuro hacen que las barras de colores brillantes se vean geniales. También apliqué la familia de fuentes Open Sans a todos los textos y establecí el tamaño y el peso de las diferentes etiquetas.
¿notaste que la línea se ha discontinuado? Se puede hacer configurando los atributos stroke-width y stroke-dasharray. Con stroke-dasharray, puede definir el patrón de guiones y huecos que alteran el contorno de la forma.
líneas de cuadrícula donde se pone complicado., Tengo que aplicar stroke-width: 0 a los elementos de ruta en el grupo para ocultar el marco del diagrama y también reducir su visibilidad estableciendo la opacidad de las líneas.
todas las demás reglas css cubren los tamaños y colores de las fuentes que puedes encontrar en el código fuente.
terminando nuestro D3.Tutorial de gráfico de barras js
D3.js es una biblioteca increíble para la manipulación del DOM. La profundidad de la misma esconde innumerables tesoros ocultos (en realidad no ocultos, está muy bien documentado) que espera el descubrimiento., Esta escritura cubre solo fragmentos de su conjunto de herramientas que ayudan a crear un gráfico de barras no tan mediocre.
Ir, explorar, utilizar y crear espectaculares visualizaciones!