Hi. I'm Nicolas Lambert, research engineer in geographic information science at CNRS (France). My job is to draw maps and teach cartography at the university. I am a geographer 🌎, and not really a developer 🖥️
bertin = require("bertin@1.7.2")
map = bertin.draw({
params: { width: 700 },
layers: [
{
id: "mylayer",
geojson: data,
fill: "#487294"
},
{ type: "graticule" },
{ type: "outline" }
]
})
map.update({ id: "mylayer", attr: "fill", value: color, duration: 500 })
map2 = bertin.draw({
params: { width: 700 },
layers: [
{ type: "header", text: "Wealth around the world" },
{
id: "mychoro",
geojson: data,
fill: {
type: "choro",
values: "gdppc",
colors: "Reds",
leg_x: 20,
leg_y: 150,
leg_round: 0,
leg_title: "GDP per capita",
nbreaks: 4
}
},
{ type: "graticule" },
{ type: "outline" }
]
})
map2.update({
id: "mychoro",
attr: "fill",
value: { nbreaks: nb },
duration: 0
})
map2.update({
id: "mychoro",
attr: "fill",
value: { colors: pal },
duration: 500
})
map3 = bertin.draw({
params: { width: 700 },
layers: [
{
id: "bub",
geojson: data,
type: "bubble",
values: "pop",
dorling: false,
k: 40,
leg_x: 20,
leg_y: 160,
leg_round: 0,
leg_title: "Population",
tooltip: [
"$name",
(d) =>
`population: ${Math.round(d.properties.pop / 1000000)} million inh.`,
(d) =>
`gdp: ${Math.round(d.properties.gdp / 10000000000) / 100} billion $.`
],
fill: "#e04031"
},
{
geojson: data,
fill: "white",
fillOpacity: 0.5,
stroke: "none"
},
{ type: "graticule" },
{ type: "outline" }
]
})
map3.update({
id: "bub",
attr: "k",
value: k,
duration: 500
})
map3.update({
id: "bub",
attr: "values",
value: val,
legend: val == "pop" ? "Population" : "Wealth",
duration: 500
})
map3.update({
id: "bub",
attr: "dorling",
value: toggle,
duration: 500
})
map4 = bertin.draw({
params: { margin: [40, 0, 0, 0] },
layers: [
{
type: "text",
text: "Ridge Lines",
position: [0, 40],
fontSize: 33,
margin: 4
},
{
id: "ridge",
step: 3,
k: 10,
type: "ridge",
blur: 0,
fill: "#C6E4F9",
stroke: "#153b5c",
geojson: data,
values: "pop"
},
{
geojson: data,
fill: "#C6E4F9",
fillOpacity: 1,
stroke: "none"
},
{ type: "graticule" },
{ type: "outline" }
]
})
map4.update({ id: "ridge", attr: "k", value: ridgeheight, duration: 1000 })
map5 = bertin.draw({
params: { width: 700 },
layers: [
{ type: "header", id: "title", text: " " },
{
id: "bub",
geojson: data,
type: "bubble",
values: "pop",
dorling: false,
k: 0.01,
fill: "none",
stroke: "#bd4431",
strokeWidth: 1.2
},
{
id: "basemap",
geojson: data,
fill: "white",
fillOpacity: 0,
stroke: "none"
},
{ type: "graticule" },
{ type: "outline" }
]
})
map6.update({
id: "shadow",
attr: "transform",
value: `translate(5 5)`,
duration: 0
})
map6 = bertin.draw({
params: { width: 700, margin: [-20, -50, -130, -150] },
layers: [
{
geojson: data,
type: "square",
values: "gdp",
k: 40,
stroke: "none",
fill: "#e04031"
},
{
id: "shadow",
geojson: data,
type: "square",
values: "gdp",
k: 40,
fill: "black"
}
]
})
viewof angle = Inputs.range([0, 359], { label: "angle", step: 1, value: 0 })
map7 = bertin.draw({
params: { width: 700, margin: [-20, -50, -130, -150] },
layers: [
{
id: "sq",
geojson: data,
type: "square",
values: "gdp",
k: 40,
fill: "#e04031"
}
]
})
d3
.select("g.sq")
.selectAll("rect")
.attr("transform", (d) => `rotate(${angle}, ${d.ctrx}, ${d.ctry})`)
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.
