h3 = require("h3-js@3")
hexworld = level => ({
type: "FeatureCollection",
features: h3.getRes0Indexes()
.map(i => h3.h3ToChildren(i, level))
.flat()
.map(d => ({
type: "Feature",
properties: { id: d, pentagon: h3.h3IsPentagon(d) },
geometry: {
type: "Polygon",
coordinates: [h3.h3ToGeoBoundary(d, true).reverse()]
}
}))
})
hexagons = hexworld(resolution)
contours = d3
.geoContour()
.x(d => d3.geoCentroid(d)[0])
.y(d => d3.geoCentroid(d)[1])
.value((d, i) => 10 * Math.log10(areas[i] / median))
.thresholds(100)(hexagons.features)
areas = hexagons.features.map(d => d3.geoArea(d))
median = d3.median(areas)
color = d3.scaleSequential(t => d3.interpolateRdYlGn(1 - t)).domain([-1, 1])
d3 = require("d3@5", "d3-geo-voronoi@1.5", "d3-geo-polygon@1")
land = FileAttachment("ne_110m_land.geojson").json()
projection = ({
Airocean: d3
.geoAirocean()
.angle(-150)
.fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
),
Icosahedral: d3
.geoIcosahedral()
.faceProjection((face) => {
var c = face.site.map((d) => -d);
c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0;
return d3
.geoProjection(d3.geoGrayFullerRaw())
.rotate(c)
.translate([0, 0]);
})
.rotate([-83.65929, 25.44458, -87.45184])
.angle(60)
.fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
),
IcosahedralGnomonic: d3
.geoIcosahedral()
.faceProjection((face) => {
var c = face.site.map((d) => -d);
c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0;
return d3.geoProjection(d3.geoGnomonicRaw).rotate(c).translate([0, 0]);
})
.rotate([-83.65929, 25.44458, -87.45184])
.angle(90)
.fitExtent([
[2, 2],
[width - 2, height - 2]
]),
Orthographic: d3
.geoOrthographic()
.rotate([-110, -35])
.fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
),
Mercator: d3.geoMercator().fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
)
}[projname])
import { legend } from "@d3/color-legend"
import { select } from "@jashkenas/inputs"
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.
