roughStyle = new g.Style({
drawFun: (cells, cg, resolution) => {
//
const z = cg.view.z;
const min = d3.min(cells, (c) => +c.ind);
const max = d3.max(cells, (c) => +c.ind);
for (let cell of cells) {
if (!cell.ind) continue;
//set fill color as a shade from yellow to brown depending on "ind" property
let t = (cell.ind - min) / (max - min);
t = scale(t);
t = t < 0 ? 0 : t > 1 ? 1 : t;
const col = colorRamp(t);
//see https://github.com/rough-stuff/rough/wiki#fillstyle
//fill cell
//rc.circle(cell.x + resolution / 2, cell.y + resolution / 2, resolution, {
rc.rectangle(cell.x, cell.y, resolution, resolution, {
fillStyle: fillType,
stroke: "none",
fill: col,
roughness: roughness,
bowing: bowing,
hachureAngle: 40,
fillWeight: z * 1.5,
hachureGap: z * 8
});
}
}
})
(map.layers = [layer])
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.
