As Brexit trade negotiations were dragging on at the start of the year, a lot of the discourse focused on perceived inequities in fishing rights. I felt there was a story in the data that could add depth and detail to the narrative. Despite having the largest Exclusive Economic Zone (EEZ) of all EU countries, and some of the richest fishing grounds, UK fleets are restricted to relatively modest catches.

The Common Fisheries Policy provides EU states with mutual access to each other’s fishing grounds but sets quotas based largely on catch figures from 40 years ago, which today seem arbitrary. Earlier this year, the UK government was pushing to reverse this by proposing a “zonal attachment” model, where quotas would be carved up relative to the abundance of fish in each country’s waters.

I was interested to see what a switch to this model would mean for each country’s fishing prospects. As a dataviz hobbyist and budding D3 developer, this was also an excuse to explore new visual approaches to convey these shifting dynamics.

Diving into the data

Using available European Commission data, the fish caught by each EU state can be readily quantified. Interpreting the source of these fish requires some additional processing.

Each EU state reports its annual landings across a grid of spatial cells, called ICES rectangles - each about 30 x 30 nautical miles in size. By clipping this grid against a map of EEZ polygons, ICES rectangles and their associated catches could be assigned to the country whose waters they fall within. Where cells straddle jurisdictions, I shred catches between countries, proportional to the areal split.

Now, simply aggregating catches within each EEZ approximated what quotas would look like under a zonal attachment model. In contrast, aggregating catches by fleet shows how much the existing quotas diverge from this model. The flows between these two aggregations can be read as “who’s catching whose fish?” by articulating how catches from each EEZ are split across different countries’ fleets. A visual that emphasised these flows promised to tell a compelling story.

One idea was to represent EEZ biomasses on a dot density map, with dots transitioning into geographically arranged catch bars. Another idea was to illustrate catch flows through arrows of varying thickness on a map that would’ve likely resembled the opening sequence of “Dad’s Army.”

Although both alternatives might have looked cool, the geographic component was kind of superfluous and threatened to distract from the analytical objective. In other words, I didn’t care whether fish were flowing between adjacent or more distant countries - just the extent to which they were flowing between countries and the resulting net imports / exports. Therefore, I opted to de-couple the flow component from the map to favour a more orthodox representation of flow - a sankey chart.

Building on the work of others

I built this project in Observable, due to the simplicity of coding, collaborating, and publishing in the same place. For me, Observable is the home of D3 - it’s a combination of gallery, self-contained development environment, sandbox, and collaboration platform. Crucially — as a relative newcomer to this space — it’s a library for learning. It’s quick and straightforward to browse through other people’s work, dig into their code, and decipher the mechanics of their visuals.

For this particular piece, a search for “animated sankey” yielded a raft of examples from an Amelia Wattenberger tutorial, which would form the basis of my sankey template. Further, by porting Elijah Meeks’ particle sankey from Blocks to Observable, I learned some neat JavaScript functions (e.g., getPointAtLength) that helped better control the paths of the particles.

Although sankeys have become a bit hackneyed in recent years, some compelling D3-based variants have breathed new life into the chart form. My main inspiration for the idea came from a NYT article on social mobility bias that conveyed ‘flows’ of black and white boys from different backgrounds into different socio-economic classes. Instead of encoding flows through ribbon thickness, like a traditional sankey, particles flow between the sankey dimension in varying density and frequency. I was struck by how the animation mesmerises, and keeps the reader engaged as the result emerges gradually through the animation’s progress.

By re-mixing and augmenting preceding versions of the chart for my specific objectives, I stumbled upon my own novel twist on the particle sankey. It was important to see how each country’s stock supplements other country’s catches, and the extent to which each country provides vs. takes out. By complementing the particle sankey with marginal bar charts of fish biomass, and by animating each country sequentially, these comparisons could be easily read amid the fanfare of flowing particles.t. For instance, it’s clear Denmark gets a good deal, catching more than the biomass that their fishing grounds produce, while the UK is justified in feeling hard done by, with the majority of UK fish ending up in other country’s nets.

I was pleased with the overall aesthetic of the resulting visual. In particular, how the marginal bar charts melded in with the animation sequence. At the top, the bars (representing fish caught in each country’s waters) are pushed downwards through the EEZ labels and seemingly shred into tiny particles - akin to Banksy’s self-shredding artwork. And as the particles work their way down, they shuffle satisfyingly into their destined lanes - representing the fleet of capture.

Project reflections

Although I set out with specific questions of the data, I relaxed the focus slightly to invite others to ask their own questions of the data, to have fun with the visualisation, and learn some new techniques along the way.

If I wanted to simply communicate flows of fish between countries, a matrix of catches might have been more effective. Or, if I wanted to emphasise discrepancies between zonal attachment and existing quotas, a diverging bar chart of deficits would have worked. However, it’s likely that a fraction of people would have clicked on the visualisation, and I wouldn’t be writing this article.

That’s what excites me about data visualisation with D3. There’s unlimited possibility for customisation and innovation, that can turn the heads of people who would otherwise be indifferent to a topic. I’m in constant awe of what people make on Observable and plan to spend the remainder of lockdown digging into their code to try and chip away at the magic.