hex = ({ x, y }) => ({
type: "Polygon",
coordinates: [
Array.from({ length: 7 }, (_, i) => {
const a = (Math.PI * i) / 3;
const r = Math.sqrt(3) / 3;
return [
+(x + Math.sin(a) * r).toFixed(10), // rounding to avoid floating point error & vertex mismatch
+(y + Math.cos(a) * r).toFixed(10)
];
})
]
})
topo = topojson.topology(
Object.fromEntries(
d3.rollup(
data,
(v) => ({
type: "GeometryCollection",
geometries: v.map(hex)
}),
(d) => d.color
)
)
)
merged = Object.entries(topo.objects).map(([color, e]) => [
color,
topojson.merge(topo, e.geometries)
])
topojson = require("topojson-client@3", "topojson-server@3")
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.
