{
const selected = data.slice(selectIdx, selectIdx + 1);
return Plot.plot({
grid: true,
x: { nice: true },
y: { nice: true },
color: {
scheme: "Blues",
nice: true,
legend: true,
domain: [-1, d3.max(data, (d) => d.order) + 1]
},
marks: [
displayRaster
? Plot.raster(searchlightData, {
x: "x",
y: "y",
fill: "order",
blue: 5,
// interpolate: "random-walk"
interpolate: "barycentric"
})
: undefined,
Plot.voronoi(data, {
x: "x",
y: "y",
stroke: "gray",
fill: displayRaster ? undefined : "order",
opacity: displayRaster ? 0.8 : 0.5
}),
Plot.dot(selected, {
x: "x",
y: "y",
r: 10,
strokeWidth: 2,
stroke: color
}),
Plot.dot(searchlightData, { x: "x", y: "y", fill: color, opacity: 0.5 }),
Plot.text(searchlightData, {
x: "x",
y: "y",
text: "order",
dy: -8,
dx: 8,
fill: color,
fontSize: 15,
opacity: 0.5
}),
Plot.frame()
]
});
}
searchlightData
Type Table, then Shift-Enter. Ctrl-space for more options.
searchlightData = {
var inside = [],
edge = [selectIdx],
nextEdge;
data.map((d) => (d.order = undefined));
for (let order = 0; order < 100; ++order) {
nextEdge = [];
edge.map((d) => {
inside.push(d);
// ! Only select **real** neighbours
// https://github.com/d3/d3-delaunay/issues/97
if (withVoronoi) {
nextEdge = nextEdge.concat([...voronoi.neighbors(d)]);
// nextEdge = nextEdge.concat([...delaunay.voronoi().cellPolygon(d)]);
} else {
nextEdge = nextEdge.concat([...delaunay.neighbors(d)]);
}
if (!data[d].order) data[d].order = order;
});
inside = [...new Set(inside)];
edge = [...new Set(nextEdge)].filter((d) => inside.indexOf(d) < 0);
edge.map((d) => {
data[d].order = order;
});
if (inside.length === data.length) break;
}
return data;
}
[...delaunay.neighbors(selectIdx)]
[...voronoi.neighbors(selectIdx)]
voronoi = delaunay.voronoi([0, 0, 1, 1])
delaunay = d3.Delaunay.from(data.map((d) => [d.x, d.y]))
data = {
const data = [];
for (let i = 0; i < num; ++i) {
data.push({ i, x: rnd(), y: rnd(), order: undefined });
}
return data;
}
rnd = d3.randomUniform()
d3 = require("d3")
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.
