Una infografía interactiva no se mira: se explora. Pasas el ratón por encima, filtras, haces scroll o pulsas un botón, y los datos cambian delante de ti. Aquí tienes 8 ejemplos reales que puedes abrir ahora mismo y las herramientas gratis para hacer la tuya. Al final, una mini infografía en HTML con su código.
Respuesta rápida: una infografía interactiva es una infografía digital en la que el lector participa: elige qué datos ver, descubre información al pasar el ratón o avanza con el scroll. Para hacer una sin programar, las herramientas más usadas son Genially, Flourish y Datawrapper. Si sabes HTML, CSS y JavaScript, puedes hacerla tú desde cero.
Qué es una infografía interactiva
Una infografía clásica es una imagen fija que resume información con gráficos, iconos y poco texto. Tienes sus partes en este post sobre qué elementos tiene una infografía. La interactiva añade una capa más: el lector decide por dónde avanzar. Estas son las formas de interacción más habituales:
- Pasar el ratón o tocar: aparece el dato exacto de cada barra, punto o país.
- Filtros y botones: cambias de año, de categoría o de país, y el gráfico se actualiza.
- Scroll (scrollytelling): la historia avanza a medida que bajas por la página.
- Zoom y arrastre: típico de mapas y globos terráqueos.
¿Cuándo merece la pena? Cuando hay muchos datos y cada lector busca el suyo. Si el mensaje cabe en tres cifras, una infografía estática se entiende antes.
Ejemplos de infografía interactiva
Todos están en línea y se pueden explorar. Ábrelos en el ordenador para verlos a pantalla completa:
1
The Deep Sea (Neal Agarwal)
Bajas por la página y desciendes por el océano: a cada profundidad aparecen los animales que viven ahí, hasta el fondo marino. Es el mejor ejemplo de scrollytelling: sin un solo botón, solo scroll.
Scroll · Ver la infografía
2
World’s Biggest Data Breaches (Information is Beautiful)
Una burbuja por cada gran robo de datos de la historia, con filtros por sector, método, fecha y tamaño. Enseña cómo convertir una tabla enorme en algo que se recorre con gusto.
Filtros · Ver la infografía
3
Gapminder Tools
El famoso gráfico de burbujas de Hans Rosling: renta, esperanza de vida y población de cada país, animados a lo largo de los años. Le das al «play» y ves dos siglos de historia en un minuto.
Animación y filtros · Ver la infografía
4
Earth (nullschool)
Un globo terráqueo con el viento, las corrientes y el tiempo de todo el planeta casi en tiempo real. Lo giras, haces zoom y cambias de capa.
Mapa con zoom · Ver la infografía
5
Our World in Data
Miles de gráficos interactivos sobre salud, población, energía o clima. En cada uno eliges países, cambias el periodo y pasas de gráfico a mapa o a tabla.
Filtros y mapas · Ver los gráficos
6
The Pudding
Ensayos visuales que mezclan texto, datos e interacción para contar una historia, sobre música, cultura o sociedad. Ideal para ver cómo se escribe alrededor de un gráfico.
Scroll y storytelling · Ver los ensayos
7
RTVE Lab
El laboratorio de innovación de RTVE publica especiales interactivos y documentales web en español. Es una buena referencia de periodismo de datos en nuestro idioma.
Especiales en español · Ver los especiales
8
Galería de Flourish
Flourish enseña en su web ejemplos de gráficos, mapas y «historias» hechas con su herramienta. Sirve a la vez de inspiración y de catálogo de lo que puedes hacer tú gratis.
Plantillas interactivas · Ver Flourish
Herramientas para crear infografías interactivas
| Herramienta | Ideal para | Plan gratis |
|---|---|---|
| Genially | Trabajos de clase, presentaciones y juegos | Sí, ilimitado, con marca de Genially |
| Flourish | Gráficos y mapas con datos, historias con scroll | Sí, proyectos públicos con marca de Flourish |
| Datawrapper | Gráficos y mapas limpios para webs y medios | Sí, ilimitado, exporta en PNG |
| Canva | Infografías visuales con enlaces y animaciones sencillas | Sí, con elementos de pago |
| HTML, CSS y JavaScript | Control total y sin marcas de terceros | Gratis |
Mi recomendación: si es un trabajo de clase o una presentación, Genially. Si tienes datos y quieres incrustar el gráfico en una web, Flourish o Datawrapper. Y si quieres algo a medida, hazlo con código y apóyate en una de estas librerías de gráficos en JavaScript.
¿Prefieres partir de un diseño hecho? En las plantillas de infografías de Envato Elements tienes cientos de diseños editables en Illustrator, PowerPoint y otros formatos. Cambias los datos y listo.
Cómo hacer una infografía interactiva en HTML
No hace falta una librería para empezar. Esta mini infografía usa solo HTML, CSS y unas líneas de JavaScript: pulsa los botones y las barras cambian. Los datos son de ejemplo.
Visitas de un blog por canal (datos de ejemplo)
Datos ficticios, solo para enseñar la técnica.
La idea es siempre la misma: los datos viven en un objeto de JavaScript, y al pulsar un botón cambias el ancho de cada barra. La transición de CSS hace el resto. Esta es la parte clave:
const datos = {
2025: [62, 18, 12, 8],
2026: [48, 22, 21, 9],
};
boton.addEventListener('click', () => {
datos[boton.dataset.anio].forEach((valor, i) => {
barras[i].style.width = valor + '%';
});
});Con la misma técnica puedes hacer pestañas, mapas que se colorean o líneas de tiempo. Si es tu primer proyecto con JavaScript, tienes ideas en estos proyectos de JavaScript para practicar.
Consejos para diseñar tu infografía interactiva
- Un mensaje principal. Que se entienda sin tocar nada. La interacción es para profundizar, no para descubrir de qué va.
- Que funcione en el móvil. No hay ratón: lo que dependa de pasar el cursor debe funcionar también al tocar.
- Accesible con teclado. Usa botones de verdad y buen contraste. Tienes cómo hacerlo en la guía de diseño web accesible.
- Cita la fuente de los datos. Debajo del gráfico, siempre. Da credibilidad y es lo que más se olvida.
- Ligera. Una infografía que tarda en cargar no se explora. Optimiza las imágenes y carga solo las librerías que uses.
Más recursos para diseñar y programar, en tu correo
Te aviso cuando publico guías, plantillas y ejemplos con código como este. Sin spam: solo lo que te sirve para trabajar.
Preguntas frecuentes
¿Qué diferencia hay entre una infografía digital y una interactiva?
Una infografía digital puede ser una simple imagen en pantalla. La interactiva, además, responde a lo que haces: filtros, botones, scroll o información al pasar el ratón.
¿Con qué programa hago una infografía interactiva gratis?
Para un trabajo de clase o una presentación, Genially es la opción más sencilla y tiene plan gratis. Para gráficos con datos reales, Flourish o Datawrapper. Las tres funcionan en el navegador, sin instalar nada.
¿Se puede hacer en PowerPoint o Google Slides?
Sí, de forma básica: con hipervínculos entre diapositivas y botones puedes crear una infografía navegable. Para filtros o datos que cambian, mejor una herramienta específica.
¿Cómo pongo una infografía interactiva en mi web?
Genially, Flourish y Datawrapper te dan un código para incrustar (embed). En WordPress, lo pegas en un bloque HTML personalizado. Si la haces tú en HTML, la pegas igual que la de este post.
¿Qué libro me recomiendas para aprender infografía?
«El arte funcional», de Alberto Cairo, un clásico de la infografía y la visualización de datos escrito por un autor español. Explica por qué unos gráficos funcionan y otros no.
Conclusión
Abre dos o tres de los ejemplos y fíjate en cómo te invitan a explorar sin explicarte nada. Después elige la herramienta según tu caso: Genially para clase, Flourish o Datawrapper para datos, y código si quieres control total. Y si vas a diseñar la parte estática, repasa qué elementos tiene una buena infografía.
Este artículo incluye algunos enlaces de afiliado: si compras a través de ellos, recibo una pequeña comisión sin coste adicional para ti.
