function solve(w, h, n, m=1, threshold=0.001) {
var error = 1, p=0, i=0, x = w / n;
while (error > threshold && i < 1000) {
p = (h - x * m) / 2; // Calculate what p should be based on x.
var newx = (w - 2 * p) / n // Calculate what x should be based on p
error = Math.abs(newx - x); // Update the error
x = newx; // Update x
i++;
}
return [p, x];
}
function asanohaQuadrant(transform, stroke="black", strokeWidth=2) {
return htl.svg.fragment`<g transform="${transform}">
<path d="M 0 0 L 100 100 L 75 25 L 0 0 M 100 0 L 75 25" stroke="${stroke}" stroke-width="${strokeWidth}" fill="none" vector-effect="non-scaling-stroke"/>
<path d="M 100 100 L 25 75 L 0 0 M 0 100 L 25 75" stroke="${stroke}" stroke-width="${strokeWidth}" fill="none" vector-effect="non-scaling-stroke"/>
<rect x=0 y=0 width=100 height=100 stroke="${stroke}" stroke-width="${strokeWidth}" fill="none" vector-effect="non-scaling-stroke" />
</g>`}
function asanoha(x, y, size, stroke="black", strokeWidth=2) {
return htl.svg.fragment`<g transform="translate(${x} ${y}) scale(${size / 100})">
${asanohaQuadrant("scale(0.5)", stroke, strokeWidth)}
${asanohaQuadrant("translate(50, 50) scale(-0.5 0.5)", stroke, strokeWidth)}
${asanohaQuadrant("translate(50, 50) scale(0.5 -0.5)", stroke, strokeWidth)}
${asanohaQuadrant("translate(100, 100) scale(-0.5 -0.5)", stroke, strokeWidth)}
</svg>`
}
htl.svg`<svg>${asanoha(100,10,100)}<svg>`
import {Scrubber} from "@mbostock/scrubber"
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.
