Published
Edited
Mar 7, 2020
3 forks
{
fullscreen(canvas, { center: true });
const drawgl = createDrawCommand(regl);
do {
const lon = +((Date.now() / 100) % 360).toFixed(2);
projection.rotate([lon, eye.match(/north/) ? 90 : -90]);
drawgl();
canvas.render();
yield lon;
} while (true);
}
// Image source https://www.solarsystemscope.com/textures/
image = FileAttachment("8k_jupiter.jpg")
.image()
.then(d => Object.assign(d, { style: "max-height:100px" }))
projection = d3.geoProjection(d3.geoHammerRaw(1.75, 2)).rotate([-10, 90])
breisemeister = () => `
x /= 1.75;
float rho = sqrt(x * x + y * y);
if (rho > sqrt(2.0)) {
transparent = true;
} else {
float c = 2.0 * asin(rho / 2.0);
float sinc = sin(c);
float cosc = cos(c);
lambda = 2.0 * atan(x * sinc, rho * cosc);
phi = asin(y * sinc / rho);
}
`
projection.fitExtent([[10, 10], [width - 10, height - 10]], { type: "Sphere" })
glproj = breisemeister()
import { reglCanvas, createDrawCommand, regl, fullscreen, height } with {
width,
projection,
glproj,
image
} from "@fil/phytoplankton"
d3 = require("d3-geo", "d3-geo-projection")
import { radio } from "@jashkenas/inputs"
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.
