rawTiff = {
switch (basemapRes) {
case '110m': return FileAttachment("z0@1.tif")
case '50m' : return FileAttachment("z1@1.tif")
case '10m' : return FileAttachment("z2@1.tif")
}
}
rawCountries = {
switch (basemapRes) {
case '110m': return FileAttachment("countries_110m.json").json()
case '50m' : return FileAttachment("countries_50m.json").json()
case '10m' : return FileAttachment("countries_10m.json").json()
}
}
tiff = rawTiff.arrayBuffer() // valable pour les formats binaire
.then(buffer => geotiff.fromArrayBuffer(buffer))
image = tiff.getImage()
values = (await image.readRasters())[0]
n = image.getWidth() // largeur en pixel
m = image.getHeight() // hauteur en pixel
seuils = [0,500,1000,2000,3000,4000]
contours = d3.contours().size([n, m]).thresholds(seuils)
relief_XY = contours(values)
relief_LatLon = relief_XY.map(d => invert(d))
addMap = (proj, zoom = false, dimensions = [width, 400]) => {
const id = d3.randomInt(100)()
const outline = ({type: "Sphere"})
const path = d3.geoPath(proj.fitSize(dimensions, outline))
const map = htl.svg
`<svg width="${dimensions[0]}" height="${dimensions[1]}" style="display: block;">
<defs>
<clipPath id="clip-outline-${id}"><path d=${path(outline)} /></clipPath>
<clipPath id="clip-${id}""><path d=${path(land)} /></clipPath>
</defs>
<g id="zoom">
<g clip-path="url(#clip-outline-${id})">
<path id="outline" d=${path(outline)} />
<path id="land" d=${path(land)} />
<g id="relief" clip-path="url(#clip-${id})" >
${relief_LatLon.map(d => svg`<path class="levelRelief" d=${path(d)}/>`)}
</g>
</g>
</g>
</svg>`
// Pan & Zoom
const addZoom = d3
.zoom()
.scaleExtent([1, 20]) // min, max du zoom
.translateExtent([[0, 0], dimensions]) // bornes extérieures du translate
.on("zoom", ({ transform }) => {
d3.select(map).select("g#zoom").attr("transform", transform)
mutable k = transform.k
})
if (zoom) d3.select(map).call(addZoom)
return map
}
projs = new Map ([
["Atlantis", d3.geoMollweide().rotate([30, -45, 90])],
["Bertin 1953", d3.geoBertin1953()],
["Equal Earth", d3.geoEqualEarth()],
["LAEA", d3.geoAzimuthalEqualArea().rotate([0,-90])],
["Mollweide 2 hémisphères", d3.geoInterruptedMollweideHemispheres()],
["Orthographique", d3.geoOrthographic().rotate([14,-40])],
["Plate carrée", d3.geoEquirectangular()],
])
projB = d3.geoAzimuthalEqualArea().rotate([-90,-30, rot]).clipAngle(30)
land = topojson.merge(rawCountries, rawCountries.objects[`countries_${basemapRes}`].geometries)
<svg height=0>
<defs>
<filter id="reliefShadow">
<feDropShadow dx=${-1/k} dy=${-1/k} stdDeviation="0.05" flood-color="white" flood-opacity=".8"/>
<feDropShadow dx=${1/k} dy=${1/k} stdDeviation="0.05" flood-color="black" flood-opacity=".8"/>
</filter>
</defs>
</svg>
<style>
#outline {
fill: #F4FAFF;
stroke: black;
stroke-opacity: 0.3;
}
#land {
fill: white;
stroke: #7D9CB3;
stroke-opacity: 1;
stroke-width: ${1/k};
stroke-linejoin: round;
}
#relief {
fill: #ffeee8;
fill-opacity: 0.7;
}
#relief .levelRelief {
filter: url(#reliefShadow);
mix-blend-mode: multiply;
}
</style>
getXYfromAngle = (angle = 0, distance = 1.5) => {
const degreeToRadian = (degree) => degree * Math.PI / 180
const angleRadian = degreeToRadian(angle - 90)
const x = distance * Math.cos(angleRadian)
const y = distance * Math.sin(angleRadian)
return [x.toFixed(3), y.toFixed(3)]
}
dxdy = getXYfromAngle(angle)
mutable k = 1
geotiff = require('geotiff')
d3 = require("d3", "d3-geo-projection")
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.
