Public
Edited
Nov 16, 2023
1 star
Insert cell
Insert cell
Insert cell
function g2() {
const chart = new G2.Chart({
renderer
});

chart
.point()
.data(data)
.encode("x", "Horsepower")
.encode("y", "Miles_per_Gallon")
.encode("z", "Weight_in_lbs")
.encode("size", "Origin")
.encode("color", "Cylinders")
.encode("shape", "point")
.coordinate({ type: "cartesian3D" })
.scale("x", { nice: true })
.scale("y", { nice: true })
.scale("z", { nice: true })
.legend(false)
.axis("x", { gridLineWidth: 2 })
.axis("y", { gridLineWidth: 2, titleBillboardRotation: -Math.PI / 2 })
.axis("z", { gridLineWidth: 2 })
.style("fillOpacity", 0.8);

chart.render().then(() => {
const { canvas } = chart.getContext();
const camera = canvas.getCamera();
camera.setPerspective(0.1, 5000, 45, 500 / 500);
camera.setType(G.CameraType.ORBITING);
});

invalidation.then(() => chart.destroy());

return chart.getContainer();
}
Insert cell
g2()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
G2Extension3D = require("@antv/g2-extension-3d@0.1.6")
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