Public
Edited
Nov 1, 2023
1 star
Insert cell
Insert cell
Plot.plot({
width,
height: width,
legend: true,
projection: lambert93,
marks: [
Plot.geo(villes_france, {
r: (x) => x.properties.population,
fill: "#79706e",
fillOpacity: 0.8,
title: (x) => x.properties.nom
})
]
})
Insert cell
villes_france = ({
type: "FeatureCollection",
features: d3.sort(
(await FileAttachment("villes_france.csv").csv({ array: true }))
.map((d) => ({
type: "Feature",
properties: { population: Number(d[16]), nom: d[5], code_postal: d[8] },
geometry: { type: "Point", coordinates: [Number(d[19]), Number(d[20])] }
}))
.filter((d) => d.properties.code_postal.slice(0, 2) !== "97"),
(x) => -x.properties.population
)
})
Insert cell
Insert cell
function proj4d3(proj4string) {
const degrees = 180 / Math.PI,
radians = 1 / degrees,
raw = proj4(proj4string),
p = function (lambda, phi) {
return raw.forward([lambda * degrees, phi * degrees]);
};
p.invert = function (x, y) {
return raw.inverse([x, y]).map(function (d) {
return d * radians;
});
};
const projection = d3.geoProjection(p).scale(1).translate([0, 0]);
projection.raw = raw;
return projection;
}
Insert cell
lambert93 = new Object({
type: () =>
proj4d3(
`+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`
),
domain: france
})
Insert cell
france = {
const topo = await d3.json(
"https://raw.githack.com/xoolive/topojson/master/countries/france/fr-departments.json"
);
return topojson.feature(topo, topo.objects.FRA_adm2);
}
Insert cell
proj4 = require("proj4@2.8")
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