height = width * 0.4
{
let svg_width = 800;
let svg_height = (2 * svg_width) / PHI ** 2;
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, svg_width, svg_height])
.style("max-width", `${svg_width}px`);
svg
.selectAll("path")
.data(shapes)
.join("path")
// Piece together the triangles to form either Rhombs or Kites and Darts
// depending whether depth is odd or even
.attr("d", (d) => d.path)
.attr("stroke", "none")
.attr("fill", "green")
.attr(
"transform",
(d) =>
`translate(${d.x} ${d.y}) rotate(${
(d.t * 180) / (Math.PI / 2)
}) scale(${5})`
);
return svg.node();
}
// {
// const height = 300;
// const svg = d3
// .create("svg")
// .style("border", "1px solid black")
// .attr("width", width)
// .attr("height", height)
// //.attr("viewBox", "-10 -10 20 20")
// .style("font", "10px sans-serif")
// .style("max-width", "100%")
// .style("height", "auto")
// .attr("text-anchor", "middle");
// seed.forEach((tri) => tri.render(svg));
// return svg.node();
// }
// html`<svg width="${Math.min(width, 650)}" height="${Math.min(
// width,
// 450
// )}" viewbox="-10 -10 20 20">
// <rect x="-10" y="-10" width="20" height="20" stroke="black" fill="none" stroke-width="0.05"></rect>
// ${shapes.map((s) => s.render)}
// </svg>`
maxgen = 7
mutable tiles = []
shapes = {
const s = width;
// let tiles = [];
for (let i = 0; i < 5; i++) {
const theta = (i * TAU) / 5;
const neoL = new Triangle(
width / 2,
height / 2,
theta,
s,
1,
0,
0,
false,
tiles
);
const neoR = new Triangle(
width / 2,
height / 2,
theta + Math.PI / 5,
s,
1,
1,
0,
false,
tiles
);
mutable tiles.push(neoL);
mutable tiles.push(neoR);
}
return;
}
drawFromArr = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d[0])
.y((d) => d[1])
drawFromObj = d3
.line()
.curve(d3.curveLinearClosed)
.x((d) => d.x)
.y((d) => d.y)
s = undefined
deg = (d) => d / 360 * TAU
lerp = (a, b, t) => a + (b - a) * t
TAU5 = TAU/5;
TAU = Math.PI * 2
PHI = (1 + Math.sqrt(5)) / 2
phiSqr = PHI * PHI
H = Math.sqrt(1-phiSqr/4) // height of oblique triangle
h = Math.sqrt(1 - 1 / (4 * phiSqr)) // height of acute triangle
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.
