Creando gráficos vectoriales con Python

Cuando tratamos con datos y queremos representarlos en gráficos, en ocasiones necesitamos generar esos gráficos en un formato que permita escalar a cualquier resolución y sin perder calidad. Si además necesitamos cierta interactividad, poder crear representaciones gráficas en el formato SVG es una muy buena opción.

Los gráficos vectoriales están compuestos por texto en XML, lo que permite que cualquier navegador que respete los estándares W3C los represente sin problema.

Pandas y Pygal para gráficos SVG en Python

Para la demostración, vamos a utilizar un dataset que nos permita mostrar distintos tipos de representaciones gráficas del mismo. En este caso, utilizaré un dataset de Pokémon, donde podremos ver las características de 800 pokémon de 6 generaciones distintas.

Utilizaremos Pandas para crear un dataframe con esta estructura, con el que trabajaremos en los siguientes pasos.

Para generar los gráficos en SVG utilizaremos la librería de Python Pygal.

Empecemos con algo sencillo, vamos a realizar una gráfica simple para ver cuántos pokémon hay de cada generación.

Para ello, haremos un agrupado por generación y sacaremos el número de pokémon de cada una de ellas con este simple código.

pie_chart = pygal.Pie()
pie_chart.title = 'Pokemon by Generation'
for id, row in data.groupby(["Generation"]).size().reset_index().iterrows():
  pie_chart.add("Generation %s" % row["Generation"], row[0])
pie_chart.render_to_file('pie_chart_by_generation.svg')

Bien, ahora podemos profundizar un poco más y realizar una representación que represente un grupo mayor de datos. En ella, mostraremos la distribución de los principales atributos agrupados por tipo de Pokémon. Para ello, generaremos una gráfica del tipo Box Plot que nos permitirá ver de forma sencilla todos estos datos agrupados con el siguiente código:

for this_attribute in ["HP", "Attack", "Defense"]:
  box_plot = pygal.Box(box_mode="tukey")
  box_plot.title = 'Pokemon Attribute: %s' % this_attribute

  for this_type in data["Type 1"].unique():
    box_plot.add(this_type, data[data["Type 1"]==this_type]["HP"].values)
  
  box_plot.render_to_file('box_plot_attribute_%s.svg' % this_attribute)

Lo que nos permite ver las gráficas de los tres atributos por separado.

Si lo que necesitamos es poder comparar los atributos principales entre ciertos Pokémon, crearemos un gráfico del tipo radar que nos permita ver estos datos de una forma sencilla, de la siguiente manera:

x_labels = ['HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed']

radar_chart = pygal.Radar(width=600, height=500)
radar_chart.title = 'Pokemon Attributes'
radar_chart.x_labels = x_labels
radar_chart.add('Bulbasaur', data[data["Name"]=="Bulbasaur"][x_labels].values[0])
radar_chart.render_to_file('radar_plot_attribute_Bulbasaur.svg') 
display(SVG('radar_plot_attribute_Bulbasaur.svg'))

Este tipo de gráficos nos permite hacer comparaciones de datos de una forma sencilla y comprensible, mostrando un grupo de datos comparativos amplios a la vez. Por ejemplo, podemos comparar los atributos de estos cuatro Pokémon legendarios para ver sus diferencias de un vistazo.

Si lo que queremos es ver la media de cada uno de los atributos de los Pokémon, pero esta vez agrupados por tipo, de forma que nos facilite, por ejemplo, encontrar qué tipo tiene, de media, el ataque o la defensa más altos, podemos mostrarlo de la siguiente forma:

x_labels = ['HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed']
dot_chart = pygal.Dot(x_label_rotation=30, width=600, height=600)
dot_chart.title = 'Pokemon attributes by Type'
dot_chart.x_labels = x_labels
for id, row in data.groupby(["Type 1"])[x_labels].mean().reset_index().iterrows():
  dot_chart.add(row["Type 1"], row[x_labels])

dot_chart.render_to_file('dot_chart_attribute_by_type.svg') 

Pero si lo que queremos ver es cómo son los atributos de un Pokémon concreto respecto al resto, podemos representarlo de la siguiente manera, lo que nos permitiría incluso comparar atributos entre diferentes Pokémon de forma sencilla.

pokemon_names = ["Pikachu", "Dragonite"]
x_labels = ['HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed']

for pokemon_name in pokemon_names:
  this_pokemon = data[data["Name"]==pokemon_name]

  gauge = pygal.SolidGauge(inner_radius=0.70)
  gauge.title = '%s stats vs others Pokemon' % pokemon_name
  for this_label in x_labels:
    gauge.add(this_label, [{'value': this_pokemon[this_label].values[0], 'max_value': data[this_label].max()}])

  gauge.render_to_file('gauge_%s_vs_all.svg' % pokemon_name) 

Conclusión

De esta forma, con representaciones de nuestros datos en gráficos SVG, podemos representar esos datos a cualquier tamaño y escala, sin preocuparnos por tener una resolución específica y obteniendo un resultado óptimo.

Además, herramientas como Pygal, nos permiten integrar este tipo de gráficos no sólo en Dashboards o presentaciones puntuales, también en todo tipo de intranets, webapps o páginas webs donde podemos adaptarlas sin problemas al entorno visual y respetando el diseño original.

¡Esto es todo! Si este post te ha parecido interesante, te animamos a visitar la categoría Data Analytics para ver todos los posts relacionados y a compartirlo en redes. ¡Hasta pronto!