News and graphics at @ClimateLab, a project of @PostGraphics.
raw = {
const rawLee = d3
.geoTetrahedralLee()
.rotate(rotate)
.fitExtent([[-4, -1.5 / sqrt3_4], [4, 1.5 / sqrt3_4]], {
type: "Sphere"
});
const forward = (l, p) => {
let [x, y] = rawLee([l * degrees, p * degrees]);
y = -y;
if (x < -2.1 || y < -2.73) {
x = -x - 4;
y = -y;
}
if (x < -4) {
x = -x - 8;
y = 6.93 - y; // 6.93 is a visual approximation—haven't figured out the exact value yet (please help!)
}
return [x, y];
};
forward.invert = (x, y) => {
y = -y;
const a =
rawLee.invert([x, y]) ||
rawLee.invert([-x - 4, -y]) ||
rawLee.invert([-x - 8, 6.93 - y]) ||
rawLee.invert([-(-x - 8) - 4, 6.93 + y]);
if (a) return [a[0] * radians, a[1] * radians];
};
return forward;
}
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.4/world/50m_land.geojson"
)
projection = (() =>
d3.geoProjection(raw)
.preclip(d3.geoClipPolygon(clipPolygon())))()
.angle(-213)
clipPolygon = () => ({
type: "Polygon",
coordinates: [
[
[-20, 0],
[-27, 14],
[-27, 18],
[-20, 37],
[-30, 37],
[-35, -40],
[-30, -70],
[40, -50],
[70, -40],
[120, -60],
[150, -60],
[180, -60],
[-150, -50],
[-110, -40],
[-110, -30],
[-170, 10],
[160, 40],
[150, 40],
[150, 30],
[-170, 0],
[-150, -10],
[-140, -30],
[-170, -50],
[120, -50],
[90, -30],
[60, -25],
[30, -38],
[10, -38],
[-20, 0]
].map(d => [d[0] - .01, d[1] - .01])
]
})
import {
d3,
drag,
vertices,
sqrt3_4,
degrees,
radians,
rotate
} from "@fil/markley"
aspect = 2.03;
height = width * aspect;
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.
