projection = d3
.geoProjection(d3.geoModifiedStereographicRaw(coeffs, [165, 10, 0]))
.rotate([165, 10, 0])
.center([0, 23])
.clipAngle(130)
.precision(0.1)
.scale(width * 0.25)
graticule = d3
.geoGraticule()
.step([10, 10])
.extent([[-40, -40], [80, 80]])
coeffs = [[0.721316, 0], [0, 0], [-0.00881625, -0.00617325]]
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("")}
}
`
// https://visibleearth.nasa.gov/images/74343/may-blue-marble-next-generation-w-topography/74353l
image = FileAttachment("world.topo.200405.3x5400x2700.jpg")
.image()
.then(d => Object.assign(d, { style: "max-height:100px" }))
height = (width * 0.667) | 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 { checkbox, radio, select } from "@jashkenas/inputs"
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.
