Published
Edited
Aug 10, 2021
PC4 example vegalite map
geodata = d3.json(
"https://maps.amsterdam.nl/open_geodata/geojson_lnglat.php?KAARTLAAG=PC4_BUURTEN&THEMA=postcode"
)
dataExample = [
{ Postcode4: 1037, value: 4245 },
{ Postcode4: 1052, value: 3245 }
]
{
const domain = [0, 6000];
const legend = {
title: `bla`,
format: "d",
orient: "none",
legendX: 10,
legendY: 10,
direction: "vertical",
tickCount: 5,
gradientLength: 240,
gradientThickness: 8,
width: width / 2,
titleFontSize: 12,
titleLimit: 300
};
return vl
.layer([
vl
.markGeoshape({ stroke: "AliceBlue", fill: "lightgrey" })
.data(geodata.features)
.project(vl.projection("mercator")),
vl
.markGeoshape({ stroke: "AliceBlue" })
.data(geodata.features)
.project(vl.projection("mercator"))
.transform(
vl
.lookup("properties.Postcode4")
.from(vl.data(dataExample).key("Postcode4").fields("value"))
)
.encode(
vl
.color()
.fieldQ("value")
.scale({
domain: domain,
scheme: "blues"
})
.legend(legend),
{
tooltip: [
{
field: "properties.Postcode4",
type: "nominal",
title: "Postcode"
},
{
field: "value",
type: "nominal",
title: "Value",
format: "d"
}
]
}
)
])
.width(450)
.height(400)
.render();
}
// Vega-lite is in the standard library, but importing it explicitly enables HTML tooltips
import { vl } from "@vega/vega-lite-api"
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.
