draw = {
context.fillStyle = "rgba(255,255,255,0.4)";
context.fillRect(0, 0, width, height);
const X = d3
.scaleLinear()
.domain(d3.extent(solution, d => d[dimX]))
.range([20, width - 20]);
const Y = d3
.scaleLinear()
.domain(d3.extent(solution, d => d[dimY]))
.range([20, (width * 2) / 3 - 20]);
const radius = 150 / Math.sqrt(10 + solution.length);
solution.forEach((point, i) => {
let k = points[i];
context.beginPath();
context.arc(X(point[dimX]), Y(point[dimY]), radius, 0, 2 * Math.PI);
context.fillStyle = d3.hsl(k[0] * 360, 0.3 + 0.5 * k[1], 0.3 + 0.5 * k[2]);
context.fill();
});
return md`A simple loop: we draw a circle for each of the points, its color informed by the points array, its position informed by the solution array.`;
}