Snakes on a Cartesian Plane 🐍
a={
await visibility();
var pal = ["#8ecae6","#73bfdc","#58b4d1","#219ebc","#126782",
"#023047","#ffb703","#fd9e02","#fb8500","#fb9017"]
const w = width,h = width;
const context = DOM.context2d(w, h);
context.fillStyle = "#f2f9fc";
context.fillRect(0,0,w,h);context.fillRect(0,0,w,h);
clusters2.sort(function (a, b) {
return ((a[0]**2+a[1]**2) - (b[0]**2+b[1]**2));
});
for (var cluster of clusters2) {
var points = cluster.points;
var cities = points.map(function(z) {return {x: z[0],y: z[1]};});
var path = solveTSP(cities);
var myColor = pal[Math.floor(Math.random() * pal.length)];
for (var jj=2; jj<path.length; jj++){
var p_A = cities[path[jj-2]];
var p_B = cities[path[jj-1]];
var p_C = cities[path[jj-0]];
for (var nn=0; nn<=1; nn+=0.04){
var p = 1-nn;
var q = nn;
context.beginPath();
context.moveTo(p*p_A["x"]+q*p_B["x"], p*p_A["y"]+q*p_B["y"]);
context.lineTo(p*p_B["x"]+q*p_C["x"], p*p_B["y"]+q*p_C["y"]);
context.strokeStyle = myColor
context.lineWidth = 0.75;
context.globalAlpha = 0.5;
context.stroke();
}
if(jj % 5 == 0){yield context.canvas;}
}
}
yield context.canvas;
}
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.
