Población mundial: la subida hasta los diez mil millones
Un póster infográfico en una sola página HTML: tres cifras destacadas, un gráfico de áreas apiladas interactivo, una cronología en barras y una minigráfica de doce mil años. Cada gráfico es SVG en línea dibujado por unas pocas líneas de script a partir de los números de la página, y cada color es un token que cambia con el modo oscuro del sitio.
De un vistazo
Población por región
miles de millones, 1950–2100 · pasa el cursor para ver los valores- Asia
- África
- Europa
- América Latina
- Norteamérica
- Oceanía
Asia alcanza su máximo de 5.290 millones hacia 2055; a partir de ahí, casi todo el crecimiento es africano.
Años para sumar cada mil millones
- 2 mil M122
- 3 mil M33
- 4 mil M15
- 5 mil M12
- 6 mil M11
- 7 mil M12
- 8 mil M12
- 9 mil M15
- 10 mil M24
Barras en años; * proyección de la variante media de la ONU. Los primeros mil millones: 1805.
Los últimos 12.000 años
miles de millonesDurante 11.800 de esos años la línea es plana: hubo que esperar hasta 1805 para llegar a los mil millones, y solo 220 años más para llegar a ocho mil millones.
Tabla de datos
| Año | Asia | África | Europa | América Latina | Norteamérica | Oceanía | Mundo |
|---|
Cómo está hecho
- Las cifras destacadas son una fila flex que se ajusta y cuyo hueco de 1px deja ver el color del borde, así que las tarjetas tienen divisores finos sin una sola regla de borde.
-
Las áreas apiladas se calculan en el navegador: la banda de cada
región es un trazado desde su base hasta su techo, y una capa invisible ajusta la
retícula al paso de cinco años más cercano. Un
ResizeObserverlo vuelve a dibujar al ancho real, así que las etiquetas siguen midiendo 11px en un móvil. -
La cronología de los miles de millones no usa ninguna librería de
gráficos: cada barra es un
::beforecuyo ancho es la propiedad personalizada--years, y las filas proyectadas pasan a un relleno rayado.
Fuente: World Population Prospects 2024 de la ONU, con la serie de largo plazo de HYDE y Gapminder, según la recopilación de Our World in Data.
Hecho con ❤ y Htmlpress