Creating a SVG Map: Women in the Parliament

Nathan Yau‘s book, Visualize This, is a book for learning by reading and doing. The theory and concepts explained are stated clearly and colloquially, as if it were a great master class, in the same way that the examples are explained step by step, and detailing the reason behind each line of code.

I liked several graphs, their practical application and the way they allow you to visualize the data. I have already included another example (inspired by the book) corresponding to the use of a heatmap.

In this case, take as an example the practical case shown in the section Map Countries from Chapter 8: Visualizing spatial relationship about how to process countries using SVG map.

1 SVG File for World

SVG files are XML files. It can be easily edit it using a text editor. So, you can edit the color into the file, the XML tells the browser what to show, such as the color and the images.

2 Coloring the countries

I used the designer.colors function in R (in the fields package) to make a linear scale of 256 ‘new’ colors.

Ncolors <- 256
ColRamp <- designer.colors(n=Ncolors, col=c("#CCEBC5", 
"#A8DDB5", "#7BCCC4", "#4EB3D3", "#08589E", "#08589E"))

3 Generate hexadecimal colors

for (i in 1:nrow(wParliament2016)) {
 for (j in 1:nrow(Countries)) {
wParliament2016$Country_Code[i] <- ifelse(
    wParliament2016$Country_Name[i] == Countries$Name[j], 
    Countries$Code[j], wParliament2016$Country_Code[i] ) 

}#for j
}#for i

wParliament2016[] <- 0

#Set up the vector that will save the CSS code per 
CSS <- rep("", nrow(wParliament2016))

#Divide the range of Life Expectancy in Ncolor bins
Bins <- seq(max(wParliament2016$X2014, na.rm=TRUE), 
     min(wParliament2016$X2014, na.rm=TRUE), length=Ncolors)


#Loop through all countries. Asign a color.
#Save the CSS text in a vector
for (i in 1:nrow(wParliament2016)) {
 #Find which Bin is closest to value of Life Expectancy
 ColorCode <- ifelse(!$X2014[i]), 
    wParliament2016$X2014[i]))], "white") 
 #Country.ID is the alpha-2 country code
 CSS[i] <- paste(".", tolower(wParliament2016$Country_Code[i]), 
 " { fill: ", ColorCode, " }", sep="")

write(CSS, "output2.txt", sep="\n")

4 Edit SVG file

The next step is edit the SVG file for the map, in order to change fill atributted with the correspondent hexadecimal color according for women representation that each country have.

.af { fill: #67C7D3 }
.al { fill: #86CFBD }
.dz { fill: #4BB0D2 }
.as { fill: #C8EAC2 }
.ad { fill: #1A71AE }
.ao { fill: #217BB4 }
.ag { fill: #B9E4BA }
.ar { fill: #2A87BC }

5 Edit the SVG map using Inkscape

Finally, the last step is edit the resultant map using Inkscape (or Illustrator) in order to add a title, source of the data and extra information to the image.

6 Final result



Leave a Reply

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

You are commenting using your 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