Maps, Infovis, Code
{
const height = 300 / dpr;
const w = width / dpr;
const context = DOM.context2d(w, height);
context.fillStyle = `rgba(255, 255, 255, 1)`;
context.fillRect(0, 0, w, height);
context.scale(1 / dpr, 1 / dpr);
drawCosineOneDim(n, context, w);
yield context.canvas;
}
function drawCosineOneDim(n, context) {
const { width, height } = context.canvas;
const xStart = 70;
const xEnd = width - 70;
const yHeight = 120;
const xAxis = [[xStart, yHeight], [xEnd, yHeight]];
const yAxis = [[xStart, 70], [xStart, height - 70]];
//drawAxis(context, xAxis, yAxis);
const scale = 100;
const f = x => Math.cos(n * Math.PI * x);
context.lineWidth = 4;
context.beginPath();
context.moveTo(xStart, yHeight - scale * f(0));
for (let i = 0; i <= 1; i += 0.001) {
context.lineTo((1 - i) * xStart + i * xEnd, yHeight - scale * f(i));
}
context.strokeStyle = 'rgb(50, 50, 50)';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.strokeStyle = 'rgb(255, 0, 0)';
const cosSamples = [];
for (let i = 0; i <= 1; i += 1 / 7) {
/*
context.beginPath();
const p = [(1 - i) * xStart + i * xEnd, yHeight];
context.arc(...p, 5, 0, 2 * Math.PI, false);
context.fill();
context.beginPath();
context.moveTo(...p);
context.lineTo(p[0], yHeight - scale * f(i));
context.stroke();
*/
cosSamples.push(f(i));
}
context.lineWidth = 1;
const l = xEnd - xStart;
const [boxW, boxH] = [l / 7 - 4, 20];
for (let i = 0; i < cosSamples.length; ++i) {
context.fillStyle = cosValueToRgb(cosSamples[i]);
context.fillRect(20 + i * boxW, height - 30, boxW, boxH);
context.strokeStyle = 'rgb(255,0,0)';
context.strokeRect(20 + i * boxW, height - 30, boxW, boxH);
}
}
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.
