-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (96 loc) · 5.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Global fishing</title>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<style>
body {
background-color: #e7f0f3;
font-size: 16px;
color: #1D3A75;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
a:link {
color: #1D3A75;
}
.ingress {
font-size: 20px;
font-weight: 600;
}
.outer {
overflow: scroll;
background-color: #e7f0f3;
width: 1px;
height: 1px;
margin-top: 0px;
margin-right: auto;
margin-left: 0px;
}
.content_column {
position: absolute;
left: 0px;
right: 0px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 1400px;
margin-right: auto;
margin-left: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.content {
position: relative;
margin-right: auto;
max-width: 1000px;
margin: 10px;
margin-left: 100px;
}
h1 {
color: #1D3A75;
font-family: 'Abril Fatface', cursive;
font-size: 42px;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
</style>
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.dom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="libraries/d3.min.js"></script>
<script src="sketch.js"></script>
</head>
<body class="body">
<div class="outer">
<div class="content_column">
<div class="content">
<h1>Fishing in other countries' waters</h1>
<p class="ingress">Global fishing is big business, and it is common to fish in other countries waters, both legally and illegally. How does the economic wealth of a country relate to its fishing activities?</p>
<p>The diagram below explores the relationship between fishing activity in 2016 and a country's GDP per capita for the same year. The diagram includes the 20 countries fishing most in other countries' waters, and the 20 countries with the highest fishing activities from other countries.</p>
<p>The visualisation is designed by <a href="https://twitter.com/jonolave">Jon Olav Eikenes</a> for the <a href="https://www.olgatsubiks.com/data-for-a-cause"> Data for a Cause Challenge</a> in February 2019. The challenge was to analyse and visualize data from the <a href="https://globalfishingwatch.org/">Global Fishing Watch</a>, which is an organisation that promotes ocean sustainability by tracking and sharing data about global fishing activities.</p>
</div>
<div class="canvas_container" id="sketchwrapper">
</div>
<div class="content">
<p><i>UPDATE April 19, 2019: 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. As a result, the blue box indicating fishing activities in Norwegian waters has been reduced.</i></p>
<p>Hover over a vessel to see details for each country, or see a <a href="global-fishing.png">still image image</a> of the visualization.</p>
<p class="ingress">Supplementary information</p>
<p>The dataset does not say anything about how much fish each country has catched. However, the average tonnage of the ships used by a given country, and how many days those ships have been fishing, might give us a rough indication. Therefore, the blue and red squares in the diagram provides an indication of the amount of fish that might have been cought. Average tonnage was calculated from all fishing days.</p>
<p>GDP data is from <a href="https://data.worldbank.org/indicator/ny.gdp.pcap.cd">The World Bank</a>. Numbers from 2016 were used if available, otherwise numbers from the latest year with available data. For Taiwan I used <a href="https://www.cia.gov/library/publications/the-world-factbook/rankorder/2004rank.html">GDP data from the CIA</a>.</p>
<p>Questions or comments? Find me on Twitter <a href="https://twitter.com/jonolave">@jonolave</a>.</p>
</div>
</div>
</div>
</body>
</html>