Onclick event fires, but append-code is not executed

Question

In the below Code, the onclick event fires, but the circle is not appended. I have no idea why.

Maybe because of the following mutable?

Code Snippet:

.on("click", function (event, d) {
      let center = pathMap.centroid(d.geometry);
      console.log(center);
      
      mouse
        .append("circle")
        .attr("cx", center[0])
        .attr("cy", center[1])
        .attr("r", 20)
        .attr("fill", "red");

      
      mutable selected = d.properties;

Source: https://observablehq.com/@statistikzh/leerwohnungszahlung

Answer 1

In your notebook, every time one of the areas in the map is clicked, the map cell is re-evaluated and the entire map gets redrawn. The circles are being added, but then the map immediately gets redrawn from scratch.

If you comment out the lines

console.log(colorScaleOrd(d.properties.GDE_ID));
d3.select(this).style("stroke", colorScaleOrd(d.properties.GDE_ID));

then you'll see that the circles get added.

The click handler changes gem_sel. colorScaleOrd depends on gem_sel and the map depends on colorScaleOrd. The click handler updates gem_sel, which causes the cell for colorScaleOrd to be re-evaluated, which causes the cell that draws the map to be re-evaluated. There's kind of a circular dependency.

To reference the Introduction to Mutable State notebook, you should try to avoid using mutable state on Observable to prevent these kind of issues.

Note: The mutable keyword is easy to misuse in a way that makes it more difficult to successfully write Observable notebooks! Think of it as an escape hatch for those rare cases where you find the need to bypass Observable’s reactive dataflow model.

Edit: I've created a fork of your notebook to demonstrate one way of building this visualization without using mutable.