chart = {
// Departamentos (States)
const deps = vl
.markGeoshape({ filled: false, stroke: "#333", strokeWidth: 0.2 })
.data(vl.topojson(mapData).feature("MGN_AMN_DPTOS"));
// Cities
const muns = vl
.markGeoshape({ filled: false, stroke: "#ccc", strokeWidth: 0.2 })
.data(vl.topojson(mapData).feature("MGN_AMN_MPIOS"));
const dots = vl
.markPoint({
tooltip: true, filled: false, fillOpacity: 0.8,
fill:"#4f9e39", stroke:"#4f9e39", fillOpacity: 1,
strokeWidth: 0.5})
.encode(
vl.latitude().fieldQ("properties.LATITUD").title("Lat"),
vl.longitude().fieldQ("properties.LONGITUD").title("Long"),
vl.detail().fieldN("properties.MPIO_CNMBR").title("City"),
vl.size()
.fieldQ("properties.STP27_PERS")
.title("Población")
.scale({ type: "linear" }) // Use a linear scale, as we are mostly using height
.legend({
format: ".2s", symbolType: spikePath,
direction: "horizontal", orient: "bottom-right"
}),
vl.shape().datum("spike").scale({domain:["spike"], range: [spikePath]}).legend(false)
// vl.color().fieldN("properties.DPTO_CCDGO").scale({scheme: "spectral"}) // Colors by Deps?
)
.data(mapData.objects.MGN_AMN_MPIOS.geometries);
return vl
.layer(muns, deps, dots)
.project(
vl.projection("azimuthalEqualArea").rotate([74 + 30 / 60, -38 - 50 / 60]) // Colombia's Lat/Long
)
.width(width * .7)
.height(height)
.render();
}
spikePath = "M-0.5 0 Q0 -30 0.5 0"
height = 600
mapData = FileAttachment(
"Colombia_departamentos_municipios_poblacion-topo@1.json"
).json()
import { vl } from "@vega/vega-lite-api-v5"
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.
