Public
Edited
Feb 8, 2024
Insert cell
Insert cell
svg.node()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//viewof colorBST = Inputs.color({ label: "Brest", value: "#b26633" })
Insert cell
//viewof colorTLN = Inputs.color({ label: "Toulon", value: "#ff3399" })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
svg
.append("text")
.attr("x", 5)
.attr("y", 32)
.style("font-size", 30)
.style("font-weight", "bold")
.style("font-family", "Arial")
.text("CP 2024 PEM en Métropole");
svg
.append("text")
.attr("x", 5)
.attr("y", 60)
.style("font-size", 20)
.style("font-family", "Arial")
.text("par commune de France métropolitaine");
// "Ludovic Claudel, 7 janvier 2024"
}
Insert cell
Insert cell
Insert cell
map_layer = svg.append("g")
Insert cell
regions = d3.json(
"https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions.geojson"
)
Insert cell
pth_regions = map_layer
.selectAll(".regions")
.data(regions.features)
.enter()
.append("path")
.attr("fill", "#99aa1199")
.attr("stroke", "white")
.attr("d", path)
.attr("class", "regions")
.attr("opacity", 0.3)
Insert cell
Insert cell
circles = {
gCircles.selectAll("*").remove();
return gCircles
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (f) => f.cgeom[0])
.attr("cy", (f) => f.cgeom[1])
.attr("fill", "#ffc000")
.attr("stroke", "none");
}
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
colors1 = ["#ffc000"]
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