BOOST D3.JS Llama con gradientes SVG

[dieciséis]

Comenzamos con un SVG. Este es el lienzo en el que se dibujará nuestra lista de líneas. Luego creamos un defs elemento en el que podemos anexar un gradiente lineal elemento. Es muy importante darle al gradiente una identificación única: usaremos esto más adelante cuando necesitemos darle al área debajo de la línea su relleno.

 var arzagradient = svg.append ("defs")
.append ("lineartediente")
.attr ("ID", "Áreagradiente")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Las dos últimas líneas del Código anteriores definen cómo debería ejecutarse el gradiente. Piense en ello como una línea invisible: x1 y y1 son las posiciones iniciales de la línea invisible y la x2 y y2 Indique su punto final, para dar la dirección del gradiente. A menudo es más fácil definir estos porcentajes, aunque es posible usar ubicaciones de píxeles exactas. Por defecto, las ubicaciones se refieren al cuadro delimitador del elemento en el que se aplica el gradiente. Queremos que el gradiente funcione verticalmente, por lo que x1 y x2 debe ser el mismo ( 0% está bien), y1 tiene que ser 0% y y2 100% .

Ahora podemos definir los colores del gradiente. Se necesitan al menos dos colores para un gradiente, pero puedes usar tantos como quieras. Para cada color en el gradiente, agrega un detener elemento. Dentro de esto especificas la sombra con detención , y la ubicación (a lo largo de la línea invisible) donde desea que este color sea puro (el color exacto) con compensar .

Opcionalmente, también podemos configurar la opacidad de cada color con parada-opacidad . Aquí estoy haciendo la sombra ligeramente más ligera en la parte superior y completamente transparente en la parte inferior.

 ÁreaGRADIENTE.APPEND ("PARADA")
.attr ("offset", "0%")
.attr ("detener-color", "# 21825c")
.attr ("parada-opacidad", 0.6);
ÁreaGradient.Alchend ("detener")
.attr ("offset", "80%")
.attr ("detener-color", "blanco")
.attr ("parada-opacidad", 0); 

Ahora se configura el gradiente lineal, podemos crear un gráfico de área y llenarlo con el gradiente. Para hacer esto, use URL (# gradiente-id) En el estilo de relleno, junto con la ID única que establecemos anteriormente.

 svg.append ("camino")
.style ("relleno", "URL (#Aregradient)")
.attr ("D" ,Function (Dataset)); 

Posteriormente, dibuje la línea en la parte superior de esta área de la tabla para que el visor pueda leer los resultados de su gráfico. En mi tabla, también he colocado círculos para enfatizar las ubicaciones de los puntos de datos específicos.

Una leyenda suave [sesenta y cinco]

Las leyendas son muy comunes en las visualizaciones de datos. Cuando está utilizando colores para representar un aspecto particular de sus datos, debe explicar lo que significa cada color. Aquí es donde entra una leyenda.

En algunos gráficos, utilizará color para discriminar entre casos discretos (por ejemplo, países diferentes), en cuyo caso los colores son a menudo todos muy diferentes. Sin embargo, también puede usar el color para indicar un valor cuantitativo.

Aquí estamos representando la temperatura afuera (ver Fig. 2). El color cambia gradualmente para indicar la temperatura que va de baja a alta. Para mostrar esto en una leyenda, vamos a crear un rectángulo largo y llenarlo con un gradiente que va de izquierda a derecha. Podemos reutilizar el gradiente que creamos para nuestra tabla de líneas, pero se volteó 90 grados (por lo que x2 ahora corre hacia 100% , más bien que y2 ). Aunque generalmente no se recomienda una paleta de arco iris en la visualización de datos, las personas se utilizan para ver mapas de temperatura coloridas, y he elegido nueve colores para usar en nuestro ejemplo.

[dieciséis] Figura 2: El gradiente de diferentes colores representa la temperatura en una ubicación, explicada en una leyenda a continuación

En lugar de escribir cada uno detener Para agregar, podemos poner todos los colores en un conjunto de datos y usar el ingenioso de D3. datos Paso para hacer que el proceso sea más rápido. Con D3 es posible acceder a cualquier propiedad del conjunto de datos en los pasos de encadenamiento posteriores utilizando una función anónima, lo que nos permite configurar el color y la desplazamiento en solo dos líneas.

 svg.append ("defs")
.append ("lineartediente")
.attr ("id", "legendgradientmulti")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.selectall ("detener")
.datos([
{offset: "0%", color: "# 2C7BBB6"},
{offset: "12.5%", color: "# 00a6ca"},
{offset: "25%", Color: "# 00CCCBC"},
{offset: "37.5%", Color: "# 90EB9D"},
{offset: "50%", color: "# ffff8c"},
{offset: "62.5%", Color: "# F9D057"},
{offset: "75%", Color: "# F29E2E"},
{offset: "87.5%", Color: "# E76818"},
{offset: "100%", color: "# D7191C"}])
.ENTER (). Anexar ("parar")
.attr ("offset", función (d) {devuelve d.offset;})
.attr ("detener-color", función (D) {devuelva d.color;}); 

Como antes, el paso final es crear un correcto y complete esto utilizando la ID de gradiente única.

 svg.append ("Rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("ancho", 500) .attr ("altura", 20)
.style ("llenar", "URL (#LegendGradientmulti)"); 

Los gráficos con estas leyendas van se recrean después de la fabulosa obra de www.weather-radials.com Mostrando la temperatura en Nueva York o Beijing en 2015. La temperatura promedio cada día se indica mediante una línea de color, y estas líneas están dispuestas para formar un gráfico circular. La leyenda a continuación explica lo que significa cada color. Un gráfico usa un gradiente de un color a otro, y el otro progresa a través de los nueve colores.

Gradientes basados ​​en datos [sesenta y cinco]

De una manera similar al ejemplo anterior, también podemos crear múltiples gradientes. Podríamos hacer un gradiente único para cada punto de datos, en función de un aspecto particular de los datos. Utilicé este enfoque en una Visualización de exoplanetas , donde cada planeta recibió un gradiente basado en la clase estelar de las órbitas de la estrella. Utilicé un efecto esfera sutil para dar la impresión cada uno encendido por la estrella en el centro.

[dieciséis] Figura 3: En esta visualización de exoplanetas, cada planeta tiene su propio gradiente basado en datos, creando el aspecto de una esfera.

Así que volvamos a los años 90 y volvamos a la colección de círculos planos que representan los planetas en nuestro propio sistema solar en esferas de aspecto 3D con gradientes radiales (Fig. 4). He creado un pequeño conjunto de datos que contiene el nombre y el diámetro del planeta. Cada uno será generalizado por un color, que usaremos para crear un gradiente único para cada planeta.

 var gradientRadial = svg.append ("defs")
.selectall ("radialgradient")
.data (planetas)
.Enter (). Anexo ("radialgradient")
.attr ("id", función (d) {devuelve "degradado-" + d.planet;})
.attr ("CX", "15%")
.attr ("Cy", "50%")
.attr ("r", "85%"); 

El código es ligeramente diferente aquí: en lugar de primero agregar un elemento degradado, ahora adjuntamos inmediatamente el planetas Conjunto de datos y solo después de la ingresar ¿Creamos un elemento degradado (en este caso? Gradiente radial ). De esta manera, se crea un gradiente para cada punto en el conjunto de datos. Mantenga la identificación de cada punto única al basarlo en los datos. El índice I Por lo general, funciona, pero aquí el nombre del planeta es más seguro. Esto asegura que podamos acceder al gradiente correcto más adelante.

Un gradiente radial es ligeramente diferente a uno lineal. Lo creamos de manera similar a un círculo SVG: suministre el centro del gradiente con respecto a los límites de los objetos a los que se aplicará, utilizando cx y cy . Estos valores predeterminados para 50% , que es el centro del objeto.

Para simular la apariencia de una estrella que brilla en los planetas desde un lado, moveremos el centro del gradiente a la izquierda por el ajuste cx a 15% . El radio del gradiente (donde una parada de degradado de 100% debe terminar) se indica por r . También por defecto 50% , pero debido a nuestro cx offset, esto es ahora 85% Así que llena todo el círculo.

Podemos usar los datos del planeta para agregar las paradas de color. Para crear la apariencia de una esfera que está siendo brillada, el color en 0% debe ser más ligero. Mediante el uso d3.rgb (). Más brillante (k) No tengo que especificar un color separado, ya que D3 hará ese cálculo para mí. El valor k Define cuánto más ligero quiero que el color se vuelva. Alrededor 50% Pongo el verdadero color en el conjunto de datos. En el borde quiero un color que sea un poco más oscuro, dando la apariencia de la sombra. Lógicamente, también hay un d3.rgb (). Darker (k) que podemos usar.

 GradientRadial.append ("detener")
.attr ("offset", "0%")
.attr ("detener-color", función (D) {
return d3.rgb (d.color) .brighter (1); });
GradientRadial.append ("detener")
.attr ("offset", "50%")
.attr ("detener-color", función (D) {devuelva d.color;});
GradientRadial.append ("detener")
.attr ("offset", "100%")
.attr ("detener-color", función (D) {
return d3.rgb (d.color) .darker (2.5); }); 

Si debía inspeccionar el HTML después de ejecutar esto, habría ocho gradientes radiales diferentes presentes. Por último, necesitamos crear ocho círculos, dales un radio según lo definido por los datos y llénalos con el gradiente correcto.

 svg.selectall (". Planetas")
.data (planetas)
.ENTER (). Anexar ("Círculo")
/ * Establezca la clase, la ubicación y los atributos del radio ... * /
.style ("relleno", función (D) {
devuelva "URL (# degradiente-" + d.Planet + ")"; }); 

También he agregado el sol, que tiene su propio gradiente radial, pero me he ido. cx De cy y r con la configuración predeterminada de 50% Para que parezca que el sol está brillando del centro hacia afuera.

Un descargo de responsabilidad: aunque los diámetros de todas las esferas son correctas entre sí, las distancias son, por supuesto, completamente falsas. Y lamento que Saturno no tenga anillos.

Jugando con las orientaciones [sesenta y cinco]

Ahora hemos explorado cómo configurar los aspectos de color según los datos, pero hay muchas más posibilidades. Podemos establecer prácticamente todo basado en datos, incluso las orientaciones de cada gradiente.

Para probar esto, hagamos un diagrama de acordes de D3 que muestre las colaboraciones entre los Vengadores en el Universo Cinemático de Marvel (Fig. 5). Los acordes que se ejecutan entre los seis vengadores están dimensionados de acuerdo con la cantidad de películas en las que ambos aparecen. Vamos a llenar estos acordes con un simple gradiente lineal, cambiando de un color de un vengador a otro.

Un acorde generalmente no es exactamente horizontal o vertical. Así que tendremos que establecer el X1, x2 De y1 y y2 Valores basados ​​en las ubicaciones de cada arco exterior de Avenger. Estos datos no están en nuestro conjunto de datos original, pero después de lo hemos suministrado a D3's d3.layout.chord Función, volveremos un nuevo conjunto de datos que contenga los ángulos de inicio y final de cada arco (como D.Source.starter y d.target.endangle ). Este es el conjunto de datos que suministramos al crear los gradientes.

[dieciséis] Figura 5 Cada acorde tiene su propio gradiente único, donde las orientaciones (y el color) están definidas por los datos.

Necesitamos conocer las posiciones de píxeles de la línea invisible que se extiende desde un extremo de un acorde a otro. Estos se usan para dar el x1, .., y2 Atributos de cada gradiente. Podemos aplicar algo de trigonometría utilizando el radio del diagrama de acordes y la ubicación a mitad de camino a lo largo de cada arco de Avenger para recuperar estas posiciones. La fórmula trigonométrica completa se ha eliminado del siguiente código, pero lo encontrará en El repo de GitHub que acompaña a este artículo. .

Para hacer una identificación única para cada acorde, creamos una combinación de cadenas del valor del índice del vengador en cada extremo de un acorde. D3 d3.layout.chord Siempre establece uno (de los vengadores) para fuente y el otro a objetivo , que hace un par único. Más tarde, al dibujar los acordes, podemos usar la misma técnica para llamar al gradiente correcto.

 VAR Grads = svg.append ("defs"). Selectall ("lineartedient")
.DATA (CHORD.CHORDS ())
.Enter (). Anexo ("linealgradiente")
.attr ("id", función (D) {return "gradientchord-" + d.source.
Índice + "-" + d.Target.Index; })
.attr ("GRADIENTUNITS", "Userspaceonuse")
// la ubicación de píxeles de un extremo de un acorde
.attr ("x1", función (D, i) {retorno / * ... trigonometría basada en
D.Source Valores ... * /; })
.attr ("y1", función (D, i) {retorno / * ... * /})
// la ubicación del píxel del otro extremo de un acorde
.attr ("x2", función (D, i) {retorno / * ... * /})
.attr ("y2", función (D, i) {retorno / * ... * /}); 

Dado que cada Avenger está definido por su propio número de índice, podemos hacer una función de color, colores , que devuelve el color de cada vengador por valor de índice. Esto facilita la referirse al color correcto mientras agregue las dos paradas de color.

 Grads.Aply ("Detener")
.attr ("offset", "0%")
.attr ("detener-color", función (D) {vuelos de colores (d.source.index);
});
Grads.append ("detener")
.attr ("offset", "100%")
.attr ("detener-color", función (D) {colores de retorno (d.target.index);
}); 

Todo lo que queda es llamar a la ID de gradiente correcta mientras configura el estilo de llenado de los acordes (con la misma función que utilizamos para configurar el ID de degradado).

Redondeando [sesenta y cinco]

Durante este tutorial, hemos examinado cuatro formas diferentes de usar gradientes SVG en las visualizaciones de datos, pero siempre hay más cosas que puede hacer. Con las animaciones de gradiente, puede simular un flujo de una parte de la visualización de datos a otra, por ejemplo.

Así que la próxima vez que esté diseñando una visualización de datos, deje que su creatividad se ejecute. Con D3.js, no tiene que estar restringido por lo que cree que son los límites de la herramienta. Con un poco de pensamiento y esfuerzo fuera de la caja, puede hacer las cosas más increíbles.

No te pierdas la sesión de Nadieh, SVG más allá de las meras formas, en Generar Londres, 21-23 de septiembre. Reservar ahora !

Este artículo apareció originalmente en revista neta emisión 280; cómpralo aquí !