function delay(milliseconds) {
return new Promise((resolve) => {
setTimeout(resolve, milliseconds);
});
}
proj2 = mkProjection()
proj1 = mkProjection()
color = d3.scaleSequential(d3.extent(grid), d3.interpolateCividis)
q = 3 // The level of detail, e.g., sample every 4 pixels in x and y.
mkProjection = () => {
return (
d3
.geoOrthographic()
// .geoNaturalEarth1()
// .geoAzimuthalEqualArea()
.fitExtent(
[
[1, 1],
[width * 0.8, height * 0.8]
],
{ type: "Sphere" }
)
.rotate([0, -30])
);
}
projection1 = d3
.geoIdentity()
.translate([-q / 2, -q / 2])
.scale(q)
contours = d3.contours().size([n, m])
grid = {
const period = 0.005 * periodScaler;
const grid = new Float64Array(n * m);
// const scale = d3
// .scaleLinear()
// .domain([0, n])
// .range([0, Math.PI * 2]);
for (let j = 0; j < m; ++j) {
for (let i = 0; i < n; ++i) {
grid[j * n + i] = noise.noise(i * period, j * period);
}
}
return grid;
}
noise = new Noise(3)
class Noise {
static lerp(t, a, b) {
return a + t * (b - a);
}
static grad2d(i, x, y) {
const v = (i & 1) === 0 ? x : y;
return (i & 2) === 0 ? -v : v;
}
constructor(octaves = 1) {
this.p = new Uint8Array(512);
this.octaves = octaves;
this.init();
}
init() {
for (let i = 0; i < 512; ++i) {
this.p[i] = Math.random() * 256;
}
}
noise2d(x2d, y2d) {
const X = Math.floor(x2d) & 255;
const Y = Math.floor(y2d) & 255;
const x = x2d - Math.floor(x2d);
const y = y2d - Math.floor(y2d);
const fx = (3 - 2 * x) * x * x;
const fy = (3 - 2 * y) * y * y;
const p0 = this.p[X] + Y;
const p1 = this.p[X + 1] + Y;
return Noise.lerp(
fy,
Noise.lerp(
fx,
Noise.grad2d(this.p[p0], x, y),
Noise.grad2d(this.p[p1], x - 1, y)
),
Noise.lerp(
fx,
Noise.grad2d(this.p[p0 + 1], x, y - 1),
Noise.grad2d(this.p[p1 + 1], x - 1, y - 1)
)
);
}
noise(x, y) {
let e = 1,
k = 1,
s = 0;
for (let i = 0; i < this.octaves; ++i) {
e *= 0.5;
s += (e * (1 + this.noise2d(k * x, k * y))) / 2;
k *= 2;
}
return s;
}
}
height = 300
width = 600
import { drag } from "@d3/versor-dragging"
d3 = require("d3", "d3-geo-voronoi", "d3-geo-projection")
import { samples } from "@mbostock/1d-poisson-disk-sampling"
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.
