svg.node()
map_layer = svg.append("g")
regions = d3.json(
"https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions.geojson"
)
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)
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", "#5511ff99")
.attr("stroke", "none");
}
text = svg
.append("g")
.attr("class", "labels")
.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("dx", (f) => f.cgeom[0])
.attr("dy", (f) => f.cgeom[1])
.text((f) => f.name)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
// .attr("font-family", "serif")
.attr("fill", "white")
// .style("font-size", `{8}px`)
.attr("font-family", function (d, i) {
return i < 5 ? "serif" : "sans-serif";
})
.style("font-size", (f) => `${(f.r1 * 3.5) / f.name.length}px`)
text2 = svg
.append("g")
.attr("class", "text2")
.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("dx", (f) => f.cgeom[0])
.attr("dy", (f) => f.cgeom[1] + (f.r1 * 3.5) / 10)
.text(function (f) {
return f.valeur < 1000000
? `${Math.round(f.valeur / 1)}M€`
: `${Math.round(f.valeur / 1000000)}`;
})
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", "white")
.attr("font-family", function (d, i) {
return i < 5 ? "serif" : "sans-serif";
})
.style("font-size", (f) => `${(f.r1 * 3.5) / 10}px`)
dorlingCartogramOptimisation = {
if (startOptimistation == 0) return;
const simulation = d3
.forceSimulation(data)
//.alphaMin(1e-12)
.force(
"collide",
d3
.forceCollide()
.radius(
(f) =>
collisionPadding + f[type === "Sec" ? "r1" : "r2" ]
)
.iterations(4)
//.strength(1)
)
.force(
"x",
d3.forceX().x((f) => f.cgeom[0])
//.strength(0.05)
)
.force(
"y",
d3.forceY().y((f) => f.cgeom[1])
//.strength(0.05)
);
simulation.on("tick", () => {
circles.attr("cx", (f) => f.x).attr("cy", (f) => f.y);
text.attr("dx", (f) => f.x).attr("dy", (f) => f.y);
text2.attr("dx", (f) => f.x).attr("dy", (f) => f.y + (f.r1 * 3.5) / 10);
});
//invalidation.then(() => simulation.stop());
}
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.
