im = d3
.image(await FileAttachment("heidi-couverture-livre.jpg").url(), {
crossOrigin: "anonymous"
})
.then(d => ((d.style = "max-width: 200px"), d))
// this object shows the structure needed by Jochen’s implementation
grid = function(channel) {
const context = DOM.context2d(w, h, 1);
context.drawImage(im, 0, 0, w, h);
const data = context.getImageData(0, 0, w, h);
return {
width: w,
height: h,
pos_at_index: function(idx) {
return [idx % w, Math.floor(idx / w)];
},
values: data.data
.filter((_, i) => i % 4 === channel)
.map(d => (!inverse ? 255 - d : d))
};
}
r = grid(0)
g = grid(1)
b = grid(2)
import { stipples_new as stipples_r } with {
r as himmelblau_grid
} from "b333da9462d0762b" // a variant of "@grtlr/stippling-of-2d-scalar-fields" using d3-delaunay instead of d3-voronoi
import { stipples_new as stipples_g } with {
g as himmelblau_grid
} from "b333da9462d0762b" // a variant of "@grtlr/stippling-of-2d-scalar-fields" using d3-delaunay instead of d3-voronoi
import { stipples_new as stipples_b } with {
b as himmelblau_grid
} from "b333da9462d0762b" // a variant of "@grtlr/stippling-of-2d-scalar-fields" using d3-delaunay instead of d3-voronoi
w = Math.min(width)
h = ((im.height / im.width) * w) | 0
d3 = require("d3@5")
import { checkbox } 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.
