Maps — and other representations of the world.
projection = {
const A = [152, -64, 0];
return d3
.geoProjection(d3.geoModifiedStereographicRaw(coeffs, A))
.rotate(A)
.clipAngle(21)
.angle(7.8)
.fitExtent(
[
[0, 0],
[width, height]
],
land
)
.precision(0.01);
}
coeffs = [
[0.9972523, 0],
[0.0052513, -0.0041175],
[0.0074606, 0.0048125],
[-0.0153783, -0.1968253],
[0.0636871, -0.1408027],
[0.3660976, -0.2937382]
]
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("")}
}
`
// useful region extracted from
// https://visibleearth.nasa.gov/images/74343/may-blue-marble-next-generation-w-topography/74353l
image = FileAttachment("equirect.png")
.image()
.then((d) => Object.assign(d, { style: "max-height: 250px" }))
height = (width * 0.6) | 0
import { reglCanvas, createDrawCommand, regl } with {
width,
height,
projection,
glproj,
preamble,
image
} from "@fil/phytoplankton"
d3 = require("d3@7", "d3-geo-projection@3", "d3-geo-polygon@1")
import { atan2, cos, degrees, halfPi, radians, sin, sqrt } from "@fil/math"
land = d3
.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/50m_countries.geojson"
)
.then(d => d.features.filter(d => d.properties.su_a3 === "USA")[0])
import { fullscreen } from "@fil/fullscreen"
fullscreen(canvas)
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.
