31:Tb7b,Chart = {yield html ` ${styles}

Fish flow among EU States
By @benjamesdavis

...Based on ICES landings data (2016), in which each EU state reports its catches across a grid of spatial cells.

By clipping this grid against the Exclusive Economic Zone (EEZ) polygon of each state, we can infer the country of origin of landed fish, and link this with the nationality of the fleet that caught them.

1200k tonnes (49%) of EU catches come from UK waters

...of which 34% is caught by UK fleets.

...and the rest is split between 5 other EU states

${showMap(mapColor)}

where fish are caught

who's catching them

` drawChart();}32:T2a67,function drawChart() { // button var markProgress = 0; let currentSimId = 0; ///////////////////////////////////////////////////////////////////////// //////////////////////////// Canvas ///////////////////////////////////// ///////////////////////////////////////////////////////////////////////// const wrapper = d3.select("#wrapper") .append("svg") .attr("viewBox",[0, 0, 330, 330]) .attr("width", 300) .attr("height", 300) const bounds = wrapper.append("g") .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`) ///////////////////////////////////////////////////////////////////////// //////////////////////////// Element groups ////////////////////////////// ///////////////////////////////////////////////////////////////////////// bounds.append("g").attr("id","sankey") bounds.append("g").attr("id","particles") bounds.append("g").attr("id","stock-bars") bounds.append("g").attr("id","catch-bars") bounds.append("g").attr("id","catch-text") bounds.append("g").attr("id","EEZ-labels") ///////////////////////////////////////////////////////////////////////// //////////////////////////// Scales ///////////////////////////////////// ///////////////////////////////////////////////////////////////////////// const yScale = d3.scaleLinear() .domain([0,1]) .range([0, dimensions.boundedHeight]) .clamp(true) const xScale = d3.scaleLinear() .domain([0,countryIDs.length-1]) .range([0, dimensions.boundedWidth]) const linkLineGenerator = d3.line() .y((d,i) => i * (dimensions.boundedHeight / 5)) .x((d,i) => i <= 2 ? xScale(d[0]) : xScale(d[1]) ) .curve(d3.curveMonotoneX) const yTransitionProgressScale = d3.scaleLinear() .domain([0.35, 0.65]) .range([0,1]) .clamp(true) ///////////////////////////////////////////////////////////////////////// //////////////////////////// Draw Sankey //////////////////////////////// ///////////////////////////////////////////////////////////////////////// const linkOptions = d3.merge( //For every EEZ countryIDs.map(startID => ( //For every fleet countryIDs.map(endID => ( //Return array new Array(6).fill([startID, endID]) )) )) ) const links = d3.select("#sankey").selectAll(".category-path") .data(linkOptions) .enter().append("path") .attr("class", "category-path") .attr("id", d => `EEZ${d[0][0]}`) .attr("d", linkLineGenerator) .attr("stroke-width", dimensions.pathWidth) .attr("opacity", 1); //List of paths & ids to reference for particle tracing let linksData = []; d3.selectAll(".category-path").each(function(d){ let id = `${d[0][0]} > ${d[0][1]}` linksData.push({id: id, path: this}); }) sankeyLabels(d3.select("#EEZ-labels").append("g").attr("id", "sankey-label-bottom"), dimensions.pathWidth, dimensions.labelHeight, x, dimensions.boundedHeight-20, "sankey-label-bottom") sankeyLabels(d3.select("#EEZ-labels").append("g").attr("id", "sankey-label-top"), dimensions.pathWidth, dimensions.labelHeight, x, 0, "sankey-label-top") let pathLength = linksData[0].path.getTotalLength() ///////////////////////////////////////////////////////////////////////// //////////////////////////// Draw Particles ///////////////////////////// ///////////////////////////////////////////////////////////////////////// let sims = [] //Draw static stock-bar background d3.select("#stock-bars").selectAll(".static-bar") .data(EEZstocks) .join("rect") .attr("class", "static-bar") .attr("id", function(d,i){return countryCodes[i]}) .attr("y", d => -reverseY(d.stock)) .attr("x", (d,i) => x(i)) .attr("height", d => reverseY(d.stock)) .attr("width", dimensions.pathWidth) .attr("rx",2) .style("fill", "rgba(211, 211, 211,0.6)") let f2 = d3.format(".4s") d3.select("#stock-bars") .append("g").attr("id", "stock-pct") .selectAll("text") .data(EEZtonnage2) .join("text").attr("id", function(d,i){return countryCodes[i]}) .attr("x", (d,i) => x(i) + dimensions.pathWidth/2) .attr("y", d => d.EEZ == "United Kingdom" ? -reverseYtonn(d.stock) - 24 : -reverseYtonn(d.stock) - 8) .text(d => Math.round(d.stock/1000)) .style("text-anchor", "middle") .style("fill", "#C2C2C2") .style("font-size", 13.5) .style("font-family", "Lato") .append("tspan") .attr("dy","1.2em") .attr("x",0) .text(d => `${d.EEZ == "United Kingdom" ? "(k tonnes)" : ""}`) .style("font-size", 12) //Draw catch pct text d3.select("#catch-text") .selectAll("text") .data(fleetLandingsPct(simulatedLandings),(d,i) => i) .enter() .append("text") .text(d => f(d[1])) .attr("x", (d,i) => x(i) + dimensions.pathWidth/2) .attr("y", d => y(d[0]) + 18) .style("text-anchor", "middle") .style("fill", "#C2C2C2") .style("font-size", 13.5) .style("font-family", "Lato") .style("opacity", 0); //Update markers function updateMarkers(tick, payoutInterval, elapsed, EEZ, maxSims) { //If there are still sims to payout, add either 1 or 2 sims to the data store, depdning on how big the EEZ stock is //(payoutInterval) if (mutable currentSimId < maxSims) { sims = [ ...sims, ...d3.range(payoutInterval < 1 ? 2 : 1).map(() => generateSim(elapsed, EEZ, simulatedLandings, currentSimId)) ] } //Recompute the stacked bar chart segments let stackedLandings = stackLandings(simulatedLandings) .map(d => (d.forEach(v => v.index = d.index), d)) //Re-bind circles to data const particles = d3.select("#particles").selectAll(".marker-circle") .data(sims, d => d.id) //Create circles for new sims particles.enter().append("circle") .attr("class", "marker marker-circle") .attr("r", 2.3) .style("opacity", 1) .style("fill", d => colorScale(d.EEZ)) //Remoe spent sims particles.exit().remove() const markers = d3.selectAll(".marker") //Update circle positions markers.each(function(d){ let path = linksData.filter(l => l.id == d.linkID)[0].path d.current = ((elapsed - d.startTime) / simSpeed) * path.getTotalLength() * d.speed d.currentPos = path.getPointAtLength(d.current); }) markers .attr("cx", d => d.currentPos.x + d.xJitter) .attr("cy", d => d.currentPos.y); //Remove spent sims from data store sims = sims.filter(d => ( d.currentPos.y < pathLength - dimensions.labelHeight/2 )); ///////////////////////////////////////////////////////////////////////// //////////////////////////// Draw EEZ Stock Bars //////////////////////// ///////////////////////////////////////////////////////////////////////// d3.select("#stock-bars").selectAll(".shrinking-bar") .data(EEZstocks) .join("rect") .attr("class", "shrinking-bar") .attr("y", d => -reverseY(d.stock)) .attr("x", (d,i) => x(i)) .attr("height", d => reverseY(d.stock)) .attr("width", dimensions.pathWidth) .attr("rx",2) .style("fill", (d,i) => colorScale(i)); ///////////////////////////////////////////////////////////////////////// //////////////////////////// Draw Catch Bars ////////////////////////// ///////////////////////////////////////////////////////////////////////// d3.select("#catch-bars").selectAll("g") .data(stackedLandings) .join("g").attr("id", d => `${whiteSpace(d.key)}-segments`) .selectAll("rect") .data(v => v) .join("rect") .attr("x", (v,i) => x(countryNames.indexOf(v.data.fleet))) .attr("y", v => y(v[0])) .attr("height", v => y(v[1]) - y(v[0])) .attr("width", dimensions.pathWidth) .style("fill", (d,i) => colorScale((countryIDs.length-1) - d.index)) .attr("rx",3) d3.select("#catch-text").selectAll("text") .data(fleetLandingsPct(simulatedLandings), (d,i) => i) .attr("y", d => y(d[0]) + 18) .text(d => Math.round(d[1]/1000)); //Update the progress of the ultimate mark, to know when to trigger the next EEZ markProgress = d3.min(sims,d => d.currentPos.y); } ///////////////////////////////////////////////////////////////////////// ///////////////// Loops /////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// let EEZ = 0 highlightEEZ(countryNames[EEZ]) function loopEEZs() { // let particleAnimations = function(){ let maxSims = EEZstocks[EEZ].stock sims = []; //Clear sims data-store mutable currentSimId = 0; let duration = 180; let payoutInterval = duration / maxSims; let tick = 0; markProgress = 0; //Fade catch pct text in if (EEZ == 0) { d3.select("#catch-text").selectAll("text") .transition().delay(simSpeed).duration(2500).style("opacity", 1); } let ticker = d3.timer( function(elapsed){ tick ++ updateMarkers(tick, payoutInterval, elapsed, EEZ, maxSims) let circlesComplete = markProgress >= pathLength - (dimensions.labelHeight/2) - 5; //if all circles are dealt and there are more more EEZs to go, move onto next EEZ if (EEZstocks[EEZ].stock <= 0 && circlesComplete && EEZ < 8) { ticker.stop(); setTimeout(function(){loopEEZs(EEZ++)},1000); // //Highlight focal EEZ labels // d3.selectAll(".sankey-label-top").select("text").style("fill","#D3D3D3"); // d3.selectAll(".sankey-label-top").select("rect").style("stroke","#D3D3D3"); // let focalLabel = d3.select("#sankey-label-top").select(`#${countryCodes[EEZ]}`) // focalLabel.select("text").style("fill","grey"); // focalLabel.select("rect").style("stroke","grey"); }; //if all circles are dealt and there are no more EEZs if (EEZstocks[EEZ].stock <= 0 && circlesComplete && EEZ == 8) { ticker.stop(); interactions(); } }) } //Colour each EEZ feature on iteration, then run particle animations highlightEEZ(countryNames[EEZ], particleAnimations) } loopEEZs() }33:T1172,interactions = function(){ let stockBars = d3.select("#stock-bars").selectAll("rect"); let stockBarLengths = d3.selectAll("#stock-bars").selectAll("rect").nodes().map(d => d.getTotalLength()); muteGlobe2() //Stock-bar overlay d3.select("#stock-bars").append("g") .attr("id", "static-bar-overlay-group") .selectAll(".static-bar-overlay") .data(EEZstocksStatic) .join("rect") .attr("class", ".static-bar-overlay") .attr("id", function(d,i){return countryCodes[i]}) .attr("y", d => -reverseY(d.stock) - 30) .attr("x", (d,i) => xScaleOverlay(i)) .attr("height", d => reverseY(d.stock) + 30) .attr("width", xScaleOverlay.bandwidth()) // .style("stroke","black") .style("fill","transparent") //Fade colours back stockBars.transition().duration(2000) .style("fill", (d,i) => colorScale(i)); let stockBarOverlay = d3.select("#static-bar-overlay-group") .selectAll("rect") stockBarOverlay .on("mouseover", function(){ let selectedEEZ = d3.select(this).data()[0].EEZ let EEZindex = countryNames.indexOf(selectedEEZ) // hoverColor(EEZindex); d3.select("#descWrapper").style("opacity",1) descText(EEZindex); descText2(EEZindex); //Add colour to tooltip figures d3.select("#EEZtonnesPct").style("color", colorScale(EEZindex)) d3.select("#catchPct").style("color", colorScale(EEZindex)) d3.select("#stock-pct").select("#" + this.id + "").style("fill", colorScale(EEZindex)) //Mute non-focal EEZs d3.selectAll(".static-bar:not(#" + this.id + ")").style("fill","rgba(211, 211, 211,0.7)"); d3.selectAll(".sankey-label-top:not(#" + this.id + ")").select("text").style("fill","#D3D3D3"); d3.selectAll(".sankey-label-top:not(#" + this.id + ")").select("rect").style("stroke","#D3D3D3"); //Bring selected EEZ to start of segment array stackLandings.order(reorderArray(d3.range(countryNames.length), EEZindex)); // d3.selectAll(".stock-pct") let testData = stackLandings(simulatedLandings).map(d => (d.forEach(v => v.key = d.key), d)); d3.select("#catch-bars").selectAll("g") .data(testData) .selectAll("rect") .data(v => v) .attr("x", (v,i) => x(countryNames.indexOf(v.data.fleet))) .attr("y", v => y(v[0])) .attr("height", v => y(v[1]) - y(v[0])) .style("fill", function(d) { if (selectedEEZ == d.key){return colorScale(EEZindex)} else {return "rgba(211, 211, 211,0.6)"}; }); d3.select("#catch-text").selectAll("text") .data(simulatedLandingsTonnage.map(d => d[selectedEEZ]),(d,i) => i) .attr("y", d => yTonn(d) + 15) .text(d => d > 0 ? Math.round(d/1000) : null) .style("fill", colorScale(EEZindex)) .style("font-size", 12.5) .style("font-weight", 500); highlightEEZ(selectedEEZ); }) .on("mouseleave", function(){ muteGlobe(); stackLandings.order(d3.stackOrderReverse); d3.select("#descWrapper").style("opacity",0) d3.select("#stock-pct").selectAll("text").style("fill", "#C2C2C2") //Un-mute all EEZs d3.selectAll(".static-bar").style("fill", (d,i) => colorScale(i)); d3.selectAll(".sankey-label-top").select("text").style("fill","grey"); d3.selectAll(".sankey-label-top:not(#" + this.id + ")").select("rect").style("stroke","grey"); let testData = stackLandings(simulatedLandings).map(d => (d.forEach(v => v.key = d.key), d)); d3.select("#catch-bars").selectAll("g") .data(testData) .selectAll("rect") .data(v => v) .attr("x", (v,i) => x(countryNames.indexOf(v.data.fleet))) .attr("y", v => y(v[0])) .attr("height", v => y(v[1]) - y(v[0])) .style("fill", (d,i) => colorScale(countryNames.indexOf(d.key))) d3.select("#catch-text").selectAll("text") .data(fleetLandingsPct(simulatedLandings), (d,i) => i) .attr("y", d => y(d[0]) + 18) .text(d => Math.round(d[1]/1000)) .style("fill", "#C2C2C2") .style("font-size", 13.5) .style("font-weight", 400); }); } 34:T400,generateSim = function(elapsed, EEZ, simulatedLandings, currentSimId) { mutable currentSimId++ const EEZname = countryNames[EEZ] const fleetProbDist = fleetProbabilities[EEZname] //Simulate a random draw from the probability distribution const fleet = d3.bisect(fleetProbDist, Math.random()) const fleetName = countryNames[fleet] //Deduct the new sim from the EEZ stocks EEZstocks[EEZ]['stock']-- //Add the new sim to the stacked bar chart dataset let speed = (Math.random() + 2) / 2.5 setTimeout(function(){simulatedLandings[fleet][EEZname] ++},simSpeed * (1/speed)) setTimeout(function(){simulatedLandingsTonnage[fleet][EEZname] += totalTonnage/numParticles},simSpeed * (1/speed)) return { id: mutable currentSimId, EEZ: EEZ, fleet: fleet, linkID: `${EEZ} > ${fleet}`, startTime: elapsed + getRandomNumberInRange(-0.1, 0.1), xJitter: getRandomNumberInRange(-14, 14), speed: speed } } 35:T495,EEZgroups = { //Return an object for each unique EEZ var EEZgroups = [], flags = []; for (var i=0; i < data.length; i++) { if (flags[data[i]['EEZ']]) continue; //Skip to next iteration if country has already been added flags[data[i]['EEZ']] = true; //Else flag that country has been added EEZgroups.push({EEZ: data[i]['EEZ']}); //Push new country to data } //Cycle through EEZ countries EEZgroups.map(function(d){ countryNames.map(function(country) { d[country] = 0; //Create a key: value pair for each fleet //Swap value for landings let EEZ_Data = data.filter(t => t.EEZ == d.EEZ && t.fleet == country) for (var i=0; i < EEZ_Data.length; i++) { d[country] = +EEZ_Data[i].landings } }); }); //Convert landings to % within EEZ EEZgroups.map(function(d){ //Calculate the sum of landings for each EEZ let values = Object.values(d) values.shift() let total = d3.sum(values) let fleet = Object.keys(d) for (fleet in d) { if (d[fleet] != [d.EEZ]) d[fleet] = d[fleet] / total } }); return EEZgroups } 36:T7b3,styles = html` `37:[{"id":"712625f1defe5f66ff9cf6317698f0ec7bd2faa875514e00ebd252d6ddc10e079bb55478c838c222ccd88e8c4f2c77ebd4c87bc7f4cb39d966a20088556bb966","href":"https://static.observableusercontent.com/files/712625f1defe5f66ff9cf6317698f0ec7bd2faa875514e00ebd252d6ddc10e079bb55478c838c222ccd88e8c4f2c77ebd4c87bc7f4cb39d966a20088556bb966","name":"EU_Landings_Flow@1.csv","type":"text/csv","lastModified":1608890248232.205,"size":2291}] 2f:{"title":"EU Fishing Flow","cells":[{"id":4727,"value":"md `# EU Fishing Flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3517,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4055,"value":"viewof mapColor = color({\n value: \"#d9d9d9\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":4309,"value":"descText = function(EEZ){\n d3.select(\"#EUpct\").text(`(${f(EEZstockPct[EEZ])})`);\n d3.select(\"#EEZtonnes\").text(`${Math.round(EEZtonnage2[EEZ].stock/1000)}k tonnes`)\n // .style(\"color\", colorScale(EEZ));\n d3.selectAll(\".Nationality\").text(Nationalities[EEZ]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4374,"value":"descText2 = function(EEZ) {\n d3.select(\"#catchPct\").text(f(simulatedLandingsTonnage[EEZ][countryNames[EEZ]]/EEZtonnage2[EEZ].stock));\n d3.select(\"#fleetCount\").text(\n simulatedLandingsTonnage.filter(d => d.fleet != countryNames[EEZ])\n .map(d => d[countryNames[EEZ]])\n .filter(v => v > 0)\n .length\n )\n d3.select(\"#descText2\").transition().delay(1000).duration(1500).style(\"opacity\",1);\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":4018,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":4223,"value":"simulatedLandingsTonnage.map(d => d[\"United Kingdom\"]).map(d => yTonn(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3736,"value":"mutable currentSimId = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":3896,"value":"simulatedLandings = simulatedLandingsData('fleet')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4128,"value":"simulatedLandingsTonnage = simulatedLandingsData('fleet')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4206,"value":"simulatedLandingsTonnage.map(d => Math.round(d[\"United Kingdom\"]/1000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3473,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":3674,"value":"simSpeed = 4000;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1922,"value":"whiteSpace = function(str){\n return str.replace(/\\s+/g, '');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2692,"value":"reorderArray = function(array,value){\n //Add selected value to start of array\n array.unshift(value)\n //Get previous index of this value\n let pos = array.lastIndexOf(value)\n //Delete\n array.splice(pos,1)\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":846,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3444,"value":"//Generates a probability distribution of fleet likelihood for each EEZ\n\nfleetProbabilities = {\n const fleetProbabilities = {}\n //For each EEZ\n EEZgroups.forEach(EEZcountry => {\n const key = EEZcountry.EEZ\n let fleetProbability = 0\n\n //Add a cumulative percent for each fleet\n fleetProbabilities[key] = countryNames.map((fleet,i) => {\n fleetProbability += EEZcountry[fleet]\n if (i == countryNames.length - 1) {\n return 1\n } else {\n return fleetProbability\n }\n })\n\n });\n \n return fleetProbabilities\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2290,"value":"fleetLandingsPct = function(landings) {\n let data = landings.map(function(d){\n let sum = 0\n countryNames.map(function(v){\n sum += d[v] || 0\n });\n return sum\n }); \n return data.map(d => [d, d * (totalTonnage/numParticles) ,d/d3.sum(data) || 0.0001])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1616,"value":"numParticles = 1500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = FileAttachment(\"EU_Landings_Flow@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"countryNames = [\"United Kingdom\",\"Ireland\",\"France\",\"Denmark\",\"Sweden\",\"Germany\",\"Spain\",\"Netherlands\",\"Finland\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1950,"value":"countryCodes = [\"UK\",\"IRL\",\"FRA\",\"DEN\",\"SWE\",\"GER\",\"SPA\",\"NED\",\"FIN\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4300,"value":"Nationalities = [\"UK\",\"Irish\",\"French\",\"Danish\",\"Swedish\",\"German\",\"Spanish\",\"Dutch\",\"Finnish\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4008,"value":"countryIDs = d3.range(countryNames.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4079,"value":"EEZtonnage = {\n \n //Group by EEZ and sum landings\n var result = [];\n data.reduce(function(res, value) {\n if (!res[value.EEZ]) {\n res[value.EEZ] = {EEZ: value.EEZ, landings: 0};\n result.push(res[value.EEZ])\n }\n res[value.EEZ].landings += +value.landings;\n return res;\n }, {});\n\n //Condense objects into a single object\n let EEZtonnage = {} \n result.map(function(d) {\n EEZtonnage[d.EEZ] = d.landings\n })\n \n return EEZtonnage \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4099,"value":"EEZtonnage2 = {\n let data = []\n countryNames.map(function(d){\n data.push({EEZ: d, stock: Math.round(EEZtonnage[d])})\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4259,"value":"EEZstockPct = EEZtonnage2.map(d => d.stock / totalTonnage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4106,"value":"totalTonnage = d3.sum(EEZtonnage2, d => d.stock)","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"EEZlandings = {\n \n let EEZlandings = {}\n //Convert landings into to Pct\n let total = d3.sum(Object.values(EEZtonnage)) \n let EEZ = Object.keys(EEZtonnage)\n \n for (EEZ in EEZtonnage) {\n EEZlandings[EEZ] = EEZtonnage[EEZ] / total\n }\n \n return EEZlandings\n \n \n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"EEZstocks = {\n let data = []\n countryNames.map(function(d){\n data.push({EEZ: d, stock: Math.round(EEZlandings[d] * numParticles)})\n })\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2971,"value":"EEZstocksStatic = {\n let data = []\n countryNames.map(function(d){\n data.push({EEZ: d, stock: Math.round(EEZlandings[d] * numParticles)})\n })\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"function simulatedLandingsData(side) {\n let simulatedLandings = []\n countryNames.map(function(d){\n let data = {};\n data[side] = d;\n countryNames.map(function(v){\n data[v] = 0\n })\n simulatedLandings.push(data) \n });\n \n return simulatedLandings\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"md `## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"sankeyLabels = function(parent, labelWidth, labelHeight, xScale, yPos, className) {\n let labelGroups = parent.selectAll(className)\n .data(countryCodes)\n .enter().append(\"g\")\n .attr(\"class\",className)\n .attr(\"id\", d => `${d}`)\n .attr(\"transform\", (d,i) => `translate(${xScale(i)},${yPos})`)\n\n labelGroups.append(\"rect\")\n .attr(\"width\",labelWidth).attr(\"height\", labelHeight)\n .style(\"fill\",\"white\")\n .attr(\"stroke-dasharray\",\"32 20\")\n .attr(\"stroke\", \"grey\")\n labelGroups.append(\"text\").text(d => d)\n .attr(\"x\",labelWidth/2)\n .attr(\"y\",10+1)\n .attr(\"alignment-baseline\",\"middle\")\n .style(\"text-anchor\",\"middle\")\n .style(\"fill\",\"grey\")\n .style(\"font-size\",\"13\")\n .style(\"font-family\",\"Lato\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"stackLandings = d3.stack()\n.keys(countryNames)\n// .order([1,0,2,3,4,5,6,7,8]);\n.order(d3.stackOrderReverse);","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"getRandomNumberInRange = (min, max) => Math.random() * (max - min) + min","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"getRandomValue = arr => arr[Math.floor(getRandomNumberInRange(0, arr.length))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4001,"value":"hoverColor = function(EEZ){\n d3.select(\"#EUpct\")\n .style(\"color\",colorScale(EEZ))\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":4035,"value":"md `## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3633,"value":"dimensions = {\n let dimensions = ({\n width: 500,\n height: 520,\n margin: {\n top:205,\n right: 110,\n bottom: 95,\n left: 90,\n },\n pathWidth: 32,\n labelHeight: 20,\n endBarsWidth: 15,\n endingBarPadding: 3,\n })\n \n dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right\n dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom\n \n return dimensions\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4028,"value":"xScaleOverlay = d3.scaleBand()\n .domain(d3.range(9))\n .range([-dimensions.pathWidth/2 , dimensions.boundedWidth + dimensions.pathWidth/2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4031,"value":"x = d3.scaleLinear()\n .domain(d3.extent(countryIDs))\n .range([-dimensions.pathWidth/2, dimensions.boundedWidth - dimensions.pathWidth/2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":4021,"value":"y = d3.scaleLinear()\n .domain([0, numParticles/2])\n .rangeRound([dimensions.boundedHeight,dimensions.boundedHeight+200]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":4217,"value":"yTonn = d3.scaleLinear()\n .domain([0, totalTonnage/2])\n .rangeRound([dimensions.boundedHeight,dimensions.boundedHeight+200]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":4005,"value":"colorScale = d3.scaleLinear()\n .domain(d3.extent(countryIDs))\n .range([\"#B53471\", \"#12CBC4\"])\n .interpolate(d3.interpolateHcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4025,"value":"reverseY = d3.scaleLinear()\n .domain([0, numParticles/2])\n .rangeRound([0,200]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":4114,"value":"reverseYtonn = d3.scaleLinear()\n .domain([0, totalTonnage/2])\n .rangeRound([0,200]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":4311,"value":"f = d3.format(\".0%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"md `## Dependancies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2072,"value":"import {highlightEEZ, muteGlobe, muteGlobe2, showMap} from \"@benjamesdavis/eez-globe\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}