Public
Edited
Jan 12, 2023
{
const canvas = createCanvas();
// canvas.on("ready", async () => {
// console.log("canvas ready...");
// let greeting = await Promises.delay(1000, "Hello, ");
// console.log(greeting);
const circle = canvas.document.createElement("circle", {
style: {
cx: 200,
cy: 200,
r: 30,
fill: "rgb(207,226,252)",
stroke: "rgb(118,145,241)",
lineWidth: 2
}
});
circle.addEventListener("pointerenter", () => {
console.log("enter...");
circle.style.fill = "red";
});
circle.addEventListener("pointerleave", () => {
console.log("leave...");
circle.attr("fill", "#1890FF");
});
canvas.appendChild(circle);
return canvas.getConfig().container;
}
G = require("@antv/g-lite@1.0.29")
Canvas2D = require("@antv/g-canvas@1.9.25")
SVG = require("@antv/g-svg@1.8.33")
// createSVGCanvas = {
// return (container, height = 400) => {
// const renderer = new SVG.Renderer();
// const div = document.createElement("div");
// const canvas = new G.Canvas({
// container: container || div,
// width: 400,
// height,
// renderer
// });
// return canvas;
// };
// }
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.
