map = svg`<svg viewBox="0 0 ${width} ${height}">
${(tile()).map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`<image xlink:href="${url(x,y,z)}" x="${(x + tx) * k}" y="${(y + ty) * k}" width="${k}" height="${k}">
`)}
<path fill="none" stroke="#fff8" d="${path(boundaries)}"/>
${circles}
</svg>`
circles = countries.map(p => {
const [x,y] = projection([p.lon,p.lat]);
const circle = svg`<circle cx=${x} cy=${y} r=40 fill='#fff0' stroke='#fff4' />`
const label = svg`<text x=${x} y=${y} text-anchor='middle' alignment-baseline='central' fill='#fff'>${p.iso2}</text>`
return [circle, label];
}).flat()
url = (_x, _y, _z) => {
const [x, y, z] = d3.tileWrap([_x, _y, _z])
return `https://api.mapbox.com/styles/v1/brody1/cltfjsd5100gw01r577hg2eo0/tiles/${tileSize}/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoiYnJvZHkxIiwiYSI6ImNrbTQ1d2oweTAxZ3cyb3J0d3MydDN0cmsifQ.SP2rehihX6dZ_h5rqVjdOA`
}
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.tileSize(tileSize)
.clampX(false)
tileSize = 256
path = d3.geoPath(projection)
projection = d3.geoMercator().rotate([-180, 0]).fitExtent([[padding, padding],[width - padding, height - padding]],points)
padding = 50
boundaries = topojson.feature(boundaries_topo, boundaries_topo.objects["Pacific countries"])
boundaries_topo = FileAttachment("pacific-boundaries.json").json()
points = FileAttachment("countries@2.geojson").json()
countries = FileAttachment("countries.json").json()
d3 = require("d3-geo@3", "d3-tile@1")
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.
