viewof d = {
const tiles = [0, 1, 2, 3, 4]
.map(i => {
return rot(72 * i, trans(long, 0, gen(depth).kite));
})
.flat();
const e = 0.01;
// analysis
const vertices = {};
const edges = {};
tiles.forEach((tile, id) => {
console.log("tile", id);
tile.meta.id = id;
tile.forEach(p => {
const x = Math.round(p[0] / e);
const y = Math.round(p[1] / e);
p.meta.id = `(${x},${y})`;
const vertex = (vertices[p.meta.id] = vertices[p.meta.id] || {
edges: new Set(),
tiles: new Set()
});
vertex.tiles.add(tile);
});
tile.meta.edges = [];
for (let i = 0; i < tile.length; i++) {
const p1 = tile[i];
const p2 = tile[(i + 1) % tile.length];
const x1 = Math.round(p1[0] / e);
const y1 = Math.round(p1[1] / e);
const x2 = Math.round(p2[0] / e);
const y2 = Math.round(p2[1] / e);
const [xmin, xmax] = [Math.min(x1, x2), Math.max(x1, x2)];
const [ymin, ymax] = [Math.min(y1, y2), Math.max(y1, y2)];
const a = `(${xmin},${ymin})`;
const b = `(${xmax},${ymax})`;
const id = a + b;
const edge = (edges[id] = edges[id] || {
a,
b,
tiles: new Set()
});
edge.tiles.add(tile);
tile.meta.edges.push(edge);
}
});
tiles.forEach(tile => {
tile.meta.neighbors = tile.meta.edges
.map(edge => Array.from(edge.tiles))
.flat()
.filter(t => t !== tile);
});
const root = d3.select(svg`<svg width="900" height="600" viewBox="-2 -2 4 4">
<g
stroke-width="0.005"
stroke="black"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="board"
></g>
</svg>`);
let selected;
const paths = root
.select(".board")
.selectAll(".tile")
.data(tiles)
.enter()
.append("path")
.attr("d", tile => `M${tile.join("L")}`)
.attr("fill", tile => tile.meta.color)
.on("mouseover", function(e, tile) {
selected = tile;
update();
})
.on("mouseout", function(e, tile) {
if (selected === tile) {
selected = undefined;
update();
}
});
function update() {
paths.attr("fill", tile => {
if (tile === selected) {
return "black";
} else if (selected && selected.meta.neighbors.includes(tile)) {
return "#777";
} else {
return tile.meta.type === "kite" ? "#eee" : "#eee";
}
});
}
update();
root.node().value = { edges, vertices, tiles };
return root.node();
}
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.
