Public
Edited
Feb 20, 2023
{
const node = html`<svg width=640 height=640 viewBox="0 0 ${4+w} ${4+w}" style="border: 1px solid #333" stroke-width="0.01" fill="#999" stroke=black></svg><p id="caption" style="margin-left:220px; padding-bottom:20px;"></p>`;
node.querySelector("#caption").appendChild(tex`s = ${4+w}`);
const s = node.querySelector("svg");
s.appendChild(svg`<rect width=1 height=1 x=0 y=0></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=1 y=0></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${3+w} y=0></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=0 y=1></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=0 y=${2+w}></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=0 y=${3+w}></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=1 y=${3+w}></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=2 y=${3+w}></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${3+w} y=${3+w}></rect>`);
s.appendChild(svg`<rect width=1 height=1 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=1 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${fudge} y=-1 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${1+fudge} y=-1 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${fudge} y=-2 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${1+fudge} y=-2 transform="translate(${1 - dh} ${1 + w - dw}) rotate(${90 - θ_degrees},0,1)"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${3+w} y=${2+w} transform="translate(${-dw} ${dh}) rotate(${-θ_degrees},${3+w},${3+w})"></rect>`);
s.appendChild(svg`<rect width=1 height=1 x=${4+w} y=${2+w} transform="translate(${-dw} ${dh}) rotate(${-θ_degrees},${3+w},${3+w})"></rect>`);
// s.appendChild(svg`<rect fill=red width=1 height=1 x=2.2 y=0></rect>`);
return node;
}
w = asdf0.67764829496513280738 // FindRoot[ 3 Sec[(ArcCos[ 1/w (1 - Sqrt[1 - w])] - ArcTan[w + 2, w + 1])] - Sqrt[(w + 2)^2 + (w + 1)^2], {w, 0.67}, WorkingPrecision -> 20]
θ = Math.acos((1-Math.sqrt(1-w))/w)
θ_degrees = θ * 180 / Math.PI
α = θ - Math.PI/4
α_degrees = α * 180 / Math.PI
dw = w * Math.cos(θ)**2
dh = w * Math.sin(2*θ) / 2
(3/Math.cos(α) + 0.5*Math.tan(α))/Math.SQRT2 + 2.5
fudge=.135
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.
