📊 SVG & Data Viz

Escala del Proyecto

Descripción General

Ejercicio de Informática Gráfica sobre gráficos vectoriales, en trece pasos que van desde dibujar un círculo en SVG hasta un gráfico de barras animado e interactivo.

El recorrido intermedio construye las formas a mano — círculo, rectángulo, estrella, un comecocos — y después pasa a lo importante: embeber el SVG en el documento y manipularlo desde JavaScript, cambiando colores y atributos de los elementos vectoriales en caliente.

La versión final es un gráfico de barras completo: carga los datos, calcula la escala del eje con una función niceMax(), anima la entrada de cada barra con easeOutCubic sobre requestAnimationFrame, y muestra tooltips al pasar el cursor. Todo sin D3 ni ninguna otra librería.

Tecnologías Utilizadas

Funciones del Gráfico Final

• loadData() — carga los datos que alimentan el gráfico.
• niceMax() — calcula un máximo "redondo" para el eje, en lugar de usar el valor máximo crudo. Es lo que hace que la escala se lea bien.
• renderChart() — genera los elementos SVG de las barras y los ejes.
• animateBar() y frame() — animación de entrada barra a barra sobre requestAnimationFrame.
• easeOutCubic() — función de suavizado: la barra entra rápido y frena al final, en lugar de crecer a velocidad constante.
• showTooltip() y hideTooltip() — información al pasar el cursor sobre cada barra.
• formatValue(), clamp() y fade() — utilidades de formato y transición.

Progresión del Ejercicio

• 001-002El primer círculo en SVG y su versión estandarizada.
• 003Documento de resumen de los conceptos.
• 004-006Formas a mano: rectángulo, estrella y un comecocos con arcos.
• 007"Yo controlo": composición propia para consolidar lo aprendido.
• 008Embeber el SVG dentro del documento HTML.
• 009-010Manipular el SVG desde JavaScript y cambiar colores en caliente.
• 011-012Primera gráfica y su versión embebida.
• 013Versión final: gráfico de barras con escala calculada, animación con easing y tooltips interactivos.

Qué Aprendí

• Que el SVG es parte del DOM: se puede seleccionar, modificar y animar con el mismo JavaScript que cualquier otro elemento, y eso es lo que hace posible una librería como D3.
• Que una escala calculada con niceMax() es la diferencia entre un gráfico legible y uno con el eje en 8.437.
• Que la animación necesita una función de easing: crecer a velocidad constante se percibe como algo mecánico, mientras que easeOutCubic se siente natural.
• Que hacer un gráfico de barras a mano una vez enseña por qué existen las librerías de visualización, y también que no siempre hacen falta.
• Que el vector escala sin pérdida a cualquier resolución, algo que el Canvas no da gratis.

Mi Rol

Autor del ejercicio. Práctica individual de la asignatura de Informática Gráfica.

Estado del Proyecto

Ejercicio académico completado, con los trece pasos en el repositorio de apuntes.

Código y Enlaces

Ruta dentro del repositorio: Apuntes/013-Informatica grafica/002-Vectores/