bertin = require("bertin@1.6.4")
pattern = motif({type: "circle", scale, angle: 45, size: 10, fill: "grey"})
bertin.draw({
params: { projection: "VanDerGrinten4" },
layers: [
{
type: "custom",
// Add <pattern> tag to existing <defs> tag
render: (svg, map) => svg.select("defs").node().appendChild(pattern.pattern)
// Add a new <defs> tag
// render: (svg, map) => svg.node().appendChild(pattern.defs)
},
// BORDERS
{
type: "layer",
geojson: world[1],
stroke: "lightgrey"
},
// LAND
{
type: "layer",
geojson: world[0],
fill: "white"
},
// OUTLINE
{
type: "outline",
fill: pattern.url,
},
]
})
world = topophelper.from(world50m)
.innerlines({layer: 1, name: "borders"})
.toGeojson({layer: [0,2]})
palette = {
// Common settings
const params = { type: "line", scale: 0.5, angle: 45, fill: "tomato" };
// + variable size
return [
motif({ ...params, size: 10 }),
motif({ ...params, size: 30 }),
motif({ ...params, size: 50 }),
motif({ ...params, size: 70 })
];
}
bertin.draw({
params: { projection: "user" },
layers: [
{
type: "custom",
// Add each palette pattern tag to the existing defs tag
render: (svg, map) => svg.select("defs").node().append(...palette.map(d => d.pattern))
},
// Dpt limits
{
type: "layer",
geojson: france[1],
stroke: "black"
},
// Buffer dpt limits
{
type: "layer",
geojson: france[1],
stroke: "white",
strokeWidth: 3
},
// Dpt polygons
{
type: "layer",
geojson: france[0],
fill: {
type: "choro",
values: "dep",
nbreaks: 4,
method: "quantile",
// array of pattern url ["url(#line-12199130.465)", ...]
colors: palette.map(d => d.url),
leg_x: 30,
leg_y: 30
}
},
]
})
// 'France communes 2022 COG' by ICEM7 (Éric Mauvière)
// https://www.data.gouv.fr/fr/datasets/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/
france = topophelper
.from(
await d3.json(
"https://www.data.gouv.fr/fr/datasets/r/00c0c560-3ad1-4a62-9a29-c34c98c3701e"
)
)
.lines({ layer: 2, name: "lines" })
.toGeojson({ layer: [2, 3] })
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.
