viewof mapView = createMap({
getData: (d) => Math.random() * 2,
colorScale
})
viewof mapView.update({
isHighlighted: (d) => d.ART_C === 17 && d.GEBIET_C === "D052D092",
isSelected: (d) => d.ART_C === 17 && d.GEBIET_C === "A001",
getSymbol: () => d3.symbol().type(d3.symbolCircle),
getSymbolColor: () => "#D40053"
})
strokeColor = "#fff"
strokeColorHighlighted = "#000"
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
mapGeoJSON = d3.json(
"https://www.web.statistik.zh.ch/geodaten_visualisierungen/VIS_OS_Schulgemeinden_GEN_F_KTZH/VIS_OS_Schulgemeinden_GEN_F_KTZH_2023_01_01_union.json"
)
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
projection = d3 // When a GeoJSON is encoded in WGS84 planar coordinates, and you need to project it with D3
.geoMercator()
.fitExtent(mapExtent, mapGeoJSON)
path = d3.geoPath(projection)
height = Math.min(500, width * (584 / 464))
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
mapExtent = [
// [100, 16],
[0, 0],
[width, height]
]
dropshadow = DOM.uid("dropshadow")
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.
