Published
Edited
Jul 25, 2021
3 stars
Insert cell
md`# CindyJS`
Insert cell
Cindy(
{
ports: [
{
id: "colorplot",
width: width,
height: width,
transform: [
{
visibleRect: [-10, 10, 10, -10]
}
]
}
],
animation: {
autoplay: true
},
scripts: {
init: `
W(x, t, p) := sin(5*|x-p|-t); //helper function
resetclock();`,
draw: `
colorplot(
u = W(#, seconds(), A) + W(#, seconds(), B);
gray(1/2+u/4) //the last line is the return value!
);`
},
geometry: [
{ name: "A", kind: "P", type: "Free", pos: [-4, 4] },
{ name: "B", kind: "P", type: "Free", pos: [3, -8] }
]
},
visibility,
invalidation
)
Insert cell
Cindy(
{
ports: [
{
id: "simple",
axes: true,
grid: 1,
width: width,
height: width,
transform: [
{
visibleRect: [-5, 5, 5, -5]
}
]
}
],
animation: {
autoplay: true
},
scripts: {
init: `
create(["A"],"Free",[[1,1,1]]);
create(["B"],"Free",[[4,3,1]]);
create(["a"],"Join",[A,B]);`,
draw: ``
}
},
visibility,
invalidation
)
Insert cell
function Cindy(cindy, visibility, invalidation) {
let canvas = html`<div id="${cindy.ports[0].id}" style="width: ${cindy
.ports[0].width | 300}px;height:${cindy.ports[0].height | 300}px"></div>`;
let obj = CindyJS.newInstance(cindy);
visibility().then(() => obj.startup());
invalidation.then(() => obj.shutdown());
return canvas;
}
Insert cell
CindyJS = {
let a = (await require('https://cindyjs.org/dist/latest/Cindy.js')).CindyJS;
await require('https://cindyjs.org/dist/v0.8.8/CindyGL.js').catch(() => {});
return a;
}
Insert cell
CindyJScss = html`<link rel="stylesheet" href="https://cindyjs.org/dist/latest/CindyJS.css" />`
Insert cell

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.
Learn more