Visualisation playground

US diplomacy by decade?

A world map that shows the number of cables sent to the US from various locations and the number visits of the US president or secretary of state to particular countries and of dignitaries from that country to the US. The cables data comes from the stash released by Wikileaks and contains only a few cables before 2000. Visits to countries that don't exist anymore have been attributed to the country that is on that territory now where possible.

I used the d3.js library?. The width of the lines represents the number of cables (which you can see by hovering over a place) and the colour of a country corresponds to the number of visits (which you can see by hovering over a country). Change the decade by clicking on it in the bottom left corner.

Code available on Github?.

Major US companies compared to African countries?

A map of Africa that shows the GDP of each country and a list of major US companies. Countries are coloured according to their GDP and you can see the exact number by hovering over it. Hover over a company name to see the countries whose cumulative GDP is approximately the same as the market capitalisation of that company.

I again used the d3.js library?. Code available on Github?.

Disparity between income and GDP per capita?

The GDP per capita and the average wage of a person are not the same. But how big is the difference? This map visualises it for 22 countries that I was able to get average income data for (from 2005). Perhaps surprising to see the Philippines next to Germany as the two countries with the highest percentage.

I have implemented an alternative version? that uses D3's force-directed layout to position the labels.

I again used the d3.js library?. Code available on Github?.

Climate at Maya sites?

A map of Mesoamerica showing the location of several thousand Maya sites, precipitation, temperature and elevation. The climate figures are representative for the last 50 years, so not the same conditions as when the sites would have been inhabited.

I again used the d3.js library?. Code available on Github?.

Foreign exchange rates?

Exchange rates of a few major currencies relative to each other. Updates automatically every hour. The implementation is relatively straightforward, but I added some secret sauce to autoarrange the labels so they don't overlap.

Again this is brought to you by the d3.js library?. Code available on Github?.

World debt?

The debts of 172 countries as a percentage of GDP from 1990 to 2011. It's the usual thicket of lines with a twist — click on the graph to change the scale. Probably the only thing that makes this usable at all, otherwise you can't really see anything.

Again this is brought to you by the d3.js library?. Code available on Github?.

Eurozone crisis?

This visualisation, inspired by radar graphs, tries to show the main factors that contribute to the Eurozone crisis. Apart from showing how the situation worsened over time, it also shows how the disparity within the Eurozone increased.

There's also an alternative, less sophisticated version?.

Again this is brought to you by the d3.js library?. Some of the controls use JQuery UI?. Code available on Github?.

Happy Planet Index?

Shows the Happy Planet Index? for countries of Europe. Uses Chernoff faces? to display some other statistics.

Using, as always, the d3.js library?. Code available on Github?.

Gallery?

A simple image gallery that gets the images from Flickr. Based mostly on the d3.js library?. Code available on Github?.

Beta

Image blender?

This is a small demo of image operations in CSS3, in particular masks and opacity. The script grabs two random images from the Flickr feed and overlays them. You can choose whether you want to adjust the opacity of the image on top or the position of the mask transition from transparent to opaque with the slider.

Code available on Github?.

? All graphics and code licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License?

---