simplemap = bertin.draw({
params: { background: "#bde1f0", margin: 10 },
layers: [
{
type: "layer",
geojson: AUS_ports,
fill: "#1f0754",
stroke: "#1f0754",
strokeWidth: 2,
symbol: "square",
symbol_size: 50
},
{
type: "layer",
geojson: AUS_roads,
stroke: "#bf4783",
strokeWidth: 1.2
},
{
type: "layer",
geojson: AUS,
fill: "#f7da48",
stroke: "#6eb5e0",
strokeWidth: 1.5
},
{ type: "scalebar" }
]
})
bertin.draw({
params: { background: "#bde1f0", margin: margin },
layers: [
{
type: "layer",
geojson: country1,
fill: "#3B556D",
stroke: "#bde1f0",
strokeWidth: 3
},
{
type: "layer",
geojson: country2,
fill: "#3B556D",
stroke: "#bde1f0",
strokeWidth: 3
},
{
type: "layer",
geojson: country3,
fill: "#3B556D",
stroke: "#bde1f0",
strokeWidth: 3
}
]
})
bertin.draw({
params: {
extent: africa,
margin: 30,
background: "#bde1f0"
},
layers: [
{
type: "header",
text: "A Map of the African Continent",
background: "#de4960",
fill: "white",
fontSize: 40,
anchor: "start"
},
{
type: "footer",
text: `Nicolas Lambert, 2022
Made with Bertin.js`
},
{
type: "layer",
geojson: africa,
fill: "#de4960",
leg_x: 180,
leg_y: 550,
leg_w: 45,
leg_h: 30,
leg_title: `Location
of the countries`,
leg_fontSize: 20,
leg_fontSize2: 14,
leg_text: "African countries",
tooltip: ["$ISO3", "$NAMEen"]
},
{ type: "shadow", geojson: africa, dx: 5, dy: 5 },
{
type: "layer",
geojson: world,
fill: "#e0d0b6",
leg_x: 180,
leg_y: 650,
leg_w: 45,
leg_h: 30,
leg_fontSize2: 14,
leg_text: "Other"
},
{ type: "scalebar", units: "kilometers" }
]
})
map = bertin.draw({
params: { projection: projection.proj, margin: 2.5, clip: true },
layers: [
{ type: "header", text: "World Population\nin 2018 (inh.)" },
{
type: "layer",
geojson: world,
fill: "#74c4ac",
tooltip: ["$ISO3", "$NAMEen"]
},
{
type: "header",
text: projection.name + " projection",
fill: "#74c4ac",
fontSize: 34
},
{
type: "graticule",
strokeWidth: 1.5,
strokeDasharray: 2,
stroke: "#74c4ac",
step: step
},
{
type: "graticule",
strokeWidth: 2.5,
stroke: "#74c4ac",
strokeDasharray: "none",
strokeOpacity: 1,
step: [0, 90]
},
{ type: "outline", fill: "none", stroke: "#74c4ac", strokeWidth: 2.5 }
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
