En este artículo estaré explicando los componentes finales de nuestra infografía en formato SVG. La infografía fue creada con la ayuda de un modelo de Inteligencia Artificial sobre la base de una imagen de una infografía vista en Internet.

En los artículos anteriores me extendí bastante sobre las ventajas del formato SVG y de por qué usarlo en lugar de pedirle a un modelo que haga la infografía como la queremos. No voy a extenderme en eso.

En este artículo sí voy a insistir en la importancia de conocer lo que estamos haciendo. Permítanme hacer menos densa esta explicación de código con una pequeña historia.

Héctor Ricardo García fue un exitoso empresario de los medios de comunicación en Argentina. Además de fundar uno de los diarios más vendidos del país, fue un pionero de la televisión nacional. García atribuía su éxito a haber empezado desde abajo y pasado por todas las áreas relacionadas con la publicación, tanto en la imprenta como en la redacción.

Comentaba García que la gran ventaja de eso era que, cuando un empleado le decía que algo no podía hacerse, él le demostraba cómo hacerlo. Nunca más ese empleado volvía a discutirle.

El reverso de la moneda de García era Henry Ford. No sabía absolutamente nada de ingeniería. Se limitaba a pedirle a los empleados lo que se le ocurría y presionaba para conseguirlo. La Ford estuvo años sin obtener ganancias.

Volviendo al tema que nos ocupa, los modelos de Inteligencia Artificial funcionan mejor con los García que con los Ford. Cuanto más sabes del tema sobre el que estás consultando, mejores resultados obtendrás. Por eso insisto tanto en la descripción del código SVG.

Explicando los componentes de una infografía

El gráfico de barras

Las instrucciones ubicadas entre las líneas 148 y 159 dibujan un gráfico de barras compuesto por 4 barras de colores diferentes, sobre dos ejes. Encima de las barras habrá una línea de tendencia ascendente con una flecha en la punta. Es el clásico icono que se usa para representar crecimiento o análisis de datos.

La línea 148 indica como posición de inicio del gráfico las coordenadas X=511, Y=295 del lienzo principal. Estas pasan a ser las coordenadas 0,0 para el resto del dibujo.

Dibujo de los ejes

De acuerdo a las instrucciones de las líneas 149 y 150, se indica un path que traza una línea vertical y una horizontal que actuarán como ejes de los gráficos.

• M-43 35: Indica que se comenzará a dibujar en el extremo izquierdo del eje horizontal.
• H47: Dibuja una línea horizontal hasta X=47, lo que equivale a 90 píxeles hacia la derecha. Esta línea será el eje horizontal del gráfico.
• M-43 35: Mueve el inicio del dibujo al punto de inicio de la línea anterior.
• V-39: Dibuja una línea vertical hasta Y=-39 (sube 74 píxeles). Este será el eje vertical del gráfico de barras.
• class=»ln»: Aplica las reglas CSS que establecimos para las líneas al principio del código (sin relleno y esquinas redondeadas).
• stroke=»#708991″ stroke-width=»3″: Las líneas tendrán un color gris azulado oscuro y un grosor de 3 píxeles.

Las barras del gráfico

La barra de color azul

Es la más baja y las instrucciones para dibujarla están en la línea 151.

Se hace con un rectángulo que se traza con las siguientes coordenadas:

• x=»-32″ y=»15″: Establece la esquina superior izquierda en (-32, 15).
• width=»14″ height=»20″: Indica que el rectángulo tendrá 14 píxeles de ancho y 20 píxeles de alto.
• fill=»#66aee0″: Rellena el rectángulo con un color azul.
• stroke=»#4d99c8″: Establece un color azul oscuro para las líneas del rectángulo.

Barra de color verde

Le sigue en tamaño y sus características se describen en la línea 152.

El rectángulo de la barra tendrá las siguientes características:

• x=»-12″ y=»2″: Dado que la barra es más alta, empieza en las coordenadas (Y=2).
• width=»14″ height=»33″: Se mantiene el ancho del rectángulo anterior, pero, como dijimos, es más alta.
• fill=»#70c99d» stroke=»#4cae86″: Rellena la barra con un color verde claro y uno un poco más oscuro para el borde.

Barra amarilla

La línea 153 indica el trazado de la tercera barra. También se trata de un recuadro con las siguientes coordenadas.

• x=»8″ y=»-10″: El rectángulo empieza aún más arriba (Y=-10).
• width=«14» height=«45»: Se mantiene el mismo ancho, pero se cambia el alto.
• fill=»#f2bf51″ stroke=»#dca93f»: Se mantiene la misma combinación de un color amarillo claro para el relleno y uno más oscuro para el borde.

La barra naranja

La línea 154 traza la última de las barras. Usa estas coordenadas.

• x=»28″ y=»-27″: Empieza más alto que las demás.
• width=»14″ height=»62″: Seguimos con el mismo ancho, pero un mayor alto para el rectángulo.
• fill=»#e99a62″ stroke=»#d98252″: Mismo esquema de color. Naranja claro para el relleno y naranja un poco más oscuro para el borde.

Si prestaste atención a la posición de las coordenadas X, verás que hay un espaciado de 20 píxeles entre cada una.

La línea de crecimiento

Se describe en el path de las líneas 155 y 156. Dibuja una línea quebrada que conecta los puntos sobre cada barra, indicando la tendencia.

• M-39 5: El dibujo empieza en (-39, 5), sobre la primera barra.
• L-17-8: Se traza una línea hasta (-17, -8), que es un punto ubicado sobre la segunda barra.
• L1-2: Tiende una línea hasta el punto (1, -2), que está sobre la tercera barra.
• L22-24: Lleva la línea hasta (22, -24), encima de la cuarta barra.
• L43-34: Con esta línea que va hasta (43, -34), llegamos hasta la última barra.
• stroke=»#e0ae3f» stroke-width=»3″: Asigna el mismo color y ancho para la línea de tendencia.

La flecha en la punta

El path de la línea 157 finaliza este dibujo con la punta de flecha que termina en la línea de crecimiento.

• M36-34: Lleva el origen del dibujo a (36, -34), una ubicación justo antes del final de la línea.
• H43: Traza una línea horizontal hasta X=43, que es el punto final de la línea de tendencia.
• V-27: Dibuja una línea vertical hasta Y=-27, que es un largo de 7 píxeles.
• stroke=»#e0ae3f» stroke-width=»3″: Asigna el mismo color y ancho para la línea de tendencia.
• class=»ln»: Asigna los estilos indicados para las líneas al principio del código.

En este gráfico vimos algunas de las posibilidades que tiene SVG para crear gráficos estadísticos para presentaciones. En los siguientes artículos terminaremos con los símbolos y empezaremos a modificar nuestro diseño.

Artículo original