Este proyecto es una colección de visualizaciones desarrolladas con la biblioteca D3.js, diseñadas para explorar distintos enfoques de representación de datos con interactividad, escalabilidad y claridad visual.
Cada ejemplo se encuentra en una carpeta independiente y puede ejecutarse de forma local desde un navegador. Se ha utilizado la librería Materialize CSS para mejorar la presentación visual.
Objetivo: Visualizar cuántas veces ha ganado cada selección nacional la Copa del Mundo.
Descripción:
- Gráfica de barras horizontales ordenadas por número de títulos.
- Un control deslizante permite seleccionar un año específico y actualizar la visualización dinámicamente.
- Uso de animaciones y escalas para transición fluida.
Carpeta: example-1/
Objetivo: Comparar la edad de Leonardo DiCaprio y la de sus ex parejas en distintos años.
Descripción:
- Línea de tiempo con la edad de DiCaprio.
- Barras que representan la edad de cada ex pareja en el mismo año.
- Tooltip interactivo con información de cada relación y diferencia de edad.
- Colores únicos asignados a cada pareja.
Carpeta: example-2/
Objetivo: Representar el comportamiento del mercado en el IBEX 35 a través de dos métricas clave.
Descripción:
- Gráfica de líneas para mostrar el valor de cierre del índice bursátil.
- Gráfica de barras con volumen de mercado bajo la misma escala de tiempo.
- Ideal para análisis temporal y financiero básico.
Carpeta: example-3/
-
Clona el proyecto:
git clone git@github.com:rociobenitez/d3js-interactive-visualizations.git -
Navega a la carpeta del ejemplo que deseas visualizar y ejecuta el archivo
index.htmlen tu navegador:cd d3js-interactive-visualizations/example-1 -
Asegúrate de tener los permisos necesarios si abres archivos locales (Chrome puede bloquearlo sin un servidor local).