Published
Edited
Feb 1, 2021
1 fork
62 stars
Also listed in…
Genuary 2021
{
const canvas = DOM.canvas(width, height);
var context = canvas.getContext("2d");
context.lineWidth = 2;
for (var poly of polys){
context.fillStyle = gradientscale(poly.centroid.y / height)//COLS[poly.colorid];
context.strokeStyle = "#eef4ed"
context.beginPath();
var iii = 0;
for( let P of poly.polygon ) {
if(iii==0){
context.moveTo( P.x, P.y );
}else{
context.lineTo( P.x, P.y );
}
iii++;
}
var P0 = poly.polygon[0];
context.lineTo( P0.x, P0.y );
context.fill();
context.stroke();
const centroid = poly.centroid
context.fillStyle = "#eef4ed"
context.beginPath();
context.arc(centroid.x, centroid.y, 2, 0, 2 * Math.PI);
context.fill();
}
// shrink this a bit so it doesn't hog the whole page...
// after all, it's not the star of the show
const shrink = 0.4;
const canvas_small = DOM.canvas(width*shrink, height*shrink);
var context_small = canvas_small.getContext("2d");
context_small.drawImage(canvas, 0, 0, width*shrink, height*shrink);
return canvas_small
}
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.
