Published
Edited
Dec 29, 2021
1 fork
Insert cell
data = FileAttachment("data.json").json()
Insert cell
doc = html`<div id="container0"></div>`
Insert cell
viewof plot0 = {
const p = new Facet("container0", {
padding: [0, 10, 10],
theme: "custom",
appendPadding: [20, 10, 30, 30],
type: "rect",
fields: ["cut"],
cols: 3, // 超过3个换行
data: data,
axes: {},
meta: {
carat: {
sync: true
},
price: {
sync: true
},
clarity: {
sync: true
}
},
eachView: (view, f) => {
return {
type: "scatter",
options: {
data: f.data,
xField: "carat",
yField: "price",
colorField: "clarity",
shape: "circle",
pointStyle: { fillOpacity: 0.3, stroke: null }
}
};
}
});
p.render();
return p;
}
Insert cell
DataSet = require("@antv/data-set")
Insert cell
g2plot = require('@antv/g2plot')
Insert cell
Facet = g2plot.Facet
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