canvas = {
const context = DOM.context2d(width,height);
const projection = d3.geoIdentity().scale(width/n);
const path = d3.geoPath(projection, context);
context.lineWidth =2;
context.lineJoin = "round";
context.strokeStyke = "magenta";
for (let t=0 , T=300; true; t = ( t + 3 )% T) {
context.drawImage(image, 0, 0,width, height);
context.beginPath();
path(contours.contour(values, t/T));
context.stroke();
yield context.canvas;
}
}
contours = d3.contours().size([n,m])
m = image.naturalHeight
n = image.naturalWidth
values = {
const canvas = document.createElement("canvas");
canvas.width= n ;
canvas.height = m;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
const data = context.getImageData(0, 0, n , m);
const values = new Float64Array(n*m);
for (let j = 0, k = 0; j < m; ++j){
for (let i = 0; i<n; ++i, ++k){
values[k] = data.data[k<<1]/255;
}
}
return d3.blur2({data: values, width: n},3).data;
}
image = Object.assign(await FileAttachment("cloud-fraction.png").image(), {style: "max-height: 33px; display: block;"})
height = Math.ceil(width /2 )
d3 = require("d3@7.6.0/dist/d3.min.js")
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.
