Cómo crear el gráfico animado de un termómetro con CSS

() translation by (you can also view the original English article)

Hasta el momento, en nuestra serie de tutoriales de gráficos con CSS, te he enseñado a crear un gráfico de columnas, un gráfico de barras y un gráfico de dona (rosquilla) en semicírculo.

En este tutorial cubriré el proceso para crear el gráfico animado de un «termómetro» con CSS puro; la forma perfecta para rastrear el logro de un solo objetivo.

Lo que crearemos

Aquí está el gráfico que crearemos (presiona reload [recargar] para verlo animado):

1. Empieza con los datos

Para los fines de esta demostración, necesitaremos algunos datos. Trabajemos con algunas cifras ficticias que describen la financiación de una organización benéfica a lo largo de los años:

Año	Financiación
2018	€95,000
2016	€72,000
2015	€50,000
2012	€35,000
2010	€15,000

Como habrás adivinado, nuestro reto es visualizar estos datos en un gráfico de termómetro. Nos inspiraremos visualmente en esos problemáticos bienhechores Extinction Rebellion (si no has oído hablar de ellos, ¡mira lo que están haciendo!).

2. Especifica el marcado de la página

Especificaremos un elemento de envoltura que contiene tres listas:

La primera lista establece el rango del eje Y. Si miras más de cerca los datos de la tabla anterior, verás que la segunda columna incluye valores de hasta 95,000. Considerando esto, definiremos seis valores de 0 a 100,000 con un tamaño de paso de 20,000. Por lo tanto, los valores del eje y serán 0, 2,000, 40,000, 60,000, 80,000 y 100,000.
La segunda lista establece los datos del eje X. Estos se extraen de la primera columna de nuestra tabla, de menor a mayor. Pero su orden no importa porque los posicionaremos de manera absoluta. No obstante, observa en el marcado a continuación, que un elemento de la lista contiene el mismo año dos veces. Podríamos haber omitido poner el año como nodo de texto del elemento. Pero es importante almacenar este valor en el atributo data-year. Como veremos posteriormente, pasaremos el valor de este atributo al pseudoelemento relacionado :: before.
La tercera lista agrupa los datos de la tabala mencionada anteriormente, desde el valor de financiación más alto hasta el más bajo. Nuevamente, aquí el orden no es importante. También puedes mostrarlos desde el más bajo al más alto. Esto depende completamente de ti.

Aquí está el marcado que se requiere:

1	<div class="chart-wrapper">
2	<ul class="chart-y">
3	<li>€100,000</li>
4	...
5	</ul>
6	<ul class="chart-x">
7	<li data-year="2010">2010</li>
8	...
9	</ul>
10	<ul class="chart-labels">
11	<li>2018 - €95,000</li>
12	...
13	</ul>
14	</div>

3. Define algunos estilos básicos

A continuación, configuraremos algunas variables CSS y algunos estilos comunes de restablecimiento:

@font-face {
  font-family: "Cheddar Gothic Sans";
  src: url("cheddargothic-sans-webfont.woff2") format("woff2"),
       url("cheddargothic-sans-webfont.woff") format("woff");
}

:root {
  --brand-color: #21a73d;
  --chart-bg-color: rgba(211, 211, 211, .3);
  --chart-line-color: black;
  --chart-x-color: white;  
  --line-color1: crimson;
  --line-color2: gold;
  --line-color3: firebrick;
  --line-color4: orange;
  --line-color5: darkblue;
  --black: #2d2929;
  --white: white;
  --transition-delay: 0.6s;
  --transition-delay-step: 0.6s;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font: 1rem/1.2 Georgia, serif;
  padding-top: 70px;
  background: var(--brand-color);
}

Aquí no ocurre nada realmente espectacular, pero tal vez una cosa a tener en cuenta es que, además de la conocida fuente serif del sistema «Georgia», también he utilizado la fuente premium «Cheddar Gothic» de Envato Elements.

Cheddar Gothic Font Family — Familia de fuentes Cheddar Gothic en Envato Elements

Nota: Para simplificar, no explicaré detalladamente todas las reglas de CSS en el tutorial. Puedes revisar el resto de ellas haciendo clic en la pestaña CSS del proyecto de demostración.

4. Estiliza el gráfico

La envoltura del gráfico será un contenedor de cuadrícula con contenido centrado de manera horizontal. Cada columna (lista) tendrá su ancho predeterminado, con un espacio de 4rem entre ellas.

Aquí está el CSS relacionado:

.chart-wrapper {
  display: grid;
  justify-content: center;
  grid-column-gap: 4rem;
  grid-template-columns: auto auto auto;
}

El eje Y

La primera lista que contiene los datos del eje Y también se comportará como un contenedor de cuadrícula. Habrá un espacio de 3rem entre los elementos:

Aquí está el CSS asociado:

1	.chart-wrapper .chart-y {
2	display: grid;
3	grid-row-gap: 3rem;
4	}

El eje X

La segunda lista que incluye los datos del eje X tendrá un ancho fijo de 50px. Además, le daremos algunos estilos adicionales para que tenga la apariencia de un termómetro real:

Los estilos correspondientes son los siguientes:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x {
  position: relative;
  width: 50px;
  border-radius: 25px;
  border: 8px solid var(--chart-line-color);
  background: var(--chart-bg-color);
  overflow: hidden;
}

Los elementos de la lista estarán posicionados de manera absoluta con una altura inicial de 0 por defecto, por lo tanto, serán invisibles. Otra cosa que hacemos es establecer su color de primer plano como transparente. En tal caso, el texto que contiene el año no será visible:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  color: transparent;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--chart-x-color);
  transition: height 0.5s ease-out;
}

Para el siguiente paso, especificaremos algunos estilos para su pseudoelemento :: before. Recuerda que su contenido incluirá el valor del atributo data-year asociado (ve el marcado anterior). Además, estará oculto al principio:

Los estilos requeridos:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li::before {
  content: attr(data-year);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 4px solid;
  width: 20px;
  opacity: 0;
  padding-left: 3px;
  color: var(--black);
  font-size: 0.75rem;
  transition: opacity 0.5s ease-out;
}

.chart-wrapper .chart-x li:nth-child(1)::before {
  border-color: var(--line-color1);
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  border-color: var(--line-color2);
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  border-color: var(--line-color3);
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  border-color: var(--line-color4);
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  border-color: var(--line-color5);
}

Anima los elementos

Tan pronto como se cargue la página, la altura de los elementos de la lista se animará y recibirá un valor que será determinado por el valor de financiación asociado (mira la tabla anterior). Por ejemplo, un valor de 15,000 corresponde a height: 15%. Además de los elementos de la lista, también se animará su pseudoelemento :: before, aunque las animaciones no se ejecutarán simultáneamente. Primero el elemento se hará visible, luego su pseudoelemento.

Ahora vamos a convertir todos los requisitos anteriores en código.

Cuando la página se cargue, primero añadiremos la clase loaded a body:

1	window.addEventListener("load", () => {
2	document.body.classList.add("loaded");
3	});

En ese punto los elementos pueden ser animados de manera secuencial. Para lograrlo, aprovecharemos una técnica utilizada en mis anteriores demostraciones de gráficos. Definiremos dos variables CSS que determinan la velocidad de transición (siéntete libre de cambiarlas si es necesario) y las combinaremos con la función calc().

Aquí están los estilos CSS responsables de revelar los elementos del eje X:

/*CUSTOM VARIABLES HERE*/

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
  transition-delay: var(--transition-delay);
}

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 35%;  /*represents €35,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 50%;  /*represents €50,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(4) {
  height: 72%;  /*represents €72,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(5) {
  height: 95%;  /*represents €95,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

Como ya he mencionado en las anteriores demostraciones de gráficos, Microsoft Edge no es compatible con estas operaciones matemáticas, por lo que si necesitas admitirlo, deberás pasar algunos valores estáticos, como este:

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 15%;
  transition-delay: 1.2s;
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 35%;
  transition-delay: 1.8s;
}

Nota: Podría haber definido la propiedad transition-delay fuera de la clase loaded de esta forma:

1	.chart-wrapper .chart-x li:nth-child(1) {
2	transition-delay: var(--transition-delay);
3	}

En cualquier caso, el resultado será el mismo; la animación no se ejecutará hasta que la página se cargue. Únicamente elegí incluir esa propiedad dentro de la clase loaded porque quería limitar el código CSS y agrupar las propiedades que comparten el mismo selector, por ejemplo esas dos:

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
}

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

Como ya se comentó en los pasos anteriores, el pseudoelemento ::before también debería aparecer en la carga de la página:

1	.loaded .chart-wrapper .chart-x li::before {
2	opacity: 1;
3	}

Pero con un retraso aún mayor:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li:nth-child(1)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  ); 
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 5
  );
}

Las etiquetas

La tercera lista que incluye los datos de la tabla estará oculta de forma predeterminada.

Pero en el momento en que las animaciones de los gráficos finalicen, aparecerá:

.chart-wrapper .chart-labels {
  opacity: 0;
  transition: opacity .6s 3.8s; 
}

.loaded .chart-wrapper .chart-labels {
  opacity: 1;
}

Observa el valor de la propiedad transition-delay que se establece en 3.8s. Utilizaremos este valor porque la propiedad transition-delay del último elemento :: before del eje x se establece en 3.6s:

The transition-delay property of the last before element of the x-axis

Por último, usaremos el pseudoelemento ::before de su lista de elementos para crear el colorido rectángulo que aparece en la esquina izquierda de cada elemento:

Aquí están los estilos que se necesitan para eso:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-labels li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.chart-wrapper .chart-labels li:nth-child(1)::before {
  background: var(--line-color5);
}

.chart-wrapper .chart-labels li:nth-child(2)::before {
  background: var(--line-color4);
}

.chart-wrapper .chart-labels li:nth-child(3)::before {
  background: var(--line-color3);
}

.chart-wrapper .chart-labels li:nth-child(4)::before {
  background: var(--line-color2);
}

.chart-wrapper .chart-labels li:nth-child(5)::before {
  background: var(--line-color1);
}

¡Así se ve nuestro proyecto final!

Conclusión

¡Eso es todo, amigos! En este tutorial, creamos el gráfico animado de un termómetro con CSS puro. Espero que este ejercicio haya sido interesante y que los desafíe a crear sus propios gráficos con CSS.

Como siempre, ¡gracias por leer!