Designing a custom data visualisation
How I solved the 14th Data For A Cause challenge — and won!
Custom data visualisations can provide a unique and tailored view on a specific topic. But what do you do when you want to create a visualisation that goes beyond the standard charts and maps?
The 14th Data For A Cause challenge was to analyse and visualise data from the Global Fishing Watch, an organisation that promotes ocean sustainability by tracking and sharing data about global fishing activities.
The visualisation I created explores the relationship between countries’ economic wealth and their fishing activities in other countries’ waters.
This is the story of how I went from a 1.5 GB dataset to the final visualisation made primarily with the JavaScript library P5.js.
Data wrangling in R
The dataset consisted of 6,929,885 rows — one row for each observation of a vessel at a given position at a given date. Just opening the 1.5 GB file in Excel would be a challenge, so I needed a more suitable tool to work with the data.
Luckily, I had recently finished a great online course on R taught by Andrew Ba Tran. This allowed me to wrangle and inspect the data in many ways. However, I was struggling to find interesting patterns or a specific story to tell.
Remember the brief
Olga Tsubiks, the challenge organiser, encouraged participants to focus on analysing fishing activities of richer countries in poorer countries’ waters.
But how to identify rich and poor countries? I used Gross Domestic Product (GDP) per capita data from The World Bank and the CIA . Even though GDP is a problematic metric, it does provide a concrete measure of a country’s income.
Then I summarised the fishing data, moving forward with the 20 countries fishing most in other countries’ waters, and the 20 countries with the highest fishing activities from other countries. Adding GDP numbers for each country allowed me to plot every country according to fishing activities and GDP per capita:
This looked promising: a nice spread, an interesting cluster of countries in the lower left corner, and a couple of outliers. But I wanted to know more about each country, and was still looking for inspiration on how to present the data in an efficient and compelling way.
Inspiration
More or less by accident, I came across the visualisation The Geography of Human Rights by Federica Fragapane, which explores the relationships between human rights violations and GDP per capita.
In the visualisation, each country is represented by an elegant, elaborate visual symbol, representing human rights data for that country. The symbol is placed on a grid according to population (vertical axis) and GDP (horizontal axis). Could I employ a similar approach?
Back to basics: sketching!
When I want to come up with visual ideas it doesn’t help me much to look at lines of code or rows of numbers. It was time to walk away from the computer and think about possibilities.
I wanted to find a representation of each country that was meaningful within the context of fishing. If I used fishing vessels to represent each country, how would that work? I started sketching.
An idea started to emerge. The “cargo” on a vessel could represent the amount of fishing carried out by that country in other countries’ waters. A similar shape in the water below the vessel could represent the amount of fishing carried out by other countries in that country’s waters.
A proxy for quantity of fish
The dataset provided didn’t include information on how much fish was caught by each country. However, the dataset did include the average tonnage (size) of the ships used, as well as information on how many days each ship had been fishing.
Combining the size of a ship with the time it spends fishing could give a pretty good impression of how much fish might have been caught. This is, of course, a very rough estimate, but still better than nothing.
In the final visualisation, the width of the cargo square represents average vessel tonnage, while the height represents the sum of days fished by all vessels. Consequently, the area of the cargo square can be understood as an indication of the amount of fish that might have been caught.
Ship design in Illustrator
Since the length of the ship would be different from one country to the next, I needed to create a simple and somehow generic vessel that could easily be extended.
I gathered some inspirational illustrations of fishing vessels and started to create a generic vessel in Adobe Illustrator.
In order to get the shape of the vessel into code I needed each point of the illustration defined as an x/y coordinate. I exported the graphics as an SVG file, opened the file in a text editor, and copied the x/y points into my JavaScript code. This was a quick and dirty solution that worked well for the simple shape, as long as I only used straight lines.
I ended up reducing the complexity of the vessel, since I felt the details weren’t necessary for recognizing it as a fishing vessel. In addition, I removed the blue colour since I wanted to use colour coding for the cargo area, and didn’t want the vessel to draw too much attention.
Sketching and iterating in code
The visualisation I ended up with could have been made in Adobe Illustrator or Sketch. However, there were several reasons I chose not do draw it by hand:
- Drawing the graphics manually is tedious, and involves a high risk of doing mistakes
- Using Illustrator does not allow me to create any interactions, not even a simple hover state
- I needed to iterate on the visualisation by adjusting and testing variables such as the width and height of the entire graph and the individual elements, and test how many countries I could include while keeping the visualisation readable. In code, this is as simple as changing a single number.
Once I had a basic idea of what I wanted to create, coding would allow me to quickly draw lots of vessels, creating interactions and iterate on all aspects of the visualisation. And I knew a tool that would be fit for the task.
p5.js to the rescue
p5.js is a JavaScript library which aims to make coding accessible for designers, artists and other non-developers. p5 is quite easy to get started with, compared to the popular but more demanding D3.js. A nice possibility with JavaScript is to combine different libraries, and I used D3 for scaling the axes in the visualisation.
The first thing I did in P5 was to create a single vessel that I could programmatically change. The vessel expands from the middle of the ship so that all points of the vessel geometry moves left or right based on the size of the cargo.
Next, I made the vessel into a function so that I could create lots of different vessels based on data from different countries.
Lastly, I spent quite a bit of time adjusting sizes, scales, colours, text and hover information. I chose to include the legend in the visualisation itself, since there was available space around the vessel representing Norway, the topmost vessel.
Finally — the result
Below you can see the final result as an image. You may also check out the interactive version, where you can hover over each vessel to see the numbers for each country.
The story continues below the image.
Needless to say, I was very happy to receive the 1st place, competing with many great contributions.
If I had more time, I would have improved on the interactive part of the visualisation. Ideally, the user should be able to “zoom in” on a given vessel and get more information about where the country was fishing, and which countries fished most in the country’s waters.
One challenge with the visualisation is that it is very large — you need a large screen to see all of it and still be able to see the details. I’m not sure if and how such a visualisation could work better on small screens, so that’s something to investigate in the future.
What does the visualisation reveal about global fishing?
Different people will probably see different patterns and stories in the visualisation. Here are some of the things I see:
- There is a lot of red at the top and blue at the bottom of the visualisation. This indicates that countries with high GDP per capita fish a lot in other countries’ waters, while the poorer countries see a lot of fishing activity from other countries
- Russia and China are interesting outliers; they are quite low on the GDP axis, but have a high level of fishing activity in other countries. China is by far the country that spent most time fishing in 2016, but the average vessel tonnage is small compared to Russia
- I was a bit surprised to see that Spain and France are fishing a lot in other countries’ waters, and that UK see a lot of fishing activities from other countries
- Most countries seem to have increased their fishing activities from 2012 to 2016, while Korea Rep.(and Argentina) fished less in 2016 than 2012.
These observations make me ask new questions and want to learn more, which in my opinion is a great outcome of a data visualisation. This is in line with Moritz Stefaner’s argument that a data visualisation doesn’t have to tell one single story, but can rather work as a macroscope — a device to investigate an infinitely complex world.
What did I learn about creating custom visualisations?
Taking part in challenges like Data For a Cause provides a great opportunity for learning. Here are some of the lessons I learned from the process:
- Remember to step away from the computer
- Look for inspiration — both in the data, the domain (e.g. fishing), and in other people’s work
- Spend time coming up with ideas, sketching, and iterating
- Find the tools that will allow you to create what you are looking for
- Take a chance and try something new!
