2d:null 2e:["$","title",null,{"children":"NetCDF | Fil | Observable"}] 33:T426,md`### geoContours
With topdown() we rearrange the data to go from 90° (North pole) to -90° (South pole). With cylinder() we add a copy of the first column to the right of the matrix, so that contours can be seamless on the globe (treated as a cylinder: the neighbours of point 359 are 358 and 0). Then d3.contours() computes the (planar) contours for this matrix. With invert() we transform these contours into GeoJSON, following Mike’s [GeoTIFF Contours II](https://bl.ocks.org/mbostock/83c0be21dba7602ee14982b020b12f51)) example. But we fix the cusps by: 1. Adding contact points so that stitching works even if only 1 point is situated on either side of the antimeridian line. 2. After stitching, removing the shared points (at 180°), as their latitude might be off, creating cusps. Finally, we use topojson.simplify() to limit the number of dots. (The density of dots in the planar contours is uniform, which makes them too dense near the poles of the globe.) `34:T976, function invert(d) { var shared = {}; var p = { type: "Polygon", coordinates: d3.merge(d.coordinates.map(function(polygon) { return polygon.map(function(ring) { return ring.map(function(point) { return [point[0] / (isize + 1) * 360 - 180, 90 - point[1] / jsize * 180]; }).reverse(); }); })) }; // Add contact points with the antimeridian. var epsilon = 1e-5; p.coordinates = p.coordinates .map(function(ring) { ring.pop(); var r = []; for (var i = 0, l = ring.length; i < l; i++) { var p = ring[i]; if (p[0] === 180 && ring[(i+l-1)%l][0] < 180) r.push([p[0], p[1] + epsilon]); if (p[0] === -180 && ring[(i+l-1)%l][0] > -180) r.push([p[0], p[1] - epsilon]); r.push(p); if (p[0] === 180 && ring[(i+1)%l][0] < 180) r.push([p[0], p[1] - epsilon]); if (p[0] === -180 && ring[(i+1)%l][0] > -180) r.push([p[0], p[1] + epsilon]); } r.push(r[0]); return r; }); // Record the y-intersections with the antimeridian. p.coordinates.forEach(function(ring) { ring.forEach(function(p) { if (p[0] === -180 || p[0] === 180) { shared[p[1]] |= p[0] === -180 ? 1 : 2; } }); }); // Offset any unshared antimeridian points to prevent their stitching. p.coordinates.forEach(function(ring) { ring.forEach(function(p) { if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) { p[0] = p[0] === -180 ? -179.9995 : 179.9995; } }); }); p = d3.geoStitch(p); // After stitching remove the shared points -- they are off // see https://github.com/d3/d3-contour/issues/25 p.coordinates = p.coordinates .map(function(ring) { ring.pop(); ring = ring .map(function(p) { var p0 = (p[0] + 180) * (isize + 1) / isize - 180; return [p0, p[1]]; }); ring = ring.filter(function(p) { return Math.abs(p[0]) < 179.9999; }); ring.push(ring[0]); return ring; }) .filter(function(ring) { return ring.length > 0; }); // If the MultiPolygon is empty, treat it as the Sphere. return p.coordinates.length ? {type: "Polygon", coordinates: p.coordinates, value: d.value} : {type: "Sphere", value: d.value}; }35:T494,function map() { var canvas = this || DOM.canvas(width,500), context = canvas.getContext("2d"), path = d3.geoPath().projection(projection.fitExtent([[1, 1], [width-1, 500-1]], {type: "Sphere"})).context(context); const render = function() { context.clearRect(0,0,width,500); polygons.forEach(p => { context.beginPath(), path(p), context.fillStyle = color(p.value), context.fill(), context.strokeStyle = 'black', context.lineWidth = 0.2, context.stroke(); }); context.beginPath(), path(d3.geoGraticule()()), context.lineWidth = 0.2, context.strokeStyle = 'black', context.stroke(); context.beginPath(), path(land), context.lineWidth = 0.5, context.strokeStyle = 'black', context.stroke() context.beginPath(), path({type: "Sphere"}), context.lineWidth = 1.5, context.strokeStyle = 'rgba(0,0,0,.5)', context.stroke(); } if (d3.geoInertiaDrag) d3.geoInertiaDrag(d3.select(canvas).style('cursor', 'move'), null, projection) var timer = d3.timer(render); invalidation.then(() => (timer.stop(), timer = null, d3.select(canvas).on(".drag", null))); return canvas; }36:[] 31:{"id":"3f98dcff53abb562","slug":"netcdf","title":"NetCDF","thumbnail":"32aa5109def8ab046fe7cd20141128fdbd70a4e69360ac5648657ad49799d32d","access_level":"public","create_time":"$D2018-04-01T10:18:46.338Z","update_time":"$D2023-01-06T09:59:54.878Z","view_time":null,"first_public_time":"$D2018-04-01T15:31:00.363Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":715,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":37,"collection":{"id":"a80e17434f44ee0d","slug":"geo","title":"Geo","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"title":"NetCDF","cells":[{"id":0,"value":"md`# NetCDF`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`Following [Patrick Brockmann’s example](https://github.com/PBrockmann/D3_netcdfjs) on how to read climate data in the [NetCDF](https://en.wikipedia.org/wiki/NetCDF) format and create geoContours.\n\nThis code shows how to move from planar contours to geoContours and avoid introducing ‘cuts’ and ‘cusps’ at the antimeridian. There might be a better way: the discussion happens [here](https://github.com/PBrockmann/D3_netcdfjs/pull/1)…\n\nThe sources files were extracted by Patrick from http://ferret.pmel.noaa.gov/Ferret/documentation/users-guide/introduction/SAMPLE-DATA-SETS\n\n- \\`uwnd\\` and \\`vwnd\\` are respectively zonal wind and meridional wind.\n They have been extracted from monthly_navy_winds.nc that is the monthly-averaged Naval Fleet Numerical Oceanography Center global marine winds (1982-1990)\n\n- \\`temp\\` is the sea surface temperature and comes from the levitus_climatology.\n\n- \\`rose\\` is the relief of the earth's surface at 60-minute resolution and comes from the etopo60 file.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`## ${source.label || \"Map\"}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"visual = map(polygons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof projName = Inputs.radio(\n new Map([\n [\"Orthographic\", \"ortho\"],\n [\"Equirectangular\", \"equirectangular\"],\n [\"Hill\", \"hill\"],\n [\"Equal-Earth\", \"equalearth\"],\n [\"AzEqualArea\", \"azequalarea\"]\n ]),\n {\n label: \"Choose projection\",\n value: \"hill\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"{ \n while (true) {\n var p = projection.rotate().map(d3.format(\".2f\"));\n yield md`Angles: λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"viewof dataSource = Inputs.radio(new Map(sources.map((d, i) => [d.label, i])), {\n label: \"Choose data source\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`### Read NetCDF`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then((d) => d.NetCDFReader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"sources = [\n {src: \"navy_winds_2.nc\", variable: \"UWND\", label: \"Winds UWND\"},\n {src: \"navy_winds_2.nc\", variable: \"VWND\", label: \"Winds VWND\"},\n {src: \"etopo60_2.nc\", variable: \"ROSE\", label: \"Topography\"},\n {src: \"temp.nc\", variable: \"TEMP\", preprocess: true, label: \"Ocean temperatures\"},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"source = sources[dataSource]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"// WND values are -1000000 for Earth and there is a 160° shift\nfunction preprocessWnd(values) {\n values = values.map(d => d < -1e4 ? -3 : d);\n for (var j=0; j topology.arcs[r[0]].length > 2);\n var p = topojson.feature(topology, topology.objects.polygon);\n p.value = polygon.value;\n return p;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`### Creating the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"color = d3.scaleSequential(d3.interpolatePlasma)\t\t// https://github.com/d3/d3-scale-chromatic\n .domain(d3.extent(values))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"color.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"projection = {\n switch (projName) {\n case \"ortho\":\n var p = d3.geoOrthographic().precision(0.1);\n d3.timer(_ =>\n p.rotate([p.rotate()[0] + 0.1, p.rotate()[1], p.rotate()[2] || 0])\n );\n return p;\n case \"hill\":\n return d3.geoHill();\n case \"azequalarea\":\n return d3.geoAzimuthalEqualArea();\n case \"equalearth\":\n return d3.geoEqualEarth();\n case \"equirectangular\":\n default:\n return d3.geoEquirectangular().rotate([120, 0]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"land = {\n const world = await d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\");\n return topojson.feature(world, world.objects.land);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-inertia@0.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"