31:T6fa,--- The definition of the color scale is worth a little explanation: ~~~js color: { type: "log", domain: [0.25, 5, 21, 100], range: ["#d3e7fa", "#5784c5", "#fc004b", "#ffec44"], clamp: true } ~~~ The _log_ **type** creates a logarithmic scale—in which the middle ground between 1 and 100 is 10. This reflects the densities of the dataset better than a linear scale, because the number of events on each pixel is distributed across several orders of magnitude. The **domain** starts at 0.25 instead of 1, though; this is because a log scale cannot start at 0. And we don’t want to start at 1, because #d3e7fa (lightblue) is used for 0 (no event), and we want pixels with 1 event to be visible against that background. Experiment by changing 0.25 to something closer to 1: these single points will tend to blend into the background. The **domain** and **range** have the same number of elements, thus creating a _piecewise_ scale. To respect the geometric nature of the log scale, I set the intermediate values to 5 and 21 (approx. ${tex`100^{\frac13}`} and ${tex`100^{\frac23}`}). I could have used [d3.piecewise](https://observablehq.com/@d3/d3-piecewise) instead. The **clamp** option makes 0 behave like 0.25, and get the #d3e7fa lightblue color. Without it, 0 would be invalid, and the background would be transparent. We could draw the background separately, but since this is a [raster](https://observablehq.com/plot/marks/raster), it feels nicer to bake in the background in the image. (Although as a consequence we need to [**clip**](https://observablehq.com/plot/features/marks#mark-options) the mark to the _sphere._) 32:[{"id":"454d7ef5448808d7892cf1eda4510d13e42e856af543ebbd2fbe2a8af1f24aa8dfdd8b306dd144d4cd9b8f48de12ebbd0ccc016b401e4cc549843c8b8546b8bf","href":"https://static.observableusercontent.com/files/454d7ef5448808d7892cf1eda4510d13e42e856af543ebbd2fbe2a8af1f24aa8dfdd8b306dd144d4cd9b8f48de12ebbd0ccc016b401e4cc549843c8b8546b8bf","name":"ais_disabling_events.csv","type":"text/csv","lastModified":1685026926614.439,"size":11897881}] 2f:{"title":"Plot: AIS transponder events","cells":[{"id":0,"value":"

Plot: AIS transponder events

Observable Plot

\n\n# AIS transponder events\n\nThis notebook recreates Harry Stevens’ map: [Where do fishing boats disable their transponders?](https://observablehq.com/@climatelab/map-where-do-fishing-boats-disable-their-transponders) (24 May 2023) with [Observable Plot](https://observablehq.com/plot/). Many thanks to Harry and to the Washington Post’s [Climate Lab](https://www.washingtonpost.com/climate-environment/climate-lab/) for sharing the process and the data. See also Mike Bostock’s [suggestions](https://observablehq.com/@observablehq/ais-disabling-events).","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"{\n const color = map.scale(\"color\");\n const {\n type,\n domain,\n domain: { 0: x1, 3: x2 }\n } = color;\n return Plot.plot({\n axis: null,\n width: 300,\n height: 52,\n color,\n margin: 0,\n marginTop: 22,\n marginBottom: 15,\n x: { type, domain },\n marks: [\n Plot.raster({ x1, x2, height: 1, fill: (x) => x }),\n Plot.text([\"Gaps\"], {\n dx: -56,\n dy: -17,\n frameAnchor: \"top\",\n textAnchor: \"end\",\n fontWeight: \"bold\",\n fontSize: 15\n }),\n Plot.text([\"in transponder data\"], {\n dx: -56 + 5,\n dy: -17,\n frameAnchor: \"top\",\n textAnchor: \"start\",\n fontSize: 15\n }),\n Plot.text([\"Less\"], { dy: 12, frameAnchor: \"bottom-left\", fontSize: 12 }),\n Plot.text([\"More\"], { dy: 12, frameAnchor: \"bottom-right\", fontSize: 12 })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"map = Plot.plot({\n projection: { type: \"equal-earth\", rotate: [-10, 0] },\n width: 928,\n color: {\n type: \"log\",\n domain: [0.25, 5, 21, 100],\n range: [\"#d3e7fa\", \"#5784c5\", \"#fc004b\", \"#ffec44\"],\n clamp: true\n },\n marks: [\n Plot.raster(ev, {\n pixelSize: 0.8,\n x: \"gap_start_lon\",\n y: \"gap_start_lat\",\n fill: 1,\n interpolate: interpolateSum,\n clip: \"sphere\"\n }),\n Plot.geo(land, { fill: \"white\" }),\n Plot.tip(\n ev,\n Plot.pointer(\n Plot.hexbin(\n { fill: \"count\", x: \"median\", y: \"median\" },\n { x: \"gap_start_lon\", y: \"gap_start_lat\", binWidth }\n )\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"The custom **[spatial interpolator](https://observablehq.com/plot/marks/raster#spatial-interpolators)** below creates a sum, for each pixel, of the values of the matching samples. In this case, the value is 1, resulting in a count. Note that, since the chosen projection—Equal Earth—is equal-area, it takes care of normalization: each pixel corresponds to the same surface area on the globe, and the resulting pixel values are therefore comparable.","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"function interpolateSum(index, width, height, X, Y, V) {\n const U = new Float64Array(width * height);\n for (const i of index) {\n const x = Math.floor(X[i]);\n const y = Math.floor(Y[i]);\n if (x >= 0 && y >= 0 && x < width && y < height) U[x + width * y] += V[i];\n }\n return U;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"---\nFor the interactive tip, I used hexagonal bins, with a bin width computed such that a hexagon has the same surface area as the raster’s base pixel unit. A bit of high school maths tells me that:","pinned":false,"hidden":false,"mode":"md"},{"id":888,"value":"binWidth = Math.sqrt(2 / Math.sqrt(3)) * 0.8","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"---\n*Annex: linear binning.* Instead of projecting each point to the center of the pixel with Math.round, we can split its weight across the four pixels that surround it. This approach is slightly better—limiting quantization and [Moiré patterns](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern)—but also a bit more code, which is why it’s presented here in an annex. But click on this checkbox to see!","pinned":false,"hidden":false,"mode":"md"},{"id":736,"value":"viewof linear = Inputs.toggle({label: \"Apply linear binning?\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"Plot.plot({\n projection: { type: \"equal-earth\", rotate: [-10, 0] },\n width: 928,\n color: {\n type: \"log\",\n domain: [0.25, 5, 21, 100],\n range: [\"#d3e7fa\", \"#5784c5\", \"#fc004b\", \"#ffec44\"],\n clamp: true\n },\n marks: [\n Plot.raster(ev, {\n pixelSize: largePixels ? 4 : 0.8,\n imageRendering: \"pixelated\",\n x: \"gap_start_lon\",\n y: \"gap_start_lat\",\n fill: 1,\n interpolate: linear ? interpolateSumLinear : interpolateSum,\n clip: \"sphere\"\n }),\n Plot.geo(land, { fill: \"white\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"viewof largePixels = Inputs.toggle({label: \"Large pixels\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"function interpolateSumLinear(index, width, height, X, Y, V) {\n const U = new Float64Array(width * height);\n for (const i of index) {\n const x = Math.floor(X[i] - 0.5);\n const y = Math.floor(Y[i] - 0.5);\n const dx = X[i] - 0.5 - x;\n const dy = Y[i] - 0.5 - y;\n for (const [a, b, w] of [\n [x, y, (1 - dx) * (1 - dy)],\n [x + 1, y, dx * (1 - dy)],\n [x, y + 1, (1 - dx) * dy],\n [x + 1, y + 1, dx * dy]\n ]) {\n if (a >= 0 && b >= 0 && a < width && b < height)\n U[a + width * b] += w * V[i];\n }\n }\n return U;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"---\n*data*","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"// Copied from https://observablehq.com/@climatelab/map-where-do-fishing-boats-disable-their-transponders\nev = FileAttachment(\"ais_disabling_events.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"import { land } from \"@visionscarto/geo\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}