@anywidget/deno

anywidget (deno)

Jupyter Widgets for Jupyter JavaScript Kernels (experimental).

Usage

In[1]:

import { widget } from "https://deno.land/x/anywidget/mod.ts";

const model = await widget({
	state: { letters: "abcd" },
	imports: `\
import * as d3 from "https://esm.sh/d3";
`,
	render: ({ model, el }) => {
		const width = 300;
		const svg = d3.create("svg")
			.attr("width", width)
			.attr("height", 33)
			.attr("viewBox", `0 -20 ${width} 33`);
		model.on("change:letters", () => {
			const t = svg.transition().duration(200);
			svg.selectAll("text")
				.data(model.get("letters"), (d) => d)
				.join(
					(enter) =>
						enter.append("text")
							.attr("fill", "green")
							.attr("x", (d, i) => i * 16)
							.attr("y", -30)
							.text((d) => d)
							.call((enter) =>
								enter.transition(t)
									.attr("y", 0)
							),
					(update) =>
						update
							.attr("fill", "black")
							.attr("y", 0)
							.call((update) =>
								update.transition(t)
									.attr("x", (d, i) => i * 16)
							),
					(exit) =>
						exit
							.attr("fill", "brown")
							.call((exit) =>
								exit.transition(t)
									.attr("y", 30)
									.remove()
							),
				);
		});
		el.appendChild(svg.node());
	},
});

model;

Out[1]:

In[2]:

let dict = await Deno.readTextFile("/usr/share/dict/words").split("\n");
for (let word of dict.split("\n")) {
	model.set("letters", word);
	await new Promise((resolve) => setTimeout(resolve, 500));
}