Volver a Proyectos

SVG & Data Viz

Gráficos vectoriales interactivos — desde formas básicas hasta visualización de datos animada

Descripción General

Colección progresiva de gráficos SVG que culmina en un gráfico de barras animado de nivel profesional. Construido con SVG puro y JavaScript vanilla, sin librerías de visualización como D3.js o Chart.js.

El proyecto final implementa animación de entrada con easing personalizado (easeOutCubic), tooltips interactivos al hover, lectura de datos desde JSON embebido, ejes dinámicos y tema oscuro completo con variables CSS.

Tecnologías Utilizadas


SVG

JavaScript

CSS3

JSON

requestAnimationFrame

Características del Gráfico Final

  • Animación de entrada: Barras aparecen con curva easeOutCubic usando requestAnimationFrame
  • Tooltips interactivos: Aparecen al hacer hover mostrando etiqueta y valor
  • Datos desde JSON: Título, unidad y series de datos en bloque JSON embebido
  • Ejes dinámicos: Eje Y con escala automática, eje X con etiquetas de categoría
  • Tema oscuro: Variables CSS, gradientes y sombras profesionales
  • Accesibilidad: Atributos aria-label en cada barra
  • Responsive: viewBox para escalado automático
  • Sin dependencias: SVG + JavaScript puro, 0 librerías externas

Progresión del Proyecto

  • 001–002: Círculo SVG básico y estándar
  • 004: Rectángulo con estilos de relleno y trazo
  • 005: Estrella con elemento polígono
  • 006: Pac-Man con arco SVG (path + arc)
  • 009: Manipulación de atributos SVG desde JavaScript
  • 010: Cambio dinámico de colores con eventos
  • 012: SVG embebido directamente en el DOM HTML
  • 013: Gráfico de barras animado completo (versión final)

Mi Rol

Desarrollador Frontend — SVG y JavaScript

Exploré SVG desde sus primitivas básicas hasta sistemas de animación complejos. El reto principal fue implementar el motor de animación manual con requestAnimationFrame y el sistema de tooltips sin recurrir a ninguna librería, demostrando comprensión profunda de gráficos vectoriales y el ciclo de animación del navegador.

Código Fuente

Ver Código en GitHub

Estado

Estado: ⚡ Proyecto de Aprendizaje

Proyecto académico que demuestra el dominio de SVG, animaciones con requestAnimationFrame y visualización de datos sin dependencias externas.