Public
Edited
Apr 10, 2024
1 star
f = (x) => 2 * x + 5;
scope= [-5, 5];
N=100
function funcPlot(func, scope,dash) {return Plot.plot({
width:400, height:400,
inset:10,
marks: [
Plot.frame(),
Plot.line(Array.apply(null, {length: N+1}).map((d,i)=>{return i}),{
x:d=>scope[0]+((scope[1]-scope[0])*d/N),
y:d=>func(scope[0]+((scope[1]-scope[0])*d/N)),
strokeDasharray:dash ? "4,4" : "1",
strokeDashoffset:dash ? Math.floor(now /100) %8:0,
}),
Plot.axisX({ y: 0 }),
Plot.axisY({ x: 0 }),
Plot.ruleX([0]),
Plot.ruleY([0])
]
})}
{
window.addEventListener("keydown",(e)=> {if (e.key === 'Alt') mutable altDown = true});
window.addEventListener("keyup",(e)=> {if (e.key === 'Alt') mutable altDown = false});
}
mutable altDown = false;
mutable keyState = null;
chart = {
const container = htl.html`<div style="tabindex=0"></div>`;
console.log("refresh");
const chart = funcPlot((x)=>x*Math.pow(x-1,2)*Math.sin(x-3),[-10,10],altDown)
container.appendChild(chart);
chart.setAttribute("tabindex",0);
chart.addEventListener('mouseenter', event => {
//mutable keyState = chart.getAttributeNames();
});
chart.addEventListener('mouseleave', event => {
//mutable keyState = '';
});
return container;
}
fPlot = funcPlot((x)=>x*Math.pow(x-1,2)*Math.sin(x-3),[-10,10],altDown)
{
const c = cube.cloneNode(true);
c.setAttribute("stroke","green");
return c;
}
logSVG(icon);
cube = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-3d-cube-sphere" width="64" height="64" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 17.6l-2 -1.1v-2.5" />
<path d="M4 10v-2.5l2 -1.1" />
<path d="M10 4.1l2 -1.1l2 1.1" />
<path d="M18 6.4l2 1.1v2.5" />
<path d="M20 14v2.5l-2 1.12" />
<path d="M14 19.9l-2 1.1l-2 -1.1" />
<path d="M12 12l2 -1.1" />
<path d="M18 8.6l2 -1.1" />
<path d="M12 12l0 2.5" />
<path d="M12 18.5l0 2.5" />
<path d="M12 12l-2 -1.12" />
<path d="M6 8.6l-2 -1.1" />
</svg>`
svgIcon = htl.svg`<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-accessible-off-filled" width="64" height="64" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.051 6.844a1 1 0 0 0 -1.152 -.663l-.113 .03l-2.684 .895l-2.684 -.895l-.113 -.03a1 1 0 0 0 -.628 1.884l.109 .044l2.316 .771v.976l-1.832 2.75l-.06 .1a1 1 0 0 0 .237 1.21l.1 .076l.101 .06a1 1 0 0 0 1.21 -.237l.076 -.1l1.168 -1.752l1.168 1.752l.07 .093a1 1 0 0 0 1.653 -1.102l-.059 -.1l-1.832 -2.75v-.977l2.316 -.771l.109 -.044a1 1 0 0 0 .524 -1.221zm-3.949 -4.184a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0 -3z" stroke-width="0" fill="currentColor" />
</svg>`
icon = {
const icon = svgIcon.cloneNode(true);
icon.setAttribute("color","red");
icon.setAttribute("stroke","yellow");
return icon;
}
function logSVG(svg) {
// @ts-ignore
const clientRect = svg.getBoundingClientRect();
const width = clientRect.width;
const height = clientRect.height / 2;
// Get svg data
var xml = new XMLSerializer().serializeToString(svg);
// Make it base64
var svg64 = btoa(xml);
var b64Start = "data:image/svg+xml;base64,";
// Prepend a "header"
var image64 = b64Start + svg64;
const style =
"font-size: 1px; padding: " +
Math.floor(height / 2) +
"px " +
Math.floor(width / 2) +
"px; line-height: " +
height +
"px;";
// Logging part
console.log(
"%c" + "+",
style +
"background-image: url(" +
image64 +
"); background-size: " +
width +
"px " +
height +
"px; background-size: 100% 100%; background-repeat: norepeat; color: #fff;"
);
}
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.
