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
Oct 17, 2022
1 fork
2 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éoObservable 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
croppedLogo_geoteca_fond_transparent1 = FileAttachment("cropped-logo_GEOTECA_fond_transparent-1.png").image()
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
geo = require("geotoolbox")
Insert cell
geo.border(world)
Insert cell
Insert cell
Insert cell
maddison = FileAttachment("maddison.csv").csv({ typed: true })
Insert cell
Inputs.table(maddison)
Insert cell
Insert cell
cities = d3
.csv(
"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv"
)
.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
world = d3.json(
"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson"
)
Insert cell
view(world)
Insert cell
Insert cell
db
select * from electricite
Insert cell
dbtable
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, 3, 20, 20, 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

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