Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
geom = FileAttachment("geom.geojson").json()
data = FileAttachment("data.csv").csv({ typed: true })
bertin.match(geom, "ISO3", data, "id")
world = bertin.merge(geom, "ISO3", data, "id")
bertin.draw({
layers: [
{
geojson: world,
fill: "#CCC",
stroke: "blue"
}
]
})
bertin.draw({
layers: [
{
type: "bubble",
geojson: world,
values: "pop", // <- données quantitatives absolues
fill: "red",
leg_x: 75,
leg_y: 250,
leg_round: -2,
leg_title: "coucou"
},
{
geojson: world,
fill: "#CCC"
}
]
})
bertin.draw({
layers: [
{
geojson: world,
fill: {
type: "choro",
values: "gdppc", // <- données quantitatives realtives
leg_x: 75,
leg_y: 250,
leg_round: -2
}
}
]
})
bertin.draw({
layers: [
{
geojson: world,
//strokeWidth: 10,
fill: {
type: "typo",
values: "region", // <- données qualitatives
leg_x: 75,
leg_y: 250
}
}
]
})
bertin.draw({
layers: [
// COUCHE 1
{
type: "bubble",
geojson: world,
values: "pop", // <- données quantitatives absolues
fill: "none",
stroke: "black",
strokeWidth: 1.5
},
//COUCHE 2
{
geojson: world,
fill: {
type: "typo",
values: "region" // <- données qualitatives
}
}
]
})
bertin.draw({
layers: [
{
type: "bubble",
geojson: world,
values: "pop", // <- données quantitatives absolues
fill: {
type: "typo",
values: "region" // <- données qualitatives
}
},
{
geojson: world,
fill: "#CCC"
}
]
})
bertin.draw({
params: { projection: "Eckert3" }, // Paramètres généraux (marges, projection, etc.)
layers: [
{ type: "header", text: "La population mondiale" }, // Titre
{ type: "footer", text: "Fait avec bertin.js", anchor: "middle" }, // Source
// COUCHE 1 (cercles)
{
type: "bubble",
geojson: world, // géometrie
values: "pop", // variable
fill: "#b566ac", // couleur des cercles
stroke: "white", // couleur de contour des cercles
strokeWidth: 0.5, // épaisseur
tooltip: ["$name", "$pop"], // Infobulle
leg_x: 100, // position de la légende (x)
leg_y: 250, // position de la légende (y)
leg_title: "Population des\npays en 2000", // Titre de la légende
leg_round: -3 // arrondi
},
// COUCHE 1 (pays)
{
geojson: world, // géométrie
fill: "white", // couleur de fond
stroke: "none", // cauleur de contour (aucun)
fillOpacity: 0.5 // Opacité
},
{ type: "graticule" }, // Lignes de latitude et longitude
{ type: "outline" } // coutour de la Terre dans la projection
]
})
viewof color = Inputs.color({ label: "Favorite color", value: "#4682b4" })
viewof title = Inputs.text({ label: "Name" })
viewof k = Inputs.range([10, 100], { label: "k", step: 1 })
viewof toggle = Inputs.toggle({label: "Active", value: true})
bertin.draw({
params: { projection: "Eckert3" }, // Paramètres généraux (marges, projection, etc.)
layers: [
{ type: "header", text: title }, // Titre
{ type: "footer", text: "Fait avec bertin.js", anchor: "middle" }, // Source
// COUCHE 1 (cercles)
{
type: "bubble",
k: k, // <- ICI
dorling: toggle,
geojson: world, // géometrie
values: "pop", // variable
fill: color, // couleur des cercles
stroke: "white", // couleur de contour des cercles
strokeWidth: 0.5, // épaisseur
tooltip: ["$name", "$pop"], // Infobulle
leg_x: 100, // position de la légende (x)
leg_y: 250, // position de la légende (y)
leg_title: "Population des\npays en 2000", // Titre de la légende
leg_round: -3 // arrondi
},
// COUCHE 1 (pays)
{
geojson: world, // géométrie
fill: "white", // couleur de fond
stroke: "none", // cauleur de contour (aucun)
fillOpacity: 0.5 // Opacité
},
{ type: "graticule" }, // Lignes de latitude et longitude
{ type: "outline" } // coutour de la Terre dans la projection
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.