Published
Edited
Dec 29, 2021
g2plot = require('@antv/g2plot')
Facet = g2plot.Facet
data0 = FileAttachment("data.json").json()
doe = html`<div id="container1"></div>`
plot1 = {
const p = new Facet("container1", {
appendPadding: [0, 0, 16, 0],
padding: 16,
//theme: "dark",
type: "matrix",
fields: ["x", "y", "z", "price"],
data: data0,
meta: {
clarity: { sync: true },
x: { sync: true, nice: true },
y: { nice: true },
z: { nice: true },
price: { nice: true }
},
axes: {},
eachView: (view, facet) => {
if (facet.rowIndex === facet.columnIndex) {
return {
type: "histogram",
options: {
data: facet.data,
binField: facet.columnField,
binNumber: 30,
stackField: "clarity",
isStack: true,
columnStyle: { stroke: null }
}
};
}
return {
type: "scatter",
options: {
data: facet.data,
xField: facet.columnField,
yField: facet.rowField,
colorField: "clarity",
shape: "circle",
pointStyle: { fillOpacity: 0.3, stroke: null },
size: 3
}
};
}
});
p.render();
return p;
}
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.
