I like working on things that seem out of my reach.
Houston, Tx
Published
Edited
Jul 10, 2021
Importers
5 stars
function rampLinear(color, range, title) {
var n;
width > 500 ? (n = width / 2) : (n = width);
const context = DOM.context2d(n, n / 7);
// const context = canvas.getContext("2d");
context.fillStyle = "black";
context.font = n / 25 + "px Open Sans";
context.textAlign = "end";
context.fillText(range[1], n, n / 15);
context.textAlign = "start";
context.fillText(range[0], 0, n / 15);
context.textAlign = "center";
context.fillText(
parseInt(range[1] + (range[0] - range[1]) * 0.75),
n / 4,
n / 15
);
context.textAlign = "center";
context.fillText(
parseInt(range[1] + (range[0] - range[1]) * 0.5),
n / 2,
n / 15
);
context.textAlign = "center";
context.fillText(
parseInt(range[1] + (range[0] - range[1]) * 0.25),
(n * 3) / 4,
n / 15
);
context.textAlign = "center";
context.fillText(title, n / 2, n / 8);
context.canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, n / 30);
}
return context.canvas;
}
function rampLog(color, range, title) {
var n;
width > 500 ? (n = width / 2) : (n = width);
const canvas = DOM.canvas(n, n / 7);
const context = canvas.getContext("2d");
context.fillStyle = "black";
context.font = n / 25 + "px Open Sans";
context.textAlign = "end";
context.fillText(parseInt(range[1]), n, n / 15);
context.textAlign = "start";
context.fillText(parseInt(range[0]), 0, n / 15);
context.textAlign = "center";
context.fillText(
parseInt(
Math.pow(
Math.E,
Math.log(range[0]) + (Math.log(range[1]) - Math.log(range[0])) * 0.25
)
),
n / 4,
n / 15
);
context.textAlign = "center";
context.fillText(
parseInt(
Math.pow(
Math.E,
Math.log(range[0]) + (Math.log(range[1]) - Math.log(range[0])) * 0.5
)
),
n / 2,
n / 15
);
context.textAlign = "center";
context.fillText(
parseInt(
Math.pow(
Math.E,
Math.log(range[0]) + (Math.log(range[1]) - Math.log(range[0])) * 0.75
)
),
(n * 3) / 4,
n / 15
);
context.textAlign = "center";
context.fillText(title, n / 2, n / 8);
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, n / 30);
}
return 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.
