Published
Edited
May 30, 2021
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
axial_round = (x, y) => {
const xgrid = Math.round(x), ygrid = Math.round(y);
x -= xgrid, y -= ygrid; // remainder
const dx = Math.round(x + 0.5*y) * (x*x >= y*y);
const dy = Math.round(y + 0.5*x) * (x*x < y*y);
return [xgrid + dx, ygrid + dy];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
square_float_to_axial_hex_grid = {
const SQRT3 = Math.sqrt(3),
ratio = [Math.sqrt(4/3), Math.sqrt(Math.sqrt(4/3)), 1][hexsize];

if (pointy_top) return (x, y) => {
x = ratio * 0.5 * (SQRT3*x - y), y *= ratio; // pointy top hexagons
return axial_round(x, y);
}
else return (x, y) => {
y = ratio * 0.5 * (SQRT3*y - x), x *= ratio; // flat top hexagons
return axial_round(x, y);
}
}
Insert cell
Insert cell
square_round = (x, y) => {
const xgrid = Math.round(x), ygrid = Math.round(y);
return [xgrid, ygrid];
}
Insert cell
top_plot_round = squares ? square_round : axial_round;
Insert cell
cursor_to_xy = ([px, py]) => {
const
[width, height] = size,
oy = -zoom * (2/width * py - 0.7),
ox = zoom * (2/width * px - 0.5);
return [ox, oy];
}
Insert cell
imageData1 = {
let [width, height] = size;
width *= 2; height *= 2;
for (let py = 0; py < height; py++) {
const oy = -zoom * (2/width * py - 0.7);
for (let px = 0; px < width; px++) {
const ox = zoom * (2/width * px - 0.5);
const index = 4 * (py*width + px);
data1.set(colorxy(top_plot_round(ox, oy)), index);
}
}
return new ImageData(data1, width, height);
}
Insert cell
imageData2 = {
let [width, height] = size;
width *= 2; height *= 2;
for (let py = 0; py < height; py++) {
const oy = -zoom * (2/width * py - 0.7);
for (let px = 0; px < width; px++) {
const ox = zoom * (2/width * px - 0.5);
const index = 4 * (py*width + px);
data2.set(colorxy(square_float_to_axial_hex_grid(ox, oy)), index);
}
}
return new ImageData(data2, width, height);
}
Insert cell
data1 = new Uint8ClampedArray(2*size[0] * 2*size[1] * 4);
Insert cell
data2 = new Uint8ClampedArray(2*size[0] * 2*size[1] * 4);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more