Public
Edited
Dec 27, 2022
1 fork
Importers
1 star
function createMathCell({
visibility,
style,
id,
inputs,
params,
data,
config,
injections
}) {
if (!id) id = lib.generateId();
if (!style) style = "height: 5in";
const node = html`<div id="${id}" style="${style}" class="mathcell">`;
if (!visibility) visibility = () => Promises.tick(1);
visibility().then(() => {
if (!node.isConnected) {
throw new Error("Not connected to DOM");
}
lib.MathCell(id, inputs || [], params);
node.update = function (id) {
lib.evaluate(
id,
typeof data === "function" ? data(lib, node) : data,
typeof config === "function" ? config(lib, node) : config
);
// // TODO allow functions to be injected for animations?
// // see: https://paulmasson.github.io/mathcell/docs/animations.html
// if (injections) {
// lib.injectFunctions(
// id,
// typeof injections === "function" ? injections(lib, node) : injections
// );
// }
};
node.update(id);
});
return node;
}
lib = {
const string = await fetch(
"https://paulmasson.github.io/mathcell/build/mathcell.js"
).then((res) => res.text());
(1, eval)(string);
let module = {};
for (let key of [
"MathCell",
"generateId",
"evaluate",
"getVariable",
"setLimit",
// utilities, https://paulmasson.github.io/mathcell/docs/utilities.html
// basic
"lerp",
"linspace",
"minMax",
// rounding
"roundTo",
"floorTo",
"ceilTo",
// transformation
"normalize",
"translate",
"rotate",
// color
"color",
"colorFromHue",
"colorFromArg",
"colorStringFromHue",
"colormap",
// Plotting, https://paulmasson.github.io/mathcell/docs/plotting.html
"plot",
"polarPlot",
"listPlot",
"parametric",
"wireframe",
"surfaceFromLines",
"diskFromLines",
"slopeField",
"isoline",
"isoband",
"isosurface",
// Graphics Objects, https://paulmasson.github.io/mathcell/docs/graphics.html
"arrow",
"box",
"cone",
"cylinder",
"ellipsoid",
"line",
"point",
"sphere",
"text",
// Animations, https://paulmasson.github.io/mathcell/docs/animations.html
"injectFunctions"
])
module[key] = window[key];
return module;
}
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.
