#DataScience #Visualization #AI
@ox-cs @Alipay @antvis *Plothis
G = require("@antv/g")
{
// To show the graphic in the current cell, we need a container cosnt and return it at the end.
const container = html`<div></div>`;
var canvas = new G.Canvas({
// Link the DOM of your canvas to the container (using <containerDOM>).
// You can also use <containerId> but it is tricky in Observable to do so.
containerDOM: container,
width: 400,
height: 300
});
// Add a group to your canvas.
var group = canvas.addGroup();
// Add a shape to your group.
var shape = group.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 50,
fill: 'red'
}
});
// To make the drawing of the canvas happen.
canvas.draw();
// Don't forget to return the container!
return container;
}
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.
