The avatar for @neocartocnrs
Nicolas Lambert
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 🖥️
Public
Courses & Training
Edited
Sep 28, 2023
Fork of Visualisation de données spatiales dans Observable avec bertin.js (les midi de Géotéca)
•
3 forks
8 stars
26
Courses & Training
Construire des cartes réactives pour le Web avec Observable JavaScriptObservable pour l'INEDWebinaire Interroger les donnéesObservable, d3js, bertin et cie pour les M2 Carthagéo
Observable et données spatiales
Visualisation de données spatiales dans Observable avec bertin.js (les midi de Géotéca)Observable pour les M2 CarthagéoObservable pour les géographes
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
a = 5
Insert cell
b = 6
Insert cell
c = a + b
Insert cell
x = {
let val1 = 8;
let val2 = 7;
return val1 * val2;
}
Insert cell
function sum(a, b) {
return a + b;
}
Insert cell
sum(10, 30)
Insert cell
multi = (a, b) => a * b
Insert cell
multi(3, 8)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof checkboxes = Inputs.checkbox(["A", "B"], {
label: "Select some",
value: "A"
})
Insert cell
viewof radios = Inputs.radio(["A", "B"], {label: "Select one", value: "A"})
Insert cell
viewof form = Inputs.form({
option1: Inputs.checkbox(["A", "B"], {label: "Select some"}),
option2: Inputs.range([0, 100], {label: "Amount", step: 1}),
option3: Inputs.radio(["A", "B"], {label: "Select one"}),
option4: Inputs.select(["A", "B"], {label: "Select one"})
})
Insert cell
Insert cell
viewof slider1 = Inputs.range([0, 100], {
label: "Choisissez une valeur",
step: 1
})
Insert cell
slider1
Insert cell
La valeur choisie est **${slider1}**. Trop cool, hein ?
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sketch(world, { fill: "none", k: k })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
discr = require("statsbreaks@0.3.1")
Insert cell
discr.shape(sampledata)
Insert cell
Insert cell
discr.breaks({ values: sampledata, method: "jenks", nb: nbreaks, precision: 0 })
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(maddison)
Insert cell
Insert cell
maddison.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
cities = d3
.csv(
"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv",
d3.autoType
)
.then((r) => r.filter((d) => +d.population > 1000000))
Insert cell
Inputs.table(cities)
Insert cell
Insert cell
viewof file = Inputs.file({label: "Data"})
Insert cell
Insert cell
Insert cell
SummaryTable(cities)
Insert cell
Insert cell
Insert cell
world = d3.json(
"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson"
)
Insert cell
Insert cell
v = view(world)
Insert cell
Insert cell
Insert cell
db
select * from electricite
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
myData = [10, 30, 20, 10, 10]
Insert cell
{
const width = 500;
const height = 75;

const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background-color", "#CCC");

svg
.append("g")
.attr("fill", "#e04a28")
.selectAll("circle")
.data(myData)
.join("circle")
.attr("cx", (d, i) => 50 + i * 100)
.attr("cy", height / 2)
.attr("r", (d) => d);

return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("width", "100%")
.style("height", "auto");

const projection = d3.geoAitoff();
//const projection = d3.geoBertin1953();
const path = d3.geoPath(projection);

// La sphère
svg
.append("g")
.append("path")
.datum({ type: "Sphere" })
.attr("fill", " #a9daeb")
.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

// Les graticules
svg
.append("g")
.append("path")
.datum(d3.geoGraticule10())
.attr("d", path) // En SVG, l'attribut d définit un tracé à dessiner
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", 0.8)
.style("stroke-opacity", 0.5)
.style("stroke-dasharray", 2);

// DATUM
svg
.append("g")
.append("path")
.datum(world) // Datum lit le tableau de données d'un coup => affiche tout de la même façon.
.attr("fill", "#508bab")
.attr("fill-opacity", 0.9)
.attr("stroke", "white")
.attr("stroke-width", 0.2)
.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [Plot.tickX(data, { x: "gdppc" })]
})
Insert cell
Plot.plot({
marks: [Plot.boxX(data, { x: "gdppc" })]
})
Insert cell
Insert cell
Plot.plot({
marks: [Plot.dotX(data, { x: "gdppc", fill: "black" })]
})
Insert cell
Plot.plot({
marks: [Plot.dotX(data, Plot.dodgeY({ x: "gdppc", fill: "black" }))],
height: 250
})
Insert cell
Insert cell
Plot.plot({
grid: true,
marginLeft: 50,
facet: {
data: data,
y: "region"
},
marks: [Plot.boxX(data, { x: "gdppc" })]
})
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
scheme: "turbo",
type: "symlog"
},
grid: true,
x: {
type: logx ? "log" : undefined
},
y: {
type: logy ? "log" : undefined
},

marks: [
Plot.circle(maddison, {
r: "pop",
fill: "gdppc",
stroke: "white",
strokeWidth: 0.3,
x: "gdp",
y: "pop",
filter: (d) => d.year == year
}),

Plot.text(maddison, {
r: "pop",
text: "countrycode",
fill: "white",
x: "gdp",
y: "pop",
filter: (d) => d.year == year
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
geom = FileAttachment("geom@3.json").json()
Insert cell
stats = FileAttachment("stats.csv").csv({ typed: true })
Insert cell
test = bertin.match(geom, "ISO3_CODE", stats, "id")
Insert cell
test.unmatched_data
Insert cell
countries = bertin.merge(geom, "ISO3_CODE", stats, "id")
Insert cell
Insert cell
Insert cell
Insert cell
bertin.draw({
params: { projection: "Bertin1953" },
layers: [
{ type: "header", text: "La planète bleue" },
{ geojson: countries, fill: "white", fillOpacity: 0.4, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
Insert cell
bertin.draw({
params: {
projection: "Bertin1953"
//projection: "Berghaus"
//projection: "HoaXiaoguang"
//projection: "Spilhaus"
//projection: "Polar"
},
layers: [
{ type: "header", text: "La population mondiale" },
{
type: "bubble",
geojson: countries,
values: "pop",
fill: "#000080",
fillOpacity: 0.5,
dorling: true,
k: k2,
leg_x: 650,
leg_y: 400,
leg_round: 0,
tooltip: ["$name", "$pop"]
},
{ geojson: countries, fill: "white", fillOpacity: 0.5, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
bertin.draw({
params: { projection: "Bertin1953" },
layers: [
{ type: "header", text: "PIB par habitant" },
{
geojson: countries,
tooltip: ["$name", "$gdppc"],
fill: {
type: "choro",
values: "gdppc",
colors: "RdYlGn",
leg_x: 100,
leg_y: 100,
leg_round: 0
}
},
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
bertin.draw({
params: {
projection: "Bertin1953"
//projection: "Berghaus"
//projection: "HoaXiaoguang"
//projection: "Spilhaus"
//projection: "Polar"
},
layers: [
{ type: "header", text: "La population mondiale" },
{
type: "bubble",
geojson: countries,
values: "pop",
fill: {
type: "choro",
values: "gdppc",
colors: "RdYlGn",
leg_x: 100,
leg_y: 100,
leg_round: 0
},
//dorling: true,
k: k2,
leg_x: 650,
leg_y: 400,
leg_round: 0,
tooltip: ["$name", "$pop"]
},
{ geojson: countries, fill: "white", fillOpacity: 0.5, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { gallery } from "@neocartocnrs/hello-bertin-js"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more