Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
map = html`<svg viewBox="${0} 0 ${width} ${height}" style="display: block;">
<defs>
<path id="outline" d="${path(outline)}" />
<clipPath id="clip"><use xlink:href="${new URL(
"#outline",
location
)}" /></clipPath>
</defs>
<g clip-path="url(${new URL("#clip", location)})">
<use xlink:href="${new URL("#outline", location)}" fill="#fff" />
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}" fill="${
showLand === "Yes" ? "#ddd" : "none"
}"></path>
<path d="${path(
face
)}" stroke="${faceLineColor}" fill="none" stroke-width="5"></path>
</g>
<use xlink:href="${new URL(
"#outline",
location
)}" fill="none" stroke="#000" />
</svg>`
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
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.
