Python Graphics Tutorial

Day 3: Scalable Vector Graphics

svg is an image file format like jpegs, bitmaps, gifs, etc. Jpeg's, bitmaps, and gifs are all composed of pixel data. Collectively they are called raster graphics. Scalable vector graphic are created using computational instructions on how to draw images on the screen. Raster graphics when resized, zoomed in or zoomed out, pixelate, break apart or lose some of their clarity. SVG images do not loose clarity when resized and are therefore ideal for use in responsive design applications that are written for computers, tablets and cell phones. Adobe Illustrator can be used to create scalable vector graphics or you can create them using Python, which is what we will focus on in this lesson.

Pygal is a Python visualization package that we will use to produce scalable vector graphics files.

These files are useful in visualizations that are presented on different sized screens. In this lesson, we will create svg graphs.

Installing PYGAL using pip

Creating your first svg graphic file - a pie chart showing market share for surfboard manufacturers.

  • Run Geany text editor

  • File - New

  • File - Save As. Give file a name with a .py extension.

  • In the editor, key in the program to create the pie chart

  • import pygal

  • pie_chart = pygal.Pie()

  • pie_chart.title='Market Share Surfboard Manufacturers (in%)'

  • pie_chart.add('Jason Stevenson - Js',25.5)

  • pie_chart.add('Channel islands',21.6)

  • pie_chart.add('Firewire',18.3)

  • pie_chart.add('Lost Surfboards',10.2)

  • pie_chart.add('Rip Curl Surfboards',8.2)

  • pie_chart.add('Cannibal',7.5)

  • pie_chart.add('Billiabong Surfboads',6.5)

  • pie_chart.add('O NeilSurfboards',2.2)

  • pie_chart.render()

  • pie_chart.render_to_file('SurfPieChart.svg')

  • Save the file with a .py extension

  • Click on Run and use the browser of your choice.

  • The immediate results are a blank terminal window

When you run the program, you will not immediately see the results of your work. To see the results of your work, you need to de the following:

  • Open up Chrome, Firefox or Internet Explorer

  • Type CTRL + O to open a file

  • Navigate to the folder where you saved the svg file

  • Click on it

  • Click Open

A legend has been created on the left side of the screen. Colors were assigned to each of the surfboard manufacturers.

The pie chart contains a slice that matches the color in the legend and reflects the percentage of market share.

You will notice that the graphic has some animation built in. Move the cursor over one of the pieces of the pie. You should see the name of the company that corresponds to each section of the pie chart and the percentage market share. As you can see, this kind of graphic is much more interesting than a bitmap, jpeg or gif.

Not all browsers show the percentage data when you hover over the graph.