Public
Edited
Nov 17, 2023
svg`<svg viewBox="0 0 ${width} ${height}">
<path d="${path(
aoi
)}" stroke-width="0.5" fill="whitesmoke" stroke="darkgrey"></path>
<image
href='https://cdn.economistdatateam.com/israel-gaza-2023/gaza_damage.png'
x="${p0[0]}"
y="${p0[1]}"
width="${w}"
height="${h}"
stroke="black"
stroke-width="1"
fill="#00000000"
transform="rotate(${-angle}, ${p0[0]}, ${p0[1]})"
/>
<rect
x="${p0[0]}"
y="${p0[1]}"
width="${w}"
height="${h}"
stroke="black"
stroke-width="1"
fill="#00000000"
transform="rotate(${-angle}, ${p0[0]}, ${p0[1]})"
/>
<circle cx="${p0[0]}" cy="${p0[1]}" r="5" />
</svg>`
width = 500
height = 350
bbox = [
[34.3606730, 31.6279929],
[34.6125564, 31.4310462],
]
projection = d3
.geoEquirectangular()
.angle(angle)
.fitSize([width, height], aoi)
projection2 = d3
.geoEquirectangular()
.scale(projection.scale())
p0 = projection(bbox[0])
w = Math.abs(projection2(bbox[1])[0] - projection2(bbox[0])[0])
h = Math.abs(projection2(bbox[1])[1] - projection2(bbox[0])[1])
path = d3.geoPath(projection)
aoi = FileAttachment("gaza@1.geo.json").json()
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(aoi).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
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.
