2f:T124a,chart = { const width=500, height=300; const svg = d3.select(DOM.svg(width, height)) // svg.style("background-color","#D8D8D8"); svg.append("g") .attr("transform", "translate(420,20)") .append(() => legend({ color: d3.scaleSequential([0, 100], d3.interpolateBlues), title: "Prob. of Occurence (%)", height: 250, width: 28 })); // Use Mercator projection var projection = d3.geoMercator() .fitSize([width, height], engWales_simplified); var path = d3.geoPath() .projection(projection); var path2 = smooth(d3.curveBasisClosed, projection); // const radius = projection(d3.polygonLength(...filteredTiles[0]['geometry']['coordinates'])/4/2) let Prob = tileSpeciesProb(Species) // let Prob = tileSpeciesProb("Dace") svg.append('path') .datum(engWales_simplified) .attr('d', path2) // Styling .style('fill', '#E6E6FA') .style('stroke', 'white'); svg.append('g').selectAll('circle') .data(filteredTiles) .enter().append('circle') .attr('cx', d => projection(d3.polygonCentroid(...d['geometry']['coordinates']))[0]) .attr('cy', d => projection(d3.polygonCentroid(...d['geometry']['coordinates']))[1]) .attr('r', function(d){ let catchTile = Prob.filter(e => e.tile == d.tile)[0]; if (catchTile.surveys >= surveyThreshold) { return radiusScale(catchTile.prob) } else { return radiusScale(0.3) } }) .attr("fill", function(d){ let catchTile = Prob.filter(e => e.tile == d.tile)[0]; if (catchTile.surveys >= surveyThreshold) { return colorScale(projection(d3.polygonCentroid(...d['geometry']['coordinates']))[1]) } else { return 'white' } }) // .attr('r', // function(d){ // let catchTile = Prob.filter(e => e.tile == d.tile)[0]; // if (catchTile.surveys >= 5){ // return catchTile.prob == 0 ? 0 :catchTile.prob * 3.5; // } else { // return 0; // } // }) // .attr("fill", // function(d){ // let catchTile = Prob.filter(e => e.tile == d.tile)[0]; // if (catchTile.surveys >= surveyThreshold){ // return catchTile.prob == 0 ? "transparent" : colorScale(catchTile.prob); // } else { // return "transparent"; // } // }) // .attr('fill', (_, i) => d3.interpolateCool(i / filteredTiles.length)) .attr('id', d => d.tile) // Draw each tile as a path // svg.append('g').selectAll('path') // .data(filteredTiles) // .enter().append('path') // .attr('d', path) // .attr('id', d => d.tile) // // Styling // .attr("fill", // function(d){ // let catchTile = Prob.filter(e => e.tile == d.tile)[0]; // if (catchTile.surveys >= surveyThreshold){ // return catchTile.prob == 0 ? "transparent" : "transparent"; // // return catchTile.prob == 0 ? "transparent" : d3.interpolateBlues(catchTile.prob); // } else { // return "#E8E8E8"; // } // }) // svg.append('g').selectAll('path') // .data(linePoints) // .enter().append('path') // .attr('d', d => d3.line()(d.coords.map(d => projection(d)))) // .attr("stroke", "lightgrey") // .attr("stroke", // function(d){ // let catchTile = Prob.filter(e => e.tile == d.tile)[0]; // console.log(catchTile) // if (catchTile.surveys >= surveyThreshold){ // return "transparent" // } else { // return "#D8D8D8"; // } // }); // // .attr('id', d => d.tile) // // Styling // .style('stroke', 'white') // .on('mouseover', function(d){ // d3.select(this).style('fill','grey'); // let selectedTile = d3.select(this).attr('id') // let containedSites = tileSites.filter(d => d.tile == selectedTile)[0].sites // d3.selectAll("circle").each(function() { // let contained = containedSites.includes(d3.select(this).attr('id')); // d3.select(this).attr("fill", contained ? "red" : "black") ; // Logs the id attribute. // }); // }) // .on('mouseout', function(d){ // d3.select(this).style('fill','lightgrey'); // d3.selectAll("circle").attr("fill","black") // }); // svg.append('g').selectAll("circle") // .data(sitePositions) // .enter().append("circle") // .attr("id", d => d.SITE_ID) // .attr('cx', d => projection(d.COORDS)[0]) // .attr('cy', d => projection(d.COORDS)[1]) // .attr('r', 1) return svg.node() }30:T120f,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }31:T67e,tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } }32:T635,chart2 = { const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const width=500, height=200; const svg = container.append("svg").attr("viewBox", `40 -30 ${width} ${height+40}`); // Use Mercator projection var projection = d3.geoMercator() .fitSize([width, height], engWales_simplified); var path = d3.geoPath() .projection(projection); // svg.append('g').selectAll("circle") // .data(sitePositions) // .enter().append("circle") // .attr("id", d => d.SITE_ID) // .attr('cx', d => projection(d.COORDS)[0]) // .attr('cy', d => projection(d.COORDS)[1]) // .attr("fill", "lightgrey") // .attr('r', 1); svg.append('circle') .attr('cx', d => projection(site)[0]) .attr('cy', d => projection(site)[1]) .attr('r', 2) .attr("fill", "blue"); // create a tooltip var Tooltip = svg .append("div") .style("opacity", 1) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") // Three function that change the tooltip when user hover / move / leave a cel svg.append('g').selectAll('circle') .data(corners) .enter().append('circle') .attr('cx', d => projection([d[0],d[1]])[0]) .attr('cy', d => projection([d[0],d[1]])[1]) .attr('r', 2) .attr("fill", "black") .call(tooltip, tooltipDiv); return container.node() }33:T102f,function legend({ color, title, tickSize = 6, width = 36 + tickSize, height = 320, marginTop = 20, marginRight = 10 + tickSize, marginBottom = 20, marginLeft = 5, ticks = height / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("x1", marginLeft - width + marginRight); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(height - marginBottom, marginTop), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(height - marginBottom, marginTop)), {range() { return [height - marginBottom, marginTop]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("y", (d, i) => x(i)) .attr("x", marginLeft) .attr("height", (d, i) => x(i - 1) - x(i)) .attr("width", width - marginRight - marginLeft) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("y", x) .attr("x", marginLeft) .attr("height", Math.max(0, x.bandwidth() - 1)) .attr("width", width - marginLeft - marginRight) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", 0) .attr("y", 0) .attr("fill", "currentColor") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); } 34:[{"id":"11bb44b56af1d62292bd76a231b270500bb93ef8cf68e2cfa20c1924bed7818df8b5badba07411dde09ecc049ab49f833e657fb499b91d35144de2806940ae00","href":"https://static.observableusercontent.com/files/11bb44b56af1d62292bd76a231b270500bb93ef8cf68e2cfa20c1924bed7818df8b5badba07411dde09ecc049ab49f833e657fb499b91d35144de2806940ae00","name":"engWalesTopo.json","type":"application/json","lastModified":1665911111377.339,"size":3267001},{"id":"7550870a0baf36a8015ead69ba662ceaceb0266bf2a4e29abcecbe9ed609aceaa879df76e1c63dad5fe12e4bb09ca2435d4e123d4233df7e08457613d1d7a399","href":"https://static.observableusercontent.com/files/7550870a0baf36a8015ead69ba662ceaceb0266bf2a4e29abcecbe9ed609aceaa879df76e1c63dad5fe12e4bb09ca2435d4e123d4233df7e08457613d1d7a399","name":"FW_Fish_Counts_Filtered@6.csv","type":"text/csv","lastModified":1665935494372.91,"size":6469007},{"id":"e50ea68246eed4dbddd1cd49cac8e8447f6ffe37ba6141f412b8a599631d7f553acdf0a189dcb70bd94ce5c2db78c9e43ebc610960029172f3873231ef4c53a3","href":"https://static.observableusercontent.com/files/e50ea68246eed4dbddd1cd49cac8e8447f6ffe37ba6141f412b8a599631d7f553acdf0a189dcb70bd94ce5c2db78c9e43ebc610960029172f3873231ef4c53a3","name":"FW_Fish_Sites_LatLong.csv","type":"text/csv","lastModified":1661685691781.606,"size":2021956},{"id":"046aba5e6579415c8959046384a1b9eff6d6bd4450169a94da3ab9125ddbaf0ae60da1d549e55b7a66fbf4578e486e256c5f25f813f27b443a5448c276f6030a","href":"https://static.observableusercontent.com/files/046aba5e6579415c8959046384a1b9eff6d6bd4450169a94da3ab9125ddbaf0ae60da1d549e55b7a66fbf4578e486e256c5f25f813f27b443a5448c276f6030a","name":"tileSites.json","type":"application/json","lastModified":1664520511618.773,"size":127560},{"id":"782939c3d1a83980c72cc5a6a8b3008f77950498ef173f3a8b3e7ff1991db7658d30cfd22bb2853746055ce285357fabae1b6f68822aeb1d70e1b04245c7d334","href":"https://static.observableusercontent.com/files/782939c3d1a83980c72cc5a6a8b3008f77950498ef173f3a8b3e7ff1991db7658d30cfd22bb2853746055ce285357fabae1b6f68822aeb1d70e1b04245c7d334","name":"tileSiteCatches (1).json","type":"application/json","lastModified":1664607234474.622,"size":6558263},{"id":"26941c150e86b556419a30046bbfb3b1e1036d4330a78b5b6ecf3deceb5571e6f32f87e0a05b560e426bb96aa14b0d76c9181f6a1facce33af9934d66f9ca82d","href":"https://static.observableusercontent.com/files/26941c150e86b556419a30046bbfb3b1e1036d4330a78b5b6ecf3deceb5571e6f32f87e0a05b560e426bb96aa14b0d76c9181f6a1facce33af9934d66f9ca82d","name":"engWalesTopo@1.json","type":"application/json","lastModified":1666037308649.98,"size":3810339},{"id":"11bb44b56af1d62292bd76a231b270500bb93ef8cf68e2cfa20c1924bed7818df8b5badba07411dde09ecc049ab49f833e657fb499b91d35144de2806940ae00","href":"https://static.observableusercontent.com/files/11bb44b56af1d62292bd76a231b270500bb93ef8cf68e2cfa20c1924bed7818df8b5badba07411dde09ecc049ab49f833e657fb499b91d35144de2806940ae00","name":"test.json","type":"application/json","lastModified":1666038030784.705,"size":3267001},{"id":"952d31b8d533bffdb4e4fae49ca8c5e7890403e642479cfe13322402ccd162ce88a14967a04131b887beaba3b7e9297929365f1a1ed8a2472614a2663a80725a","href":"https://static.observableusercontent.com/files/952d31b8d533bffdb4e4fae49ca8c5e7890403e642479cfe13322402ccd162ce88a14967a04131b887beaba3b7e9297929365f1a1ed8a2472614a2663a80725a","name":"FW_Fish_Counts_Filtered@3.csv","type":"text/csv","lastModified":1662826435185.021,"size":5260393},{"id":"0d0d938c13e008d04f1c4e7b1cba065cd338d040fe96b8e0afbc7370f51e868e92d6690b901f23920b1903641490b6f3ae699ccb040787d813bce8e7c404ac92","href":"https://static.observableusercontent.com/files/0d0d938c13e008d04f1c4e7b1cba065cd338d040fe96b8e0afbc7370f51e868e92d6690b901f23920b1903641490b6f3ae699ccb040787d813bce8e7c404ac92","name":"engWalesGeo.json","type":"application/json","lastModified":1666037161924.303,"size":4867680},{"id":"e4f65002e003697c1695403f70cc1cdb77d0a0e180dc11e8fa8cb8530882a6cbbaf811c150f75aac199a9bd2d69442b3b92e29f47919e08a7ef9c9385619d054","href":"https://static.observableusercontent.com/files/e4f65002e003697c1695403f70cc1cdb77d0a0e180dc11e8fa8cb8530882a6cbbaf811c150f75aac199a9bd2d69442b3b92e29f47919e08a7ef9c9385619d054","name":"FW_Fish_Sites_LatLong@5.csv","type":"text/csv","lastModified":1665935499474.094,"size":2663854}] 2d:{"title":"Tile Map","cells":[{"id":0,"value":"# Tile Map","pinned":true,"hidden":false,"mode":"md"},{"id":2302,"value":"filteredTiles","pinned":true,"hidden":false,"mode":"ojs"},{"id":1900,"value":"viewof minArea = Range([0.001, 0.01], { step: 0.001 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2392,"value":"linePoints","pinned":true,"hidden":false,"mode":"ojs"},{"id":2397,"value":"projection = d3.geoMercator() \n .fitSize([width, height], engWales_simplified);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2525,"value":"{\n var projection = d3.geoMercator() \n .fitSize([500, 300], engWales_simplified);\n\n var path = d3.geoPath()\n .projection(projection);\n\n var path2 = smooth(d3.curveBasisClosed, projection);\n \n let tile = filteredTiles[0].geometry.coordinates[0];\n\n return engWales_simplified\n \n return topojson.merge(engWales_simplified, engWales_simplified.coordinates)\n\n return polygonClip(...engWales_simplified.coordinates, tile)\n \n}\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2522,"value":"import {polygonClip} from \"@d3/polygonclip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1587,"value":"numTiles = 10.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":2896,"value":"d3.polygonCentroid(...filteredTiles[0]['geometry']['coordinates'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2899,"value":"Prob = tileSpeciesProb(Species)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2901,"value":"radiusScale = \n // d3.scaleSqrt()\n d3.scaleLinear()\n // .exponent(0.5)\n .domain([0,1])\n .range([0,3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2942,"value":"colorScale = d3.scaleSequential(d3.interpolateMagma)\n .domain([-50,height]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2991,"value":"filteredTiles.map(d => d.geometry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3019,"value":"tileSpeciesProb('Brown / sea trout')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2994,"value":"brownTroutCoE = {\n let brownTrout = tileSpeciesProb('Brown / sea trout');\n let brownTroutDist = [];\n for (let i=0; i < brownTrout.length; i++) {\n let tile = brownTrout[i].tile\n let tileProperties = filteredTiles.filter(d => d.tile == tile)[0]\n brownTroutDist.push({ \n ...brownTrout[i],\n 'centroid': tileProperties.geometry.centroid\n })\n }\n\n return brownTroutDist\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3122,"value":"// import { FileAttachment } from \"@observablehq/stdlib\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":3120,"value":"{\n const file = FileAttachment(\"brown-trout-coe.json\");\n file.write(JSON.stringify(brownTroutCoE))\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3108,"value":"Plot.plot({\n marks: [\n Plot.rectY(brownTroutCoE, Plot.binX({y: \"count\"}, {x: \"prob\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2327,"value":"viewof surveyThreshold = Range([3, 10], { step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1717,"value":"viewof Species = Inputs.select(speciesList, {value: \"Brown / sea trout\", label: \"Species\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2613,"value":"{\n let Prob = tileSpeciesProb(\"Grayling\");\n\n Prob = Prob.filter(d => d.prob >= 0.2 && d.surveys >= 4);\n let graylingTiles = Prob.map(d => d.tile);\n\n return filteredTiles.filter(d => graylingTiles.includes(d.tile))\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2452,"value":"linePoints[0].coords.map(d => projection(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"import { geoCurvePath as smooth } from \"@d3/context-to-curve\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1928,"value":"cover.geojson(geometryCollection['geometry'], { min_zoom: 8, max_zoom: 8})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1913,"value":"engwalestopo1 = FileAttachment(\"engWalesTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1917,"value":"engwalestopo11 = FileAttachment(\"engWalesTopo@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"tiles = {\n // Zoom is used to control the number of tiles\n// Higher zoom generates more tiles\nconst zoom = numTiles\n\n// We generate tiles for each feature geometry using cover.tiles\nconst limits = { min_zoom: zoom, max_zoom: zoom }\n// const tiles = cover.geojson(geometryCollection['geometry'], { min_zoom: zoom, max_zoom: zoom})\nconst tiles = cover.geojson(engWales_Geo, { min_zoom: zoom, max_zoom: zoom})\n \nreturn tiles\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1910,"value":"linePoints = {\n\n let results = [];\n \n filteredTiles.map(function(d){\n let coords = d.geometry.coordinates[0]\n let distance = ((coords[1][0] - coords[0][0]) / 2)\n\n let p0x = coords[0][0]\n let p0y = coords[0][1] + distance\n let p1x = coords[3][0]\n let p1y = coords[3][1] + distance\n \n results.push({\n 'tile': d.tile,\n 'coords': [[p0x,p0y],[p1x,p1y]]\n });\n \n }) ;\n\n return results\n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"tileFeatures","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"tileSpeciesProb = function(species){\n \n // tileSiteCatches[0].sites[0].surveys.map(d => d.SPECIES.includes(\"Brown / sea trout\"))\n\n let tileSpeciesProb = [];\n let speciesPresent = tileSiteCatches.map(function(d){\n let a = d.sites.map(function(e){\n return e.surveys.map(f => f.SPECIES.includes(species))\n });\n let speciesBool = a.flat();\n\n tileSpeciesProb.push({\n tile: d.tile,\n prob: speciesBool.filter(Boolean).length / speciesBool.length,\n surveys: +speciesBool.length\n });\n \n });\n\n // let speciesProb = speciesPresent.map(d => d.filter(Boolean).length / d.length)\n return tileSpeciesProb\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2678,"value":"tileSurveysObj = Object.entries(tileSurveys).map(([key, value]) => ({\n tile: key,\n surveys: value,\n}));","pinned":true,"hidden":false,"mode":"ojs"},{"id":2755,"value":"{\n // Count the number of tiles with <5 surveys\n const tilesWithLessThan5Surveys = tileSurveysObj.reduce((count, tile) => {\n if (tile.surveys < 5) {\n return count + 1;\n }\n return count;\n }, 0);\n\n return tilesWithLessThan5Surveys / tileSurveysObj.length * 100\n\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1687,"value":"tileSurveys = {\n let tileSurveys = {};\n \n tileSiteCatches.map(function(d){\n \n let surveys = 0;\n \n d.sites.map(function(e){\n surveys += e.surveys.length \n })\n \n return tileSurveys[d.tile] = surveys\n \n });\n\n return tileSurveys\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2701,"value":"Plot.plot({\n marks: [\n Plot.rectY(tileSurveysObj, Plot.binX({y: \"count\"}, {x: \"surveys\", domain: [0,100], thresholds: 20})),\n Plot.ruleY([0])\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2765,"value":"{\n const pre2010tiles = [];\n\n tileSiteCatches.map(function(tile){\n //each tile\n const pre2010sites = [];\n \n const siteList = tile.sites.filter(function(site){\n //each site \n const pre2010surveyList = [];\n \n site.surveys.map(function(surveys){\n //each survey\n if (surveys.YEAR <= 2010) {\n pre2010surveyList.push(surveys)\n } \n });\n\n if (pre2010surveyList.length == 0) return;\n \n const pre2010surveys = {\n site: site.site,\n surveys: pre2010surveyList\n };\n \n return pre2010surveys;\n \n });\n\n // return pre2010surveys\n\n pre2010tiles.push({\n tile: tile.tile,\n sites: siteList\n })\n \n });\n\n return pre2010tiles\n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2839,"value":"catchDataYearFilter(2001,2001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2830,"value":"catchDataYearFilter = function(fromYear,toYear)\n{\n const filteredData = tileSiteCatches.filter((tileData) => {\n const filteredSites = tileData.sites.filter((site) => {\n const filteredSurveys = site.surveys.filter((survey) => {\n // return parseInt(survey.YEAR) >= fromYear && parseInt(survey.YEAR) <= toYear;\n return parseInt(survey.YEAR) < 2002\n });\n\n\n if (filteredSurveys.length == 0){\n return false;\n }\n\n return {\n site: site.site,\n surveys: filteredSurveys\n };\n });\n\n\n console.log(filteredSites, filteredSites.length)\n\n\n if (filteredSites.length == 0){\n return false\n };\n \n return {\n tile: tileData.tile,\n sites: filteredSites\n };\n });\n \n return filteredData\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"tileSiteCatches = {\n let filledTiles = tileSites.filter(d => d.sites.length >= 1);\n let data = [];\n \n filledTiles.map(function(t){ \n let tileSiteSurveys=[];\n \n t.sites.map(function(d){ \n let surveys=[];\n\n if (catchSites.includes(d)){ \n catches2.map(function(e){\n d == e.SITE_ID? \n surveys.push(e) \n : null\n }); \n let siteSurveys = {\n site: d,\n surveys: surveys\n }\n \n tileSiteSurveys.push(siteSurveys) \n };\n \n });\n\n data.push({\n tile: t.tile,\n sites: tileSiteSurveys \n });\n\n \n });\n \n return data; \n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"catches2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1750,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"// neighbouringPoints = function(tile){\n// tile = tile['geometry']['coordinates'];\n// let sideLength = Math.sqrt(d3.polygonArea(...tile))\n// let centroid = d3.polygonCentroid(...tile)\n// let buffer = 0.7\n// // return tile\n// let x0 = centroid[0] - sideLength * buffer;\n// let x1 = centroid[0] + sideLength * buffer;\n// let y0 = centroid[1] - sideLength * buffer;\n// let y1 = centroid[1] + sideLength * buffer; \n\n// // return y0,y1\n\n// return sitePositions.filter(\n// d => d.COORDS[0] > x0 &&\n// d.COORDS[0] < x1 &&\n// d.COORDS[1] > y0 && \n// d.COORDS[1] < y1\n// )\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1436,"value":"// tileFeatures=memoize(tileFeaturesFn)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"tileFeatures = {\n let tileFeatures = tiles['features'];\n for (let i=0; i < tileFeatures.length; i++){\n tileFeatures[i].tile = i;\n tileFeatures[i].geometry.centroid = d3.polygonCentroid(tileFeatures[i].geometry.coordinates[0]);\n }\n return tileFeatures\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":3079,"value":"tileSites.filter(d => d.sites.length >= 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"filteredTiles = {\n let filledTiles = tileSites.filter(d => d.sites.length >= 1).map(d => d.tile)\n return tileFeatures.filter(d => filledTiles.includes(d.tile))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"// tileSites2 = {\n// let results = [];\n// const tileList = tiles['features']\n\n// for (let i=0; i < tileList.length; i++){\n \n// results.push({'tile':i, 'sites': []});\n\n// let contains = geoContainsCache(tileList[i])\n// let neighbours = neighbouringPoints(tileList[i])\n\n// for (let j=0; j < neighbours.length; j++){ \n// let inTile = contains(neighbours[j].COORDS);\n// if (inTile ? results[i].sites.push(neighbours[j].SITE_ID) : !inTile) continue;\n// };\n \n// }; \n\n// return results\n \n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1599,"value":"// tileSites = FileAttachment(\"tileSites.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3086,"value":"sites.filter(d => d.SITE_ID == '13651')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"tileSites = {\n let results = [];\n \n sites.map(function(d){\n let tile = findTile(d)\n results.push({tile: tile, site:d.SITE_ID})\n });\n\n\n let map = d3.group(results, d => d.tile)\n const arr = Array.from(map, ([key, value]) => {\n return {tile:key,value};\n});\n\n let results2 = [];\n \n arr.map(function(d){\n let tile = d.tile\n\n let siteArr = [];\n d.value.map(function(e){\n siteArr.push(e.site)\n })\n\n if (tile !== undefined) {\n results2.push({tile: tile, sites: siteArr})\n }\n \n });\n\n return results2\n\n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"sitePositions = { \n let sitePositions = [];\n recentSites.map( d =>\n sitePositions.push({\n SITE_ID: d.SITE_ID,\n COORDS: [+d.Long, +d.Lat]\n })\n )\n \n return sitePositions \n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"recentSites = {\n const regex = /\\d{2}\\/\\d{2}\\/(\\d{4})/;\n \n return sites.filter(function(d){\n const surveyYear = regex.exec(d.LAST_SURVEY)[1]\n // return +surveyYear > 2000\n return +surveyYear >= 2000 && catchSites.includes(d.SITE_ID) \n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"sites = FileAttachment(\"FW_Fish_Sites_LatLong@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {geojson} from \"@syaleni/topojson-vs-geojson\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"cover = import('https://cdn.skypack.dev/tile-cover@3.0.1?min')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1888,"value":"engwalesgeo = FileAttachment(\"engWalesGeo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1894,"value":"engwalestopo = FileAttachment(\"engWalesTopo@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1942,"value":"engWales_Geo = {\n return topojson.merge(engwalestopo, Object.values(engwalestopo.objects))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1897,"value":"engWales_simplified = {\n let engWales_simplified = topojson.presimplify(engwalestopo);\n let min_weight = topojson.quantile(engWales_simplified, minArea);\n engWales_simplified = topojson.simplify(engWales_simplified, min_weight);\n return topojson.merge(engWales_simplified, Object.values(engWales_simplified.objects))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"topojson = require(\"https://unpkg.com/topojson@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1948,"value":"geometryCollection.geometry","pinned":true,"hidden":false,"mode":"ojs"},{"id":1950,"value":"engWales_Geo","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"geometryCollection = ({\n type: \"GeometryCollection\",\n geometry: {\n type: 'MultiPolygon',\n coordinates: engWales_Geo.coordinates\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1923,"value":"test = FileAttachment(\"test.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1908,"value":"engWales_simplified","pinned":true,"hidden":false,"mode":"ojs"},{"id":1905,"value":"engwalestopo","pinned":true,"hidden":false,"mode":"ojs"},{"id":1456,"value":"[...new Set(catches.map(d => d.SPECIES_NAME))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"catchSites = [...new Set(catches.map(d => d.SITE_ID))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1720,"value":"speciesList = [...new Set(catches.map(d => d.SPECIES_NAME.split(';')).flat())]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"catches2 = {\n let catches2 = [];\n \n catches.map(function(d){\n let bag = { \n SITE_ID: d.SITE_ID,\n SITE_NAME: d.TOP_TIER_SITE,\n SURVEY_ID: d.SURVEY_ID,\n YEAR: d.EVENT_DATE_YEAR, \n SPECIES: d.SPECIES_NAME.split(';')\n }\n\n catches2.push(bag)\n \n });\n\n return catches2\n\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1975,"value":"[sites[1].Long,sites[1].Lat]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1963,"value":"findTile([sites[1].Long,sites[1].Lat])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1966,"value":"sites","pinned":true,"hidden":false,"mode":"ojs"},{"id":1979,"value":"tiles.features[0].geometry.coordinates[0][2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1996,"value":"findTile(-2,55)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2225,"value":"tiles.features[0].geometry.coordinates[0][2].map(d => Math.round((d)*1000)/1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2004,"value":"corners = tiles.features.map((d, i) => [\n ...d.geometry.coordinates[0][2].map(d => Math.round((d)*1000)/1000),\n i\n ]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2177,"value":"I.get(x0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2182,"value":"x2 = d3.sort(d3.group(corners, (d) => +d[0]).keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2149,"value":" margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2168,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2154,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":2156,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2158,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"#333\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2160,"value":"MOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":2164,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs"},{"id":2162,"value":"tooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2142,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2152,"value":"function setContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum))\n .join(\"p\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2071,"value":"corners.map(d => d[0]).includes(-1.866432229648040)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2088,"value":"-1.8664322296480407","pinned":true,"hidden":false,"mode":"ojs"},{"id":2079,"value":"corners.map((v) => v[0][2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2013,"value":"I = d3.rollup(\n corners,\n (v) => v[0][2],\n (d) => +d[0],\n (d) => +d[1]\n );","pinned":true,"hidden":false,"mode":"ojs"},{"id":2049,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"site = [-3.551356790934276, 51.9259578835074]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2285,"value":"findTile({'Long': site[0], 'Lat': site[1]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2032,"value":"I.get(x0)?.get(y0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2018,"value":"x = d3.sort(d3.group(corners, (d) => +d[0]).keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2020,"value":"y = d3.sort(d3.group(corners, (d) => +d[1]).keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2024,"value":"x0 = x[d3.bisect(x, site[0])]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2249,"value":"d3.bisect(y, 51.79659578835074)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2029,"value":"y0 = y[d3.bisect(y, site[1])]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1459,"value":"findTile = {\n const corners = tiles.features.map((d, i) => [\n ...d.geometry.coordinates[0][2].map(e => Math.round((e)*1000)/1000),\n i\n ]);\n const x = d3.sort(d3.group(corners, (d) => +d[0]).keys());\n const y = d3.sort(d3.group(corners, (d) => +d[1]).keys());\n const I = d3.rollup(\n corners,\n (v) => v[0][2],\n (d) => +d[0],\n (d) => +d[1]\n );\n return ({ Long, Lat }) => {\n const x0 = x[d3.bisect(x, +Long)];\n const y0 = y[d3.bisect(y, +Lat)];\n const i = I.get(x0)?.get(y0);\n\n return i\n\n // Here we could return i, but it's safer to double-check that the polygon\n // we've reached does indeed contain the point. We use d3.polygonContains\n // because the grid is planar not spherical.\n // return i !== undefined\n // ? d3.polygonContains(tiles.features[i].geometry.coordinates[0], [\n // +Long,\n // +Lat\n // ])\n // ? i\n // : undefined\n // : undefined;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"catches = FileAttachment(\"FW_Fish_Counts_Filtered@6.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2646,"value":"d3.min(catches.map(d => d.EVENT_DATE_YEAR))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1758,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1789,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(1, n);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(0, n-i, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1902,"value":"import { Range } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}