New Zealand Trade Visualisation

My latest University project was to create a visualisation of choice with another class member.

Stephen and I came across a complete set of data from New Zealand to all other trading countries. I must point out here that NZ does a comparatively good job to the rest of the world in terms of data availability. Some countries that will remain unnamed (*cough* Australia *cough*) provide their data in PDF form 🙁

StatsNZ Exports Datatable

This huge table was just screaming out to be visualised. We took inspiration from Minard’s effective French wine export map as well as from a global trade visual. Both of these visualisations use the line width to indicate the quantity of exports between countries. Lines start off thick and then thin out as it branches off into countries. Our goal became to take this static idea and present it in a dynamic way using HTML5 technologies.

Minard - French Wine Exports Map

By combining StatsNZ data and country locations collected using Google’s geolocation API, we were able to produce a JSON datastructure that could easily be adapted to support the visualisation of other countries. The following diagram breaks down the process:

532exports Application Flow

And the final product!

It can also be viewed live in my testing folder here: Export Visualisation

Special thanks to my group member Stephen and to StatsNZ, and the Google Maps API for their awesome data.

Update: The code is now available on github.

Published by


Senior software engineer with extensive experience in enterprise software development targeting wholesale financial organisations and cloud solution providers.

5 thoughts on “New Zealand Trade Visualisation”

  1. What do the dashed lines mean? Also, how did you prevent some lines from just branching directly from NZ, yet others go through other countries?

    1. What do the dashed lines mean?

      Which dashed lines are those?

      how did you prevent some lines from just branching directly from NZ, yet others go through other countries

      We made ‘pivots’ which have a parent and children pivots. Lines go through these pivots which are created in the editor view. Line widths are weighted based on all of the destination countries that eventuate from a given pivot.

  2. Interesting. my main question about this is : would it be possible to automate the computation of “pivots” (I mean the points where the lines are turning). If yes, you could automate the process of creating such maps for lots of countries, which would bring huge values.

    1. Yes it would be possible, but not easy. We considered this when doing the project but left it to future work.

      One idea was to find some shipping route API and somehow follow pivots along those.

      There could be some algorithm that say groups countries by some parameter such as continent and then trails a pivot back to the source.

      There maybe some better grouping method that we failed to consider.

  3. Hi – I am preparing some resources for teaching international trade to high school students and this really caught my eye. What year is the data for please? Do you have an up to date version? Thanks…

Comments are closed.