Debt to GDP Ratio – R and SVG

2015_dbtgdp

Introduction:

This is a quick tutorial on how we can manipulate a Scalable Vector Graphic (SVG) in R. R does have the ability to save plots, maps and graphics in various formats (including SVG) but this post is more about how you can quickly generate a very effective graphic using R and an external SVG file. The most obvious question is why not use R to do everything. Well R is great and does everything so well it does lack some power when it come to interactivity. Though i will not cover interactivity in this post i will show you how easy it is to  generate effect using SVG.

Ground Work:

  1. A map, for this example we will use an SVG map of Europe.
  2. Download the data from OECD website for Debt to GDP ratio.
  3. Inkscape.

Map for Europe:

We will download the map for Europe using the wikimedia link. Note that the link allows to download multiple formats but we need SVG format. The file is also available from my github [1] link. The file titled original.svg is the original file that is downloaded from the wiki link. I made  following edits to this original file. We will discuss these edits in the next section.

Editing the SVG file:

A SVG file is just like a XML file with tags. If we open the downloaded file in notepad or notepad++ we will be able to see the structure of the file. We do not need to know everything that is present. All we need is to understand how the countries in the SVG file are being identified.

If we read the svg file under the tag <desc>  we will see the following statement “Every country has an id which is its ISO-3116-1-ALPHA2 code in lower case”.  Now scroll to the tag <path> we observe every path has an id. for e.g. id=”pt” would mean the shape of  country Portugal. Similarly, id= “it” would mean shape for country Italy. We will use the id tags to style the empty map and add colors. You will also note that the original map is missing names of the countries. I have made the following edits to the svg map in inkscape and notepad and saved it as original_names.svg.

  •  Update the border colors by using replace all in notepad++ the stroke from #ffffff to #4d4d4d.
  • Update the colors of all the remaining countries to light grey.
  • Edit the width and height from 645 and 690 pixels respectively to 600 and 450 pixels.
  • Add names of countries using inkscape
  • Add a legend in inkscape.

Data:

For the purpose of this post we will use the debt to GDP ratio data downloaded from the OECD website. The same is available on my github [1].

Manipulating the data in R:

Once we download the data, we can start R studio and perform various manipulations. The entire code that is used for generating the map is available on github[1] under the file main.R. The readme file on my github repository provides an explanation of the R code used to manipulate the data.

Editing the SVG file:

Once we have generated the output which is a css style tag and saved it in a csv format. All we need to do is copy the css style tages and paste them in svg file. Following are the list of style tags we require for the 2015 data:

#at { fill: #af8dc3 !important }
#be { fill: #af8dc3 !important }
#fi { fill: #d9f0d3 !important }
#fr { fill: #af8dc3 !important }
#de { fill: #e7d4e8 !important }
#gr { fill: #762a83 !important }
#il { fill: #e7d4e8 !important }
#it { fill: #af8dc3 !important }
#lu { fill: #7fbf7b !important }
#nl { fill: #e7d4e8 !important }
#pt { fill: #af8dc3 !important }
#sk { fill: #7fbf7b !important }
#es { fill: #af8dc3 !important }
#ee { fill: #1b7837 !important }
#si { fill: #e7d4e8 !important }

Note the 2 digit country codes. We have used the fill color to fill up the shapes of the SVG and !important would give priority to this fill color. In case CSS encounters the same id again in the svg file it will ignore that hex color since we mention !important here. These are now pasted within the style tags. The complete 2015 svg file is also available on my gihub[1] page. If we omit the !important here the SVG file will use the default fill color assigned under the path tags.

What next:

This post is inspired by a New York Times visualization [2]. The visualization has added text and more explanation to their SVG. We can do this using inkscpae. Further, the visualization is interactive. An enthusiastic and curious mind can serach the web for making SVG interactive or changing opacity when mouse moves over a particular shape. Many of the effects can be achieved using the id tags within the style tags.

Note that R provides tools such as leaflet package that can be used to generate the same and we can go a step further by integrating it with Shiny APP. However, when i use leaflet package i was unable to completly remove the underlying states, cities, roads etc which are visible when you zoom in. Since, SVG is an image we can zoom in and out but we will not see any details of the map.

Leaflet is an amazing Package and we will explore its power in some other post.

Reference:

  1. github – https://github.com/atmajitg/svg_europe
  2. New York Times Visualization: http://www.nytimes.com/interactive/2010/04/06/business/global/european-debt-map.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s