Circle Plot Code

Before you even start reading this, you deserve a warning. This post exists mostly so I can keep track of my code and ideas. I am putting it online because it seems conceivable that some one on the internet might find it useful.

At the bottom of this post, you can download the latest version of the processing code that I used to create my circle plots. It is also the first program I have written since high school, and it still needs a lot of work. That said, it does most of what I need it to do. It is only 72 lines long and I tried to keep it readable, so hopefully you can see what I am trying to do pretty quickly.

To use it, you first need to download processing and download my sketch. The program relies on two external files. First, you need to load a font into the sketch. The font that I use is called Silkscreen. It is free to download and use. Second, you need to create a .csv file with your data, name it “data.csv” and add it to your sketch. The variables in the file control (in order): country name, position on x axis, position on y axis, size of the circle, and colour (blue to red).

The program is incomplete. The biggest problems are:

  • All variables in the .csv file (except the country name) must be scaled 0-100 outside of the program (100 is the max value and 0 is the min). I have been doing this in SPSS. This means that all of the positioning is relative, not absolute.
    • The program needs a way to internally scale the raw numbers so that SPSS is not needed.
    • The program needs a way to decouple the x and y values from the size of the sketch, which could allow for plotting raw numbers without scaling them against each other.
  • The font doesn’t scale with the image size. A larger font should be used when the image gets to a certain size.
    • A simple if statement will fix this, but I wanted to fix the previous problems first because they might complicate this fix.
  • The output (in the window that appears when you run the program) doesn’t match the image that is produced and saved in the sketch’s folder. The image is there, but the output window doesn’t show it.
    • This only started happening after I downloaded the most recent beta, version 0154.
  • I would like a way to show changes over time, perhaps by showing a circle for each year, starting with high transparency, and then making the circles less transparent as they move through time.
    • This would involve changing the arrays and I haven’t thought it through yet. I would probably add a year variable to the end of each line in the .csv file.
  • It might be nice to be able to colour each circle after a region, so that all of Europe, for example, was the same colour. It would make comparisons easier.
    • If I did this then the current colour scaling code would need to be either replaced to added on to.
    • This might also necessitate adding another variable, because the current colour variable must be scaled 0-100 and links to an attribute that exists for each circle.

    The code was last updated on Nov 1, 2008.

    Download the code, as a processing file, here.

    High-res Here is another image I made with processing (and pixelmator). The x-axis is population density. The y-axis is GDP per capita. The bottom left holds the low values. The colour of each circle is determined by the country’s Polity IV score (democracy score). Blue is more democratic and red is more authoritarian. The size of each circle is determined by the size of the country’s population. The inlay blows up the chaos of the bottom left corner and scales down the radius of the circles to improve visibility. The sizes and placement of the circles within the inlay are correct relative to each other. Click the image to download the much larger version (2000x2000 px).

    Here is another image I made with processing (and pixelmator). The x-axis is population density. The y-axis is GDP per capita. The bottom left holds the low values. The colour of each circle is determined by the country’s Polity IV score (democracy score). Blue is more democratic and red is more authoritarian. The size of each circle is determined by the size of the country’s population.

    The inlay blows up the chaos of the bottom left corner and scales down the radius of the circles to improve visibility. The sizes and placement of the circles within the inlay are correct relative to each other.

    Click the image to download the much larger version (2000x2000 px).

    High-res I recently started playing around with Processing and this is the result of my first experiment. I wanted to generate a picture that would show general trends in 4 variables across many countries in an intuitive way. I looked at 43 countries in sub-Saharan Africa. The variable selection (this time) was almost random. The x-axis is the number average number of children in a family in 2003. It ranges from 2 to 8. The y-axis is the total amount of ODA in 2003, ranging from 10 million to 5 billion. The colour is tied to the Polity IV scores for each country: blue is more democratic, red is less. Finally, the size of the circle is the population size. Nigeria is the huge circle. A few countries were too small to show up and labels were not generated for them. The Democratic Republic of the Congo is the circle all alone at the top. Its ODA in 2003 was apparently 5 billion. That seems way too big to me, but debt forgiveness (and other things you may not think of as aid) are included in ODA. Still, its placement may be due to an error in the data set. Click the picture to get a higher quality version of the picture. Kottke made the font. I would love suggestions or criticism. I will post the code after I clean it up.

    I recently started playing around with Processing and this is the result of my first experiment. I wanted to generate a picture that would show general trends in 4 variables across many countries in an intuitive way. I looked at 43 countries in sub-Saharan Africa.

    The variable selection (this time) was almost random. The x-axis is the number average number of children in a family in 2003. It ranges from 2 to 8. The y-axis is the total amount of ODA in 2003, ranging from 10 million to 5 billion. The colour is tied to the Polity IV scores for each country: blue is more democratic, red is less. Finally, the size of the circle is the population size. Nigeria is the huge circle. A few countries were too small to show up and labels were not generated for them.

    The Democratic Republic of the Congo is the circle all alone at the top. Its ODA in 2003 was apparently 5 billion. That seems way too big to me, but debt forgiveness (and other things you may not think of as aid) are included in ODA. Still, its placement may be due to an error in the data set.

    Click the picture to get a higher quality version of the picture. Kottke made the font. I would love suggestions or criticism. I will post the code after I clean it up.