Public
Edited
Dec 9, 2022
1 star
Insert cell
Insert cell
Insert cell
{
const chart = new G2.Chart();

chart
.geoPath()
.projection({ type: "mercator" })
.data({ value: countries.features });

return chart.render().node();
}
Insert cell
countries.features
Insert cell
data = await fetch(
"https://gw.alipayobjects.com/os/bmw-prod/4b218ecf-493d-4481-9ece-82487d7fa86d.json"
).then((res) => res.json())
Insert cell
chart = {
// Set center of projection in latitude and longitude.
const projection = d3.geoMercator();

// Compute height based on width and feature data.
const width = 900;
const height = (() => {
const [[x0, y0], [x1, y1]] = d3
.geoPath(projection.fitWidth(width, countries))
.bounds(countries);
const dy = Math.ceil(y1 - y0);
const l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
return dy;
})();

// Helper function to map abstract data.
const project = (data) => {
const { features } = data;
return features.flatMap((feature) => {
const { coordinates: C, type } = feature.geometry;
const coordinates = type === "MultiPolygon" ? C.flatMap((d) => d) : C;
const points = coordinates.map((coordinate) => {
const P = coordinate.map(projection);
return {
name: feature.properties.name,
x: P.map((d) => d[0]),
y: P.map((d) => d[1])
};
});
return points;
});
};

// Mock values to be visualized for each city.
// Use real data in production env.
const cityNameValue = new Map();
const valueByCityName = (name) => {
if (cityNameValue.has(name)) return cityNameValue.get(name);
const value = [Math.random(), Math.random()];
cityNameValue.set(name, value);
return value;
};

// Render visual data.
const chart = new G2.Chart({
width,
height
});

chart
.polygon()
.data({
value: countries,
transform: [{ type: "custom", callback: project }]
})
.scale("x", { guide: null })
.scale("y", { guide: null, range: [0, 1] })
.scale("color", { type: "identity" })
.scale("tooltip", { field: "A" })
.scale("tooltip1", { field: "B" })
.encode("x", "x")
.encode("y", "y")
.encode("key", (d, i) => `${d.name}-${i}`)
.encode("color", (d) => d3.interpolateCool(valueByCityName(d.name)[0]))
//.encode("color", "steelblue") // Uncommment to set fixed color.
.encode("title", "name")
.encode("tooltip", (d) => d3.format(".2f")(valueByCityName(d.name)[0]))
.encode("tooltip1", (d) => d3.format(".2f")(valueByCityName(d.name)[1]))
.animate("enter", { type: null })
.style("stroke", "black");

chart.interaction({ type: "elementActive", color: "black" });

return node(chart.render());
}
Insert cell
Insert cell
Insert cell
// {
// const options = {
// type: "land",
// width: 900,
// height: 700,
// coordinates: [{ type: "geoMercator", center: [107, 31] }],
// data,
// encode: {
// color: (d) => d.properties.name,
// title: (d) => d.properties.name
// }
// };
// return md`A better spec...`;
// }
Insert cell
Insert cell
G2Alpha = require("@antv/g2@5.0.0-alpha.2")
Insert cell
Insert cell
Insert cell
dayjs = require("dayjs")
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