WIDTH = Math.min(800, width)
HEIGHT = 500
ORIGIN = [400,0,-800,0]
L = 10
FINETUNE_DEGREES = 9
HEX_SIDE = L/2 * Math.sqrt((2 + 2/SQRT3) * (1 + 1 / (Math.sqrt(15) + 4)));
function makeCluster(type, pt, rot) {
const tiles = [];
let pts1, pts3, pts5, pts6, pts7;
tiles.push(pts5 = tile('Γ1', pt, 0, 3, rot)); // 5
tiles.push(tile('Γ2', pts5[9], 5, 4, rot)); // 8
tiles.push(pts6 = tile(TILE6[type], pts5[1], 11, 0, rot)); // 6
tiles.push(tile('Δ', pts5[1], 13, 2, rot)); // 2
tiles.push(pts1 = tile(TILE1[type], pts5[5], 11, 4, rot)); // 1
tiles.push(tile('Σ', pts5[5], 13, 6, rot)); // 4
tiles.push(pts7 = tile(TILE7[type], pts5[9], 11, 8, rot)); // 7
tiles.push(pts3 = tile(TILE3[type], pts6[6], 0, 2, rot)); // 3
if (type !== 'Γ') {
tiles.push(tile(TILE9[type], tiles[4][6], 0, 6, rot)); // 9
}
const control_points = [
pts1[4],
pts7[6],
pts6[4],
pts3[6],
];
return {
tiles,
control_points
};
}
function makeSupercluster(type, pt, r, level) {
if (level == 0) {
return makeCluster(type, pt, r);
}
const c1 = makeSupercluster('Γ', pt, 11 - r, level - 1);
const c2 = makeSupercluster(TILE6[type][0], c1.control_points[1], 3 - r, level - 1);
translate(c2.control_points[1], c1.control_points[1], c2);
const c3 = makeSupercluster(TILE7[type], c1.control_points[2], 7 - r, level - 1);
translate(c3.control_points[2], c1.control_points[2], c3);
const c4 = makeSupercluster('Δ', c3.control_points[1], 9 - r, level - 1);
translate(c4.control_points[3], c3.control_points[1], c4);
// If type == 'Γ' then this cluster is not real, but we need to
// make some random 9-cluster just to get the control point,
// so I chose Ξ arbitrarily.
//
// We could avoid this by starting the chain in a different place.
const c5 = makeSupercluster(type == 'Γ' ? 'Ξ' : TILE9[type], c4.control_points[0], 9 - r, level - 1);
translate(c5.control_points[2], c4.control_points[0], c5);
const c6 = makeSupercluster(TILE1[type][0], c5.control_points[1], 11 - r, level - 1);
translate(c6.control_points[3], c5.control_points[1], c6);
const c7 = makeSupercluster('Σ', c6.control_points[1], 1 - r, level - 1);
translate(c7.control_points[3], c6.control_points[1], c7);
const c8 = makeSupercluster(TILE3[type], c7.control_points[0], 1 - r, level - 1);
translate(c8.control_points[2], c7.control_points[0], c8);
let tiles = c1.tiles.concat(
c2.tiles, c3.tiles, c4.tiles, c6.tiles, c7.tiles, c8.tiles,
);
if (type != 'Γ') {
tiles = tiles.concat(c5.tiles);
}
return {
control_points: [
c6.control_points[0],
c3.control_points[3],
c2.control_points[0],
c8.control_points[3],
],
tiles
};
}
tiles = {
const c1 = makeSupercluster('Γ', ORIGIN, 0, 3);
const c3 = makeSupercluster(TILE7['Ξ'], c1.control_points[2], 8, 3);
translate(c3.control_points[2], c1.control_points[2], c3);
const c4 = makeSupercluster('Δ', c3.control_points[1], 10, 3);
translate(c4.control_points[3], c3.control_points[1], c4);
return c1.tiles.concat(c4.tiles);
}
{
const ct = canvas.ct;
ct.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
ct.strokeStyle = 'white';
ct.strokeStyle = 'white';
for (const spectre of tiles) draw(ct, spectre);
return this || html`(<i>the drawing function</i>)`;
}
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.
