Published
Edited
Aug 2, 2020
5 forks
Importers
19 stars
draw = {
context.fillStyle = "rgba(255,255,255,0.4)"; // a cheap blur effect
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]);
// (`rgb(${k[0]*256 | 0}, ${k[1]*256 | 0}, ${k[2]*256 | 0})`);
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.`;
}
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.
