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 reMarkable sketch showing the idea of representing each country as a vessel.
A proxy for quantity of fishThe 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.
The legend, which is integrated in the final visualisation.
Ship design in IllustratorSince 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.
An early sketch made 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 codeThe 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 mistakesUsing Illustrator does not allow me to create any interactions, not even a simple hover stateI 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 rescuep5.
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.
Screen recording from a p5.
js sketch demonstrating how the vessel can be changed programmatically: the x-position of the mouse controls the cargo width, and the y-position controls the height of the fished area box.
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 resultBelow 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.
The final visualisation.
See the interactive version at https://jonolave.
github.
io/global-fishing/.
Note: since the initial visualisation, the numbers for Svalbard and Jan Mayen have been excluded from Norway’s fishing activities, to be in line with the Global Fishing Watch’s original data set.
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 countriesRussia 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 RussiaI 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 countriesMost 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 computerLook for inspiration — both in the data, the domain (e.
g.
fishing), and in other people’s workSpend time coming up with ideas, sketching, and iteratingFind the tools that will allow you to create what you are looking forTake a chance and try something new!.