map = html`<svg viewBox="0 0 975 610">
<g fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<path stroke="#aaa" stroke-width="0.5" d="${path(topojson.mesh(ch, ch.objects.municipalities, (a, b) => a !== b))}" />
<path stroke-width="0.5" d="${path(topojson.mesh(ch, ch.objects.cantons, (a, b) => a !== b))}" />
<path stroke-width="1" d="${path(topojson.feature(ch, ch.objects.country))}" />
<path fill="rgb(102, 175, 233)" stroke="none" d="${path(topojson.feature(ch, ch.objects.lakes))}" />
</g>
</svg>`
projection = d3.geoMercator().rotate([0, 0]).center([8.3, 46.8]).scale(10000).translate([975 / 2, 610 / 2]).precision(0.1)
path = d3.geoPath(projection)
ch = fetch("https://swiss-maps.interactivethings.io/api/generate?year=2020&shapes=country,cantons,municipalities,lakes").then(res => res.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@2")
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.
