Visualisations from the Imperial College interview

I was given 8 days to prepare the interview and visualisations with the following instructions and data:

Attached are annual data on the availability of 19 mutually-exclusive and collectively-exhaustive food items, which together characterise the total caloric availability for human consumption for all countries in the world. They are in the units of per capita calories per day. The data are from the UN Food and Agriculture Organization's Food Balance Sheets. They are provided to you largely as downloaded without any cleaning or pre-processing. You have also been provided with data on national income (per capita gross domestic product, adjusted for inflation and purchasing power) and urbanisation (share of national population who live in urban areas). Please design, and to the extent you have time implement, a system that allows visualisation of some of the important features of these data with emphasis on the distinction between composition of calories (i.e. the types of food available) vs. total amount of calories available. You may want to also consider some interesting features, for example food items that are related or contrasting (meat, animal fats, offals, etc; vegetables, fruits, etc; fish, aquatic products, etc; and so on) OR how diet may change in relation to national income and/or urbanisation. You can use the medium and platform of your choice for implementation.


Link FAO data
Link GDP/Urbanisation data

I did 5 interactive visualisations - they are all optimised for the Google Chrome web browser (results might vary on other browsers, so Chrome is really recommended):

Link to animated treemap and doughnut

(Link to corresponding interactive code) This one was fairly basic, but useful tool to look through the data in a systematic way.

Link to missing data on a zoomable world map

This one was added to show I could do GIS with a cylindrical projection so as to preserve the surface area of countries on the map. (Link to corresponding interactive code)

Link to hierarchical treemap

This one is offers an interesting hierarchical overview on the data (click on the top part to come back to the main view one you have zoomed in). (Link to corresponding interactive code)

Link to the wealth, urbanisation, and food of nations

This one was inspired by the famous TED talk by Prof Hans Rosling, and based on some D3JS example. (Link to corresponding interactive code)

Link to cards of countries food-data shuffled in 3D space

This one is using a mix of D3JS and 3d webgl technology. One needs a computer with some graphic card inside to visualise it (any relatively recent laptop or desktop should work). If you have a mouse you can left click and move to rotate, right click and move to pan, and use the mouse wheel to zoom in/out. If you have a touch screen, you can use standard touch screen gestures to navigate the 3d environment. You can simply click on a card, and the camera will automatically travel and zoom on it. Notice than, the 3d cards representing all the data point of each country are moved in different positions in space corresponding to different classifications. If you press the "helix" button, it is by alphabetical order of countries names. If you press helix2, it is by region as defined in the data. And so on... (Link to corresponding interactive code)