Published
Edited
Jun 13, 2021
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
map = html`<svg viewBox="0 0 ${width} ${height}">
<path d="${path(data)}" fill="lightgrey" stroke="white"></path>
<path d="${path(dataSelected)}" fill="none" stroke="black"></path>
</svg>`
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
gemeenten = data.features.map(el => el.properties.statnaam)
Insert cell
dataSelected = {return {type: "FeatureCollection", features: data.features.filter(el => selected.includes(el.properties.statnaam))}}
Insert cell
data = FileAttachment("gemeenten2021@1.json").json()
Insert cell
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 954
Insert cell
height = 600
Insert cell
d3 = require("d3-geo@1")
Insert cell

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.
Learn more