html`<style>
input{color:black;}
form
{
text-shadow:1px 0px black, -1px 0px black, 0px 1px black, 0px -1px black;
}</style>`
radius
LV_star
viewof position = html`<input type="range" min="-50" max="0" step="0.01" />`
d3 = require('d3')
{
let width = 200;
let view = html`<svg width=${width} height=${200} style="overflow: visible; border:1px solid black;" viewBox="${-(
width +
radius * 5
) / 2} ${-(width + radius * 5) / 2} ${width + radius * 5} ${width +
radius * 5}">
<path d="M${getSquircle(radius, position).join(
"L"
)}Z" fill="none" stroke="black"/>
</svg>`;
yield view;
d3.select(view)
.selectAll('path')
.attr('transform', 'rotate(45)');
}
viewof radius = html`<input type="range" min="0" max="20" step="0.01" value="10" />`
html`
<svg height=${w} width=${w} style="border:dashed 0.5px black;">
<path d="M${w / 2} ${m} v ${w -
m * 2} " stroke-width:10 stroke="black"/>
<path d="M${m} ${w / 2} h ${w -
m * 2} " stroke-width:10 stroke="black"/></svg>`
w = 200
viewof temp1 = DOM.range(0, 200)
viewof temp2 = DOM.range(0, 200)
viewof m = DOM.range(0, 200 / 5)
viewof thickness = DOM.range(0, 50)
html`
<svg height=${w} width=${w} style="border:dashed 0.5px black;">
/*Horizontal*/
<path d="M ${m}, ${w / 2}
C ${w / 2}, ${w - 2 * m}
${w / 2},${thickness}
${w - m}, ${w / 2}"
fill="none" stroke="red" stroke-width="2"/>
<path d="M ${m}, ${w / 2}
C ${m}, ${w / 2}
${w / 2},${w / 2 + thickness}
${w}, ${w / 2}"
fill="none" stroke="blue" stroke-width="2"/>
/*VERTICAL*/
<path d="M ${w / 2}, ${m}
C ${w}, ${w / 2}
${w / 2 + thickness}, ${w / 2}
${w / 2}, ${w}"
fill="none" stroke="green" stroke-width="2"/>
<path d="M ${w / 2}, ${m}
C ${m}, ${w / 2}
${w - thickness * 2}, ${w / 2}
${w / 2}, ${w}"
fill="none" stroke="yellow" stroke-width="2"/>
</svg>`
html`
<svg height=${w} width=${w} style="border:dashed 0.5px black;">
/*Horizontal*/
<path d="M ${m}, ${w / 2}
C ${m}, ${w / 2}
${w / 2},${thickness}
${w - m}, ${w / 2}"
fill="none" stroke="steelblue" stroke-width="2"/>
<path d="M ${m}, ${w / 2}
C ${m}, ${w / 2}
${w / 2},${w - thickness}
${w - m}, ${w / 2}"
fill="none" stroke="steelblue" stroke-width="2"/>
/*VERTICAL*/
<path d="M ${w / 2}, ${m}
C ${w / 2}, ${m}
${thickness}, ${w / 2}
${w / 2}, ${w - m}"
fill="none" stroke="red" stroke-width="2"/>
<path d="M ${w / 2}, ${m}
C ${w / 2}, ${m}
${w - thickness}, ${w / 2}
${w / 2}, ${w - m}"
fill="none" stroke="steelblue" stroke-width="2"/>
</svg>`
import { getSquircle } from '@tophtucker/interpolate-between-square-and-circle'
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.
