Skip to content

Instantly share code, notes, and snippets.

@databayou

databayou/.block

Last active May 31, 2019
Embed
What would you like to do?
Venn diagram with transitions
license: mit

This is a venn diagram to explain the changing vocabulary of bycatch and discards compiled by FAO.

I crated a venn diagram in which, once you hover over a set, it highlights the shape and displays the meaning of the word. It displays how I personally view the terms in reference to the other bycatch meanings.

The final result can be viewd here on my research webpage: Fisheries Visualizations. This visualization and research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

For more information Databayou

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Terms Used for Bycatch and Discards in Fisheries</title>
<style>
.tooltip {
position: absolute; /* it could be relative if all over */
top: 680px; /*the tooltip starts at the corner*/
left: 10%;
width: 600px;
height: 120px;
text-align: left;
padding: 10px;
font: 16px Arial, Verdana, sans-serif;
color: gray;
background: white;
z-index: 2000;
}
#buttons {
position:relative;
top:50%;
left:50%;
}
.year {
background-color: gray;
color: white;
font-size : 16px;
border-radius: 2em;
border-style: solid;
}
#venn {
width: 710px;
margin: 0 auto;
}
p {
font-family: Arial, Verdana, sans-serif;
}
h1 {
font-size: 26px;
text-align: center;
font-family: verdana;
color: gray;
}
/* unvisited link */
a:link {
color: #3CBCBC;
text-decoration: none;
}
/* visited link */
a:visited {
color: #54C571;
}
/* mouse over link */
a:hover {
color: #736AFF;
}
/* selected link */
a:active {
color: #3CBCBC;
}
</style>
<script type="text/javascript" src="rouvennbycatch.json"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1>Terms Used for Bycatch and Discards</h1>
<div id="buttons">
<button name="year1994"
class="year"
type="button"
value="19977774"
onclick="nineData()"; >1994</button/>
<button name="year2004"
class="year"
type="button"
value="2004"
onclick="twoData()"; >2004</button/>
</div>
</div>
<div id="venn">
<script type="text/javascript" src="roundsqvenn.js"></script>
<script type="text/javascript"></script>
</div>
</body>
var tooltipdiv = d3.select("#venn").append("div")
.attr("class", "tooltip")
.style("opacity", 1);
//Make an SVG Container
var svgContainer = d3.select("#venn").append("svg")
.attr("width", 800)
.attr("height", 600);
//Rectangles added
var rectangles = svgContainer.selectAll("rect")
.data(ninetyfour)
.enter()
.append("rect");
var rectAttributes = rectangles
.attr("rx", function (d) {return d.cx * 0.8;})
.attr("ry", function (d) {return d.cy * 0.8;})
.attr("x", function (d) {return d.x * 4.3 * 0.8; })
.attr("y", function (d) {return d.y * 4.3 * 0.8; })
.attr("width", function (d) { return d.width * 4.3 * 0.8 ; })
.attr("height", function (d) { return d.height * 4.3 * 0.8 ; })
.style("fill", function (d) { return d.color; })
.style("fill-opacity", "0.3")
.on("mouseover", function (d) {
d3.select(this)
.style("fill-opacity", "0.5")
.style("stroke", "white") // set the line colour
.style("stroke-width", 5) // set the stroke width
//move front
// var sel = d3.select(this);
// sel.moveToFront();
tooltipdiv.html( '<b>' + d.title + '</b>' + ":" + "</br>" + '<font color="black">' + "&quot;" + d.meaning + "&quot;" + '</font>')
//'<b>'+d.sdfsadf+'</b>' to make part of tooltip bold
tooltipdiv.transition()
.delay(300)
.duration(200)
.style("opacity", 1);
})
.on("mouseout", function (d) {
d3.select(this)
.style("fill-opacity", "0.3")
.style("stroke", "none") // set the line colour
.style("stroke-width", "none") // set the stroke width
tooltipdiv.transition()
.delay(2000)
.duration(1500)
.style("opacity", 0)
});
var text = svgContainer.selectAll("text")
.data(ninetyfour)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)* 4.3 ) * 0.8; })
.attr("y", function(d) { return ((d.y * 4.3) + (d.height/2.5)* 4.3 ) *0.8; })
.text( function (d) { return d.title; })
.attr("font-family", "sans-serif")
.style("font-size", "18px")
.attr("fill", "black")
//.attr("stroke", "white")
.attr("text-anchor", "middle");
function twoData() {
//Rectangles added
var rectangles = svgContainer.selectAll("rect")
.data(thousandfive)
.transition()
.duration(3000)
.delay(1000);
//move to the front
/* d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
*/
var rectAttributes = rectangles
.attr("rx", function (d) {return d.cx * 0.8; })
.attr("ry", function (d) {return d.cy * 0.8; })
.attr("x", function (d) {return d.x * 4.3 * 0.8; })
.attr("y", function (d) {return d.y * 4.3 * 0.8; })
.attr("width", function (d) { return d.width * 4.3 * 0.8; })
.attr("height", function (d) { return d.height * 4.3 * 0.8; })
.style("fill", function (d) { return d.color; })
.style("fill-opacity", "0.3")
var text = svgContainer.selectAll("text")
.data(thousandfive)
.transition()
.duration(3000)
.delay(1000);
var textLabels = text
.attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)*4.3) * 0.8 ; })
.attr("y", function(d) { return ((d.y * 4.3) + (d.height/1.8)*4.3) * 0.8 ; })
.text( function (d) { return d.title; })
.attr("font-family", "sans-serif")
.style("font-size", "18px")
.attr("fill", "black")
//.attr("stroke", "white")
.attr("text-anchor", "middle");
}
function nineData() {
//Rectangles added
var rectangles = svgContainer.selectAll("rect")
.data(ninetyfour)
.transition()
.duration(3000)
.delay(1000);
//move to the front
/* d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
*/
var rectAttributes = rectangles
.attr("rx", function (d) {return d.cx * 0.8;})
.attr("ry", function (d) {return d.cy * 0.8;})
.attr("x", function (d) {return d.x * 4.3 * 0.8; })
.attr("y", function (d) {return d.y * 4.3 * 0.8; })
.attr("width", function (d) { return d.width * 4.3 * 0.8; })
.attr("height", function (d) { return d.height * 4.3 * 0.8; })
.style("fill", function (d) { return d.color; })
.style("fill-opacity", "0.3")
var text = svgContainer.selectAll("text")
.data(ninetyfour)
.transition()
.duration(3000)
.delay(1000);
var textLabels = text
.attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)*4.3) * 0.8; })
.attr("y", function(d) { return ((d.y * 4.3) + (d.height/2.5)*4.3) * 0.8; })
.text( function (d) { return d.title; })
.attr("font-family", "sans-serif")
.style("font-size", "18px")
.attr("fill", "black")
//.attr("stroke", "white")
.attr("text-anchor", "middle");
}
ninetyfour =[
{"name":"Unobserved Fish Mortality","title":"Unnobserved Fish Mortality","x":110,"y":140,"cx":20,"cy":20,"width":60,"height":20,"color":"#800000","meaning":"Death resulting from fishing that cannot be documented from observations of the on-board catch (e.g., deaths resulting from fish passing through webbing, freeing themselves from hooks, ghost fishing,etc.)."},
{"name":"Catch","title":"","x":10,"y":10,"cx":20,"cy":20,"width":0,"height":0,"color":"#9cbed8","meaning":""},
{"name":"Debris","title":"","x":30,"y":140,"cx":20,"cy":20,"width":0,"height":0,"color":"#006600","meaning":""},
{"name":"Trash fish","title":"","x":110,"y":10,"cx":20,"cy":20,"width":0,"height":0,"color":"#800080","meaning":""},
{"name":"Target Catch","title":"Target Catch","x":10,"y":20,"cx":20,"cy":20,"width":80,"height":120,"color":"#ff0066","meaning":"The catch of a species or species assemblage which is primarily sought in a fishery, such as shrimp, flounders, cods"},
{"name":"Landings","title":"","x":30,"y":50,"cx":20,"cy":20,"width":0,"height":0,"color":"#00ffff","meaning":""},
{"name":"Black Fish","title":"Black Fish","x":40,"y":40,"cx":20,"cy":20,"width":120,"height":90,"color":"#556667","meaning":"Non-reported catch."},
{"name":"Grey Fish","title":"Grey Fish","x":30,"y":60,"cx":20,"cy":20,"width":130,"height":60,"color":"#0000FF","meaning":"Catch which is misreported as to area or species"},
{"name":"Discarded Catch","title":"Discarded Catch","x":70,"y":80,"cx":20,"cy":20,"width":100,"height":40,"color":"#ffff00","meaning":"That portion of the catch returned to the sea as a result of economic, legal, or personal considerations."},
{"name":"Bycatch","title":"Bycatch","x":60,"y":5,"cx":20,"cy":20,"width":120,"height":90,"color":"#FF0000","meaning":"Discarded catch plus incidental catch."},
{"name":"Prohibited Species","title":"Prohibited Species","x":150,"y":60,"cx":20,"cy":20,"width":20,"height":30,"color":"#FF00FF","meaning":"Any species which must, by law, be returned to the sea."},
{"name":"Slipped catch","title":"","x":90,"y":20,"cx":20,"cy":20,"width":0,"height":0,"color":"#008000","meaning":""},
{"name":"Incidental Catch","title":"Incidental Catch","x":90,"y":30,"cx":20,"cy":20,"width":80,"height":40,"color":"#00ff00","meaning":"Retained catch of non-targeted species"},
{"name":"High Grading or Rejects","title":"High Grading or Rejects","x":50,"y":100,"cx":20,"cy":20,"width":80,"height":15,"color":"#808000","meaning":"The discard of a marketable species in order to retain the same species at a larger size and price. The discard of a marketable species in order to retain another species of higher value. The retention of only those species or individuals within a species complex having the greatest market value; less valuable species or individuals are discarded."}
];
thousandfive = [
{"name":"Unobserved Fish Mortality","title":"","x":110,"y":160,"cx":20,"cy":20,"width":0,"height":0,"color":"#800000","meaning":""},
{"name":"Catch","title":"Catch","x":10,"y":10,"cx":20,"cy":20,"width":160,"height":140,"color":"#9cbed8","meaning":"Catch includes all living biological material retained or captured by the fishing gear, including corals, jellyfish, tunicates, sponges and other non-commercial organisms, whether brought on board the vessel or not. Plant material is not included."},
{"name":"Debris","title":"Debris","x":30,"y":120,"cx":20,"cy":20,"width":40,"height":10,"color":"#006600","meaning":"This term is used in the restricted sense of non-organic materials caught during fishing operations. Examples include rocks, sand, mud and plastic bottles. Organic materials such as dead shells, dead coral and plant materials (seaweed) are also considered debris."},
{"name":"Trash fish","title":"Trash fish","x":90,"y":30,"cx":20,"cy":20,"width":90,"height":20,"color":"#800080","meaning":"This term is not generally used in the study but refers to non-commercial or very low-value fish, usually caught by a trawl fishery. Trash fish is usually discarded unless collected at sea, or landed for aquaculture feed or fishmeal manufacture."},
{"name":"Target Catch","title":"Target Catch","x":20,"y":20,"cx":20,"cy":20,"width":80,"height":70,"color":"#ff0066","meaning":"This term refers to catch of a species, a particular size or sex, or an assemblage of species that is primarily sought in a fishery, such as shrimp in a shrimp fishery or mature female fish in a roe fishery. The definition of targeted catch within a fishery is not static, as in a multispecies fishery, the mix of species targeted and caught may change over time."},
{"name":"Landings","title":"Landings","x":30,"y":30,"cx":20,"cy":20,"width":50,"height":80,"color":"#00ffff","meaning":"Landings refer to the portion of the total catch brought ashore or transhipped from the vessel. "},
{"name":"Black Fish","title":"","x":40,"y":100,"cx":20,"cy":20,"width":0,"height":0,"color":"#556667","meaning":""},
{"name":"Grey Fish","title":"","x":30,"y":110,"cx":20,"cy":20,"width":0,"height":0,"color":"#0000FF","meaning":""},
{"name":"Discarded Catch","title":"Discarded Catch","x":80,"y":15,"cx":20,"cy":20,"width":80,"height":95,"color":"#ffff00","meaning":"Discards, or discarded catch is that portion of the total organic material of animal origin in the catch, which is thrown away, or dumped at sea for whatever reason. It does not include plant materials and post harvest waste such as offal. The discards may be dead, or alive."},
{"name":"Bycatch","title":"Bycatch","x":100,"y":30,"cx":20,"cy":20,"width":60,"height":10,"color":"#FF0000","meaning":"Bycatch is the total catch of non-target animals. Discards are not a subset of bycatch since the target species is often discarded."},
{"name":"Prohibited Species","title":"","x":150,"y":110,"cx":20,"cy":20,"width":0,"height":0,"color":"#FF00FF","meaning":""},
{"name":"Slipped catch","title":"Slipped catch","x":90,"y":20,"cx":20,"cy":20,"width":30,"height":20,"color":"#008000","meaning":"This term is applied to catches (usually purse-seine catches) that are released in the water without being taken on board the vessel. Slipped catches are considered to be discards. Quantities of slipped fish are difficult to estimate."},
{"name":"Incidental Catch","title":"Incidental Catch","x":120,"y":80,"cx":20,"cy":20,"width":30,"height":20,"color":"#00ff00","meaning":"This term is used in the context of rare incidents or events such as catches of marine mammals, turtles or seabirds. Incidental catch is generally expressed in numerical terms rather than in terms of weight. Incidental catch is usually discarded and is considered as a discard."},
{"name":"High Grading or Rejects","title":"","x":50,"y":150,"cx":20,"cy":20,"width":0,"height":0,"color":"#808000","meaning":""}
];
leg = [
{"name":"Unobserved Fish Mortality","color":"#800000","x":100,"y":40,"width":20,"height":20},
{"name":"Catch","color":"#9cbed8","x":100,"y":60,"width":20,"height":20},
{"name":"Debris","color":"#006600","x":100,"y":80,"width":20,"height":20},
{"name":"Trash fish","color":"#800080","x":100,"y":100,"width":20,"height":20},
{"name":"Target Catch","color":"#ff0066","x":100,"y":120,"width":20,"height":20},
{"name":"Landings","color":"#00ffff","x":100,"y":140,"width":20,"height":20},
{"name":"Black Fish","color":"#556667","x":100,"y":160,"width":20,"height":20},
{"name":"Grey Fish","color":"#0000FF","x":100,"y":180,"width":20,"height":20},
{"name":"Discarded Catch","color":"#ffff00","x":100,"y":200,"width":20,"height":20},
{"name":"Bycatch","color":"#FF0000","x":100,"y":220,"width":20,"height":20},
{"name":"Prohibited Species","color":"#FF00FF","x":100,"y":240,"width":20,"height":20},
{"name":"Slipped catch","color":"#008000","x":100,"y":260,"width":20,"height":20},
{"name":"Incidental Catch","color":"#00ff00","x":100,"y":280,"width":20,"height":20},
{"name":"High Grading or Rejects","color":"#808000","x":100,"y":300,"width":20,"height":20}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.