initialProjection = d3.geoIdentity().translate([rawData.gridWidth / 2, rawData.gridHeight / 2]);
contours = thresholds =>
d3.contours()
.size([rawData.gridWidth, rawData.gridHeight])
.thresholds(thresholds)(rawData.data);
function projectContour(contour) {
return {
type: contour.type,
value: contour.value,
coordinates: contour.coordinates.map(polygon =>
polygon.map(line =>
line.map(point => { return initialProjection.invert(point); })
)
)
};
}
projectedContours = thresholds => contours(thresholds).map(projectContour);
projectedContours([10,20])
thresholds =d3.range(-90,100,10)
baseLabels = thresholds.flatMap(threshold => labelsContours(threshold, labelSpacing))
labels = {
return baseLabels
.filter(label => Math.abs(label.x) <= 170 && label.y >= labelLatMin && label.y <= labelLatMax)
.map(label => ({
...label,
angle: forceHorizontalLabel && Math.abs(label.angle) > (4 / 5) * 90 ? 0 : label.angle
}));
}
projections = [
{name: "Aitoff", value: d3.geoAitoff().scale(140)},
{name: "August", value: d3.geoAugust()},
{name: "Ginzburg V", value: d3.geoGinzburg5()},
{name: "Equirectangular", value: d3.geoEquirectangular().scale(150)},
{name: "Mercator", value: d3.geoMercator().scale(153.5)},
{name: "Miller", value: d3.geoMiller().scale(153.5)},
]
projection = selected_projection.value.translate([width/2,height/2]);
viewof labelSpacing = Inputs.range([10, 150], {value: 45, step: 5, label: html`Label spacing parameter`})
fileMap = [
{year: "2025", file: FileAttachment("IGRF-13_declination_2025.csv") },
{year: "2020", file: FileAttachment("IGRF-13_declination_2020.csv") },
{year: "2000", file: FileAttachment("IGRF-13_declination_2000.csv") },
{year: "1980", file: FileAttachment("IGRF-13_declination_1980.csv") },
{year: "1960", file: FileAttachment("IGRF-13_declination_1960.csv") },
{year: "1940", file: FileAttachment("IGRF-13_declination_1940.csv") },
{year: "1920", file: FileAttachment("IGRF-13_declination_1920.csv") },
{year: "1900", file: FileAttachment("IGRF-13_declination_1900.csv") },
]
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.
