Data & Numbers

Líneas y puntos se animan entre ubicaciones de un mapa o un globo terráqueo.

Añade "Animated Map Arcs" (también llamado globe arcs) en [dónde].
Unas líneas curvas deben dibujarse una tras otra entre ubicaciones de un mapa de puntos y luego recogerse hacia su destino mientras allí late un anillo suave: tranquilo y constante.
Escalona los arcos para que nunca se muevan a la vez, mantén el bucle sin cortes y páusalo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las barras suben desde altura cero hasta sus valores.

Añade un gráfico de barras animado (Bar Chart Grow) en [dónde], también llamado animated bar chart o bar chart entrance.
Cada barra debe subir desde la línea base hasta su valor una tras otra con un escalonado rápido, desacelerando con suavidad al asentarse.
Reprodúcelo una sola vez cuando el gráfico entre en pantalla y muestra el gráfico terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las barras horizontales intercambian posiciones con el tiempo a medida que cambian los valores.

Añade un gráfico de carrera de barras (Bar Chart Race) en [dónde], también llamado racing bar chart.
Las barras horizontales deben crecer y encogerse a medida que cambian los valores con el tiempo y deslizarse con suavidad unas junto a otras cada vez que cambie su posición, cada una con su etiqueta.
Mueve las barras con transformaciones en lugar de reordenar el marcado para que los intercambios se deslicen en vez de saltar, y da a los usuarios una forma de pausarlo.

Los elementos del gráfico pasan con suavidad de los valores antiguos a los nuevos cuando cambian los datos o se alterna el conjunto de datos.

Añade un "Chart Data Transition" (también llamado chart update animation) en [dónde].
Cuando cambien los datos, todas las barras deben deslizarse a la vez de su valor anterior al nuevo, de forma suave y sin prisa, en lugar de redibujarse desde cero.
Empieza cada actualización desde los valores que hay en pantalla para que un segundo cambio rápido no salte, y aplica los valores nuevos al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un anillo o un gráfico circular se rellena en sentido horario hasta su porcentaje.

Añade una animación "Donut Chart Fill" (también llamada pie chart sweep o animated donut chart) en [dónde].
Empezando por arriba, cada segmento debe barrer en sentido horario por turnos hasta que el anillo muestre su proporción, desacelerando con suavidad al terminar.
Reprodúcela una sola vez cuando el gráfico entre en pantalla y deja los valores reales disponibles como texto para los lectores de pantalla.

Un número cuenta desde un valor inicial hasta un valor objetivo cuando se vuelve visible.

Añade un contador animado (Number Ticker) en [dónde], también llamado count up o animated counter.
Cuando el número entre en pantalla, debe contar desde cero hasta su objetivo, rápido al principio y frenando con suavidad al llegar.
Usa dígitos de ancho fijo para que nada alrededor tiemble, cuenta una sola vez y da el valor final de inmediato a los lectores de pantalla y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Cada dígito rueda en vertical hasta el nuevo valor cuando cambia un número.

Añade una animación de números "Odometer" (también llamada rolling numbers o slot-machine digits) en [dónde].
Cuando cambie el valor, cada dígito debe rodar en vertical hasta su nuevo dígito, siempre hacia delante, con un ligero escalonado entre dígitos y un pequeño asentamiento al final.
Mantén todos los dígitos del mismo ancho para que el número no se desplace, y expón solo el valor final a los lectores de pantalla.