Creating vector graphics with Python

When we deal with data and we want to plot them in graphs, sometimes we need to generate those graphs using a format that allows scaling to any resolution and without losing quality. If we also need some interactivity, being able to create graphical representations in SVG format is a great option.

Vector graphics are composed of text in XML, which allows any browser that respects W3C standards to render them without any problem.

Pandas and Pygal for SVG graphics in Python

For this demo, we are going to use a dataset that allows us to show different types of graphical representations of it. In this case, I will use a Pokémon dataset, where we will be able to see the characteristics of 800 Pokémon from 6 different generations.

We will use Pandas to create a dataframe with this structure, with which we will work in the following steps.

To generate SVG graphics we will use the Python library Pygal.

Let’s start with something easy, we are going to make a simple graph to see the number of pokémon of each generation.

To do this, we will group by generation and we will get the number of pokémon of each one of them with this simple code.

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')

Now we can go a little deeper and make a plot that represents a larger group of data. We will show the distribution of the main attributes grouped by Pokémon type. To do this, we will generate a Box Plot type graph that will allow us to see in a simple way all these grouped data with the following code: 

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)

This allows us to see the graphs of the three attributes separately.

If what we need is to be able to compare the main attributes between certain Pokémon, we will create a radar type graph that allows us to see this data in a simple way, as follows:

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'))

With this kind of graph, we can compare data in a simple and understandable way, showing a large comparative data set at one time. For example, we can compare the attributes of these four legendary Pokémon to see their differences at a glance.

If what we want is to see the average of each of the Pokémon’s attributes, but this time grouped by type, so that we can find, for example, which type has, on average, the highest attack or defense, we can display it in the following way:

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')

But if what we want to see is how the attributes of a particular Pokémon are compared to the others, we can represent it in the following way, which would even allow us to buy attributes between different Pokémon in a simple way.

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) 

Conclusion

Using SVG graphics representations of our data, we can represent these data at any size and scale, without worrying about having a specific resolution and obtaining an optimal result.

In addition, tools such as Pygal, allow us to integrate this type of graphics not only in Dashboards or specific presentations, but also in all types of intranets, webapps or web pages where we can adapt them without problems to the visual environment and respecting the original design.

And that is all! If you found this post interesting, we encourage you to visit the Data Analytics category to see all the related posts and to share it on your networks. See you soon!