coeffs = [
[0.9842990, 0],
[0.0211642, 0.0037608],
[-0.1036018, -0.0575102],
[-0.0329095, -0.0320119],
[0.0499471, 0.1223335],
[0.0260460, 0.0899805],
[0.0007388, -0.1435792],
[0.0075848, -0.1334108],
[-0.0216473, 0.0776645],
[-0.0225161, 0.0853673]
]
preamble()
preamble = () => `
void coeff(in int j, inout float a, inout float b) {
${coeffs
.map(
(w, i) => `
if (j == ${i}) {
a = ${w[0].toFixed(6)};
b = ${w[1].toFixed(6)};
}`
)
.join("")}
}
`
projection = d3
.geoProjection(d3.geoModifiedStereographicRaw(coeffs, [120, -45, 0]))
.center(d3.geoRotation([120, -45, 0])([-117.474, 53.0628]))
.preclip(
d3.geoClipPolygon({
type: "Polygon",
coordinates: [
outline.coordinates[0].map(d3.geoRotation([120, -45, 0.0001]))
]
})
)
.rotate([120, -45])
.clipAngle(55)
.fitExtent([[10, 10], [width - 10, height - 10]], outline)
.precision(0.1)
// Outline from https://www.jasondavies.com/maps/modified-stereographic/gs50/
outline = {
return {
type: "Polygon",
coordinates: [
[[-180, 30]]
.concat(parallel(75, -180, -60))
.concat([
[-60, 70],
[-50, 70],
[-50, 40],
[-60, 40],
[-60, 30],
[-65, 30]
])
.concat(parallel(15, -65, -165))
.concat([[-165, 30], [-180, 30]])
]
};
function parallel(y, x0, x1) {
var dx = x0 < x1 ? 5 : -5;
return d3.range(x0, x1 + dx / 2, dx).map(function(x) {
return [x, y];
});
}
}
d3.geoBounds(outline)
// (taken from Mapbox natural earth raster tiles)
image = FileAttachment("world.topo.200405.3x5400x2700.jpg")
.image()
.then(d => Object.assign(d, { style: "max-height:100px" }))
height = Math.min(screen.height || Infinity, (width * 0.7) | 0)
import { zoom, reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
image,
preamble
} from "@fil/phytoplankton"
d3 = require("d3@7", "d3-geo-projection@3", "d3-geo-polygon@1")
import { slider } from "@jashkenas/inputs"
import { atan2, cos, degrees, halfPi, radians, sin, sqrt } from "@fil/math"
import { fullscreen } from "@fil/fullscreen"
fullscreen(canvas)
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
