Published
Edited
Oct 28, 2020
1 fork
32 stars
viewof valuesClipped = {
const rad = borderradius;
const context = DOM.context2d(width, height, 1),
path = d3.geoPath().context(context);
const contextGrey = DOM.context2d(width, height, 1);
const greys = d3
.scaleSequential(t => d3.rgb((t *= 256), t, t))
.domain([0, 256]);
context.fillStyle = color(0);
context.fillRect(0, 0, width, height);
contextGrey.fillStyle = greys(0);
contextGrey.fillRect(0, 0, width, height);
for (let i = 0; i < data.length; i++) {
context.save();
context.beginPath();
context.arc(data[i][0], data[i][1], rad, 0, 7);
context.clip();
context.beginPath();
voronoi.renderCell(i, context);
context.strokeStyle = context.fillStyle = color(data[i][2]);
context.fill();
context.stroke();
context.restore();
contextGrey.save();
contextGrey.beginPath();
contextGrey.arc(data[i][0], data[i][1], rad, 0, 7);
contextGrey.clip();
contextGrey.beginPath();
voronoi.renderCell(i, contextGrey);
contextGrey.strokeStyle = contextGrey.fillStyle = greys(data[i][2]);
contextGrey.fill();
contextGrey.stroke();
contextGrey.restore();
}
for (const d of data) {
context.beginPath();
path({ type: "Point", coordinates: d });
context.fillStyle = color(d[2]);
context.fill();
context.strokeStyle = "#fff";
context.stroke();
}
const g = contextGrey.getImageData(0, 0, width, height).data;
return Object.assign(context.canvas, {
value: Float32Array.from(
{ length: width * height },
(_, i) => g[i * 4] + .001
)
});
}
d3 = require("d3@6", "array-blur@1")
delaunay = d3.Delaunay.from(data)
voronoi = delaunay.voronoi([0, 0, width, height])
color = d3.scaleSequential(d3["interpolate"+scheme]).domain([0, 255])
blurred = d3
.blur()
.width(width)
.radius(radius)(valuesClipped)
{
await visibility();
const context = DOM.context2d(width, height, 1);
const data = context.getImageData(0, 0, width, height);
for (let i = 0; i < blurred.length; i++) {
data.data[4 * i] = data.data[4 * i + 1] = data.data[4 * i + 2] = blurred[i];
data.data[4 * i + 3] = 255;
}
context.putImageData(data, 0, 0);
return context.canvas;
}
contours = d3.contours().size([width, height])(blurred)
data = (replay,
Array.from(Object.values(states), d => [
((width - 150) * d.x) / 12 + 90,
-((height - 150) * d.y) / 9 + 90,
somevalue || Math.floor(Math.random() * 256)
]))
somevalue = (replay, samevalue && 100 + 150 * Math.random())
states = FileAttachment("tileCoords (1).json").json()
height = (width - 150) * 0.6 + 150
import { checkbox, select, slider } 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.
