Crea Gráficas Interactivas Usando Plotly.js, Parte 2: Gráficas de Línea

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En el tutorial Comenzando Con Plotly.js de esta serie, se te presentó una guía de inicio rápido que cubrió de manera breve todas las características, paquetes y tipos de gráficas disponibles en la librería. Si aún no has leído ese tutorial, sugeriría que lo recorras al menos una vez para tener una amplia idea de la librería Plotly.js.

En este tutorial, aprenderás cómo crear gráficas de línea en Plotly.js. También he escrito otra serie en el pasado sobre una librería ligera llamada Chart.js que puede ser usada para crear gráficas basadas en lienzos en JavaScript. En un tutorial que es titulado Comenzando Con Chart.js: Gráficas de Línea y Barra, cubrí el proceso de crear gráficas de línea usando Chart.js. La gente que ha leído ese tutorial probablemente recuerda que tienes que establecer el atributo type a line para crear una gráfica de línea en Chart.js.

Con Plotly.js, no puedes establecer el atributo type a line para crear una gráfica de línea. Tendrás que establecer el atributo type a scatter y después establecer el atributo mode a "lines", "lines+markers", o "lines+markers+text". Teniendo esto en mente, comencemos con el tutorial y creemos algunas asombrosas gráficas de lineas.

Creando una Gráfica de Línea Básica

En esta sección, graficaremos dos trazos scatter diferentes en la forma de gráficas de línea usando Plotly. El código es muy similar al que usamos en el último tutorial para crear una gráfica de línea usando un solo trazo. Aquí está el código real:

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 5, 13, 24, 35, 46, 60],
  y: [80, 40, 70, 65, 15, 75, 49],
  type: 'scatter'
};

var traceB = {
  x: [4, 9, 17, 21, 31, 42, 56],
  y: [64, 81, 3, 49, 25, 17, 26],
  type: 'scatter'
};

var data = [traceA, traceB];

var layout = {
  title:'A Line Chart in Plotly'
};

Plotly.plot( lineDiv, data, layout );

Please accept marketing cookies to load this content.

Estilizando Gráficas de Líneas Usando Diferentes Atributos

En este punto, todo en nuestra gráfica ha sido creado usando las opciones por defecto. El resto de las secciones en el tutorial te mostrarán cómo usar todos los atributos disponibles para el tipo scatter para crear gráficas de líneas personalizadas. Las opciones para cambiar la apariencia de una línea trazada son todas las disponibles bajo la clave line.

El color de una línea puede ser especificado usando la clave color. También puedes controlar el ancho de una línea usando el atributo width. El ancho es especificado en pixeles, y su valor por defecto es 2.

La forma de la línea entre diferentes puntos que están siendo graficados puede ser especificada usando el atributo shape. La forma es linear por defecto, pero también puedes establecerlo a spline, vh, hv, hvh, o vhv. Cuando shape es establecido a linear, no hay dobleces en la línea que conecta dos puntos consecutivos. En el caso de vh, hv, hvh, y vhv, las líneas nunca son dibujadas en ángulo. Ellas son ya sea horizontal o vertical, con un doblez de 90 grados que puede ocurrir en el primer punto, segundo punto, punto medio, o ambos puntos, dependiendo del valor de forma especificado.

La última opción es establecer shape a spline. En este caso, la línea de hecho se vuelve una curva, sin dobleces afilados. La suavidad de su curva puede ser establecida con la ayuda de otro atributo llamado smoothing. Este atributo puede aceptar cualquier valor entre 0 y 1.3 inclusivo. Establecerlo a cero resultará en líneas rectas como el valor linear. Aquí hay un poco de código que usa todos estos atributos para graficar cinco diferentes líneas sobre una gráfica:

1	var lineDiv = document.getElementById('line-chart');
2
3	var traceLinear = {
4	x: [1, 5, 13, 24, 35, 46, 60],
5	y: [180, 160, 170, 165, 175, 175, 149],
6	type: 'scatter',
7	name: 'Linear Shape',
8	line: {
9	shape: 'linear',
10	color: 'rgb(255, 157, 98)'
11	}
12	};
13
14	var traceSpline = {
15	x: [1, 5, 13, 24, 35, 46, 60],
16	y: [150, 130, 140, 135, 145, 145, 119],
17	type: 'scatter',
18	name: 'Spline Shape',
19	line: {
20	shape: 'spline',
21	color: 'rgb(157, 255, 98)'
22	}
23	};
24
25	var traceVH = {
26	x: [1, 5, 13, 24, 35, 46, 60],
27	y: [120, 100, 110, 105, 115, 115, 89],
28	type: 'scatter',
29	name: 'VH Shape',
30	line: {
31	shape: 'vh',
32	color: 'rgb(157, 98, 255)'
33	}
34	};
35
36	var traceHVH = {
37	x: [1, 5, 13, 24, 35, 46, 60],
38	y: [90, 70, 80, 75, 85, 85, 59],
39	type: 'scatter',
40	name: 'HVH Shape',
41	line: {
42	shape: 'hvh',
43	color: 'rgb(98, 157, 255)'
44	}
45	};
46
47	var traceSplineB = {
48	x: [1, 5, 13, 24, 35, 46, 60],
49	y: [60, 40, 50, 45, 55, 55, 29],
50	type: 'scatter',
51	name: 'Spline Shape (1.3)',
52	line: {
53	shape: 'spline',
54	smoothing: 1.3,
55	color: 'rgb(255, 98, 157)'
56	}
57	};
58
59	var data = [traceLinear, traceSpline, traceVH, traceHVH, traceSplineB];
60
61	var layout = {
62	title:'Different Shapes of a Line Chart',
63	yaxis: {
64	rangemode: 'tozero'
65	}
66	};
67
68	Plotly.plot( lineDiv, data, layout );

La siguiente gráfica de línea muestra la diferencia entre distintos valores del atributo shape. He usado el parámetro name para asignar diferentes nombres a cada línea para que puedas ver claramente la forma creada por cada valor.

Please accept marketing cookies to load this content.

Un parámetro más que puedes usar mientras dibujas las líneas de gráfica es el parámetro dash. Puedes establecer este parámetro a valor de cadena de texto para establecer un estilo de guión para tus líneas. Los valores válidos para este atributo son: solid, dot, dash, longdash, dashdot, y longdashdot.

Otra opción es proporcionar la longitud de guion tu mismo usando una lista de valores pixel como "4px, 4px, 10px". El siguiente demo usa diferentes valores de la propiedad dash para crear estilos únicos de línea.

Please accept marketing cookies to load this content.

Estableciendo Colores de Relleno y Marcadores

El área bajo una línea trazada en una gráfica permanece transparente por defecto, pero puedes rellenarla con un color de tu elección si lo deseas. Esto puede ser logrado usando el parámetro fill. Está establecido a none por defecto, pero otros valores válidos incluyen tozeroy, tozerox, tonexty, tonextx, toself, y tonext.

El valor tozeroy rellenará toda el área comenzando desde el trazo de la línea a y=0. De manera similar, el valor tozerox rellenará toda el área comenzando desde el trazo de la línea a x=0. Los valores tonexty y tonextx rellenan toda el área entre puntos finales del trazo actual y el trazo antes de este. Cuando no quedan otros trazos, estos valores actuarán como tozeroy y tozerox respectivamente. Puedes usar estos dos valores para crear gráficos apilados.

Como el nombre sugiere, el valor toitself conecta los puntos finales del trazo a cada uno, formando una forma cerrada. El último valor, tonext, rellena todo el espacio disponible entre dos trazos solo cuando un trazo está cerrando completamente al otro.

Por defecto, el área especificada por el valor del parámetro fill es rellenado usando una variante semi-transparente del color de línea, color de marcador, o color de línea de marcador, dependiendo de la disponibilidad. Sin embargo, puedes especificar tu propio color de relleno para rellenar esa área usando el parámetro fillcolor.

Los puntos que representan los puntos trazados sobre la gráfica son marcados usando círculos por defecto. Plotly.js también proporciona muchos otros símbolos de marcadores de los cuáles elegir. Hay alrededor de 44 diferentes símbolos de marcadores, y casi todos ellos están disponibles en cuatro versiones diferentes. Puedes encontrar una lista de todos estos símbolos en la documentación. Los marcadores también tienen parámetros opacity, size, y color que te permiten controlar la opacidad, tamaño, y color de estos símbolos. El valor por defecto de opacity es 1, y el valor por defecto de size es 6.

Aquí hay un pequeño código que usa todos los parámetros de esta sección para crear gráficas de línea con áreas rellenas y marcadores no circulares:

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [180, 150, 210, 165, 175, 185, 220],
  type: 'scatter',
  name: 'marker: circle',
  fill: 'tonexty',
  marker: {
    symbol: 'circle',
    size: 10
  }
};

var traceB = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [130, 120, 160, 135, 145, 145, 119],
  type: 'scatter',
  name: 'marker: diamond',
  fill: 'tonexty',
  marker: {
    symbol: 'diamond',
    size: 10
  }
};

var traceC = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [110, 100, 105, 100, 115, 85, 95],
  type: 'scatter',
  name: 'marker: pentagon',
  fill: 'tonexty',
  marker: {
    symbol: 'pentagon',
    size: 12
  }
};

var traceD = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [70, 80, 60, 85, 75, 50, 59],
  type: 'scatter',
  name: 'marker: star',
  fill: 'tonexty',
  marker: {
    symbol: 'star',
    size: 12
  }
};

var traceE = {
  x: [1, 8, 13, 24, 35, 46, 60],
  y: [30, 20, 30, 15, 55, 15, 30],
  type: 'scatter',
  name: 'dash: 4px, 4px, 10px',
  fill: 'tonexty',
  marker: {
    symbol: 'bowtie',
    size: 12
  }
};

var data = [traceE, traceD, traceC, traceB, traceA];

var layout = {
  title:'Dash values for a Line Chart',
  xaxis: {
    rangemode: 'tozero'
  },
  yaxis: {
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

Cuando rellenas el área entre diferentes trazos con un color dado, necesitas tener en mente que todos estos parámetros rellenan el área de trazo basado en el orden en que son proporcionados los trazos a la función plot(), y no en el orden en el que fueron declarados los trazos.

En nuestro caso, traceE es el primer trazo, y no hay trazo antes que este. Esto significa que el valor tonexty efectivamente se vuelve tozeroy esta vez. Hemos pasado traceD después de traceE, así que todos los puntos entre estos dos trazos serán rellenados con el color de traceD. Si en su lugar hubiéramos pasado traceA primero, entonces el color de relleno de área se habría extendido hasta la parte superior a y=0. Esto podría no ser un resultado deseable en algunos casos. Así que siempre deberías mantener el orden en el cuál los trazos son pasados en cuenta.

Please accept marketing cookies to load this content.

Conclusión

En este tutorial, aprendiste cómo crear gráficas de línea usando Plotly.js. Diferentes secciones del tutorial discutieron una variedad de opciones de personalización, como establecer la forma, color, y ancho de las líneas.

También aprendiste sobre diferentes símbolos de marcador y la opción proporcionada por Plotly.js que puede ser usada para seguir personalizando una gráfica de línea. Solo he cubierto algunos de los atributos mayores, pero hay algunos otros, como showlegend y hoverinfo, sobre los que probablemente debería conocer. Puedes leer todo sobre estos atributos bajo la sección de referencia scatter en el sitio web de Plotly.

En el siguiente tutorial de la serie, aprenderás cómo crear gráficas de barra en Plotly. Si tienes alguna pregunta o consejos en relación a este tutorial, siéntete libre de compartirlos en los comentarios.