Data Visualisation for Print

Quick introduction to Raw and InkScape


Let’s say you want to produce a Bubble Chart, Dendrogram or Treemap out of some data you have. You also need to be able to manually edit the output visualization, retouch it and have the ability to export it into large resolutions for your printed newspaper or posters.

Creating Charts with RAW

We decided to use RAW here for two main reasons:

  • RAW is an online tool that is capable of producing non conventional charts, such as Dendrograms, Treemaps, Hexagonal Binnings and Alluvial Diagrams.
  • The output charts from RAW are easily exported into SVG format.

Scalable Vector Graphics (SVG) is an XML-based vector image format. Vector images are composed of a fixed set of shapes, as opposed to raster or bitmap images which are composed of a fixed set of dots. This results in preserving the shapes with high resolution when scaling your image, unlike bitmap images which are usually pixelated when scaled up. We also will see later on that having each shape as a standalone element in the image, gives us more flexibility in editing each shape within our image on its own.

Here is a sample of the charts available in RAW:

One more reason for using RAW, that might be appealing to the hackers among you, is that it is an open source project, and anyone with programming skills can easily add more layouts and features to it.

In our example here, we are going to use the results of the Egyptian referendum in 2011. We formatted the results and put them in the following spreadsheet.

Go the the spreadsheet, and copy the data in the 3rd worksheet. The worksheet is called “Votes, Area and Population”.

Now go to RAW and paste the data there, ash shown below:

Once you paste the data you will see a message there that says, “Everything seems fine with your data! Please continue”. We are now sure that everything is fine so far. You may delete any rows that you do not like to have in your final chart. One important note here, you have to make sure that you have a header row in your spreadsheet (and in the data after pasting it), i.e. the first row contains the name of each column of your data.

Now we are all set to scroll down.

After scrolling down, you will be given a drop down list to choose the layout you want from it. We are going to choose “Bubble Chart” here.

What is a Bubble Chart?

Before explaining Bubble Charts, let's first explore Scatter Plots.

Scatter plots are meant to show the relationship between two variable. One variable is represented in the x-axis while the other is displayed in the y-axis.

You can see the correlation between different sets of data represented by scatter plots here:

Bubble charts are very similar to scatter plots, however, they can represent 3 different variables instead of 2. One variable is represented by the x-axis while the other is displayed by the y-axis, and the third variable is represented by the size of the bubbles in the chart.

Assigning Variable to Axes

Let’s say we want see if there is a relationship between the percentage of the invalid and those who voted with no. We want to see if those who are against the referendum were divided between voting with no and invalidating their votes.

We, thus, are going to drag and drop the first two variables into the x and y boxes, then we will drop the population into the size box, so that the sizes of out bubbles are proportional to the population in each governorate. The labels are matched with the governorates, and we divided Egypt into 5 zones and made sure that the bubbles for the governorates within the same zone are given the same colour here.

Now if we scroll down we are going to see our bubble chart ready. We are given the option to change the colours given to each zone in Egypt. We also set a maximum radius for our bubbles. Setting the radius to a very small number will convert the bubble chart into a scatter plot. Finally, you can set the width and height of your canvas and say whether you want to see the horizontal and vertical grid lines there or not.

If you are happy with the final appearance of your chart, then you are now set to export it into a SVG, PNG or JSON file. You are also given the SVG code in case you want to embed the drawing into the your webpage or blog post. Just copy the code shown in the “Embed in HTML” box and paste it into your blog and the chart should appear there.

For our example here, we need to export the chart into a SVG file to be able to deal with it in InkScape later. Thus, we shall now fill the box underneath the SVG title with a proper filename, let’s say, ‘egypt-votes’ and click on the download button to save it on our computer.

Preparing the SVG File for Print usint InkScape

We now need to download InkScape if we haven't done that already.

InkScape is a Free and Open Source tool for dealing with vector graphics. There are plenty of educational screencasts and videos on InkScape's website. InkScape is similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X, however the latter are not free softwares. In the end, it is up to you to use whichever vector graphics editor you feel more comfortable with.

Now that we have saved installed InkScape, and saved the chart produced by RAW on our computer into the following file, “egypt-votes.svg”, we can open this file using InkScape.

In InkScape you can select any object within your chart, resize it, change its colour, move it around, edit the text in it, etc. After double clicking on the element you it will get selected, now you can resize it using the 8 arrows shown around it, you can also drag it to a different location in your canvas, and to change its colour, you can click on any of the colours shown in the pallet below while having your object selected.

The advanced users can also open the the “XML Editor” from the “Edit” menu and edit the SVG elements of the chart like they edit any XML, as long as they understand the SVG format. You also can add additional elements and text to your chart if you want.

As stated earlier, it is easy to resize the SVG files without sacrificing the quality of the image. In order to use our chart in print, we may want to have it in larger sizes. From the “File”, open the “Document Properties”. There, you can user pick on of the predefined page-sizes, for example, if you know that you are going to print your chart on an A1 page, or you can manually enter a custom size for your chart. You can save your changes now and we are done.

Finally, if you want to send the chart to another user or software that is not capable of dealing with vector images, you can export it into a more common format such as PNG, using the “Export Bitmap” option in the “File” menu.




Share on Facebook Share on twitter