People icons should *NOT* move around in groups

[thomassth]

In actuality, the people does not move in graphs, only the "first X people on display" is changing.

A better solution is mini dots without groups, & enlarge / shrink the dots to interact able elements.

[patcon]

yes YES YES times a million 🎉 Good call

This comes up again and again in informal user interactions that ppl have done preparing to run convos. I've heard that it's a big reason that people are confused by the viz -- it seems meaningful, but it's just a distraction from how it's actually working.

[patcon]

only the "first X people on display" is changing

@thomassth Ah sounds, like maybe you've investigated more than I :) Can you elaborate or point to the code that tipped you off to this?

I (without much digging) assumed this to be an artifact of the animation library they use, and maybe floating point precision, but that was just a guess. This was where I thought the debugging would be:

https://github.com/CivicTechTO/polis/blob/c60752b2007578073ef788069fe7ba06fbe89c3f/client-participation/vis2/components/graphParticipants.js#L59-L75

[patcon]

Ok, so far, I've determined that it happens in this line (and disappears when commented out):

https://github.com/CivicTechTO/polis/blob/3ecc2a5e4e54e074e9f47e07af833c957ddd469c/client-participation/vis2/util/graphUtil.js#L267

[patcon]

Ok, so apparently d3-force.forceSimulation is what is non-deterministic: https://github.com/CivicTechTO/polis/blob/3ecc2a5e4e54e074e9f47e07af833c957ddd469c/client-participation/vis2/util/graphUtil.js#L106-L112

Upstream is on version v1.2.1 of d3-force: https://github.com/compdemocracy/polis/blob/61d2940a5ff53a755240d661f94d430eecc8b543/client-participation/package.json#L29

And we're matching that in polis-storybook https://github.com/CivicTechTO/polis-storybook/blob/765c397d49676aabde8a433a3c77f86c4d37d925/package.json#L41

So that means this is the code: https://github.com/d3/d3-force/blob/v1.2.1/src/index.js#L6

Interestingly, someone else was wondering about this (making d3-force deterministic) and asked it on SO. It might be solved if we upgrade: https://stackoverflow.com/a/59895912

Might be an easy fix 🎉

[patcon]

Ok, was hard to debug this, because we weren't showing all the other participants on the graph in the visualization that we have working in storybook. But now we've got them all in there, and bopping around: https://civictechto.github.io/polis-storybook/?path=/story/ut-hai-client-deliberation-visualization--default

Seems that if we comment out mixedForce line, all the participants stay still. The only downside is that some overlap with one another (often right on top, so only the first is visible. This is because participants are "bucketized" and a few can exist in each bucket)

[patcon]

How it looks when commented out:

https://github.com/user-attachments/assets/4a87800c-dca0-4512-a01d-29a560e489c5

[patcon]

Another potential fix for making the simulation deterministic: https://stackoverflow.com/a/63509629

Turns out that in d3-force v2.1.0 (we are currently on v1.2.1), the randomess source can be set: https://github.com/d3/d3-force/tree/v2.1.0?tab=readme-ov-file#simulation_randomSource

[patcon]

Scratch that. Seems that just upgrading to d3-force@2.1.0 resolves the issue of things jumping around :)

[patcon]

Phewf. I'll try to get this submitted upstream :)

diff --git a/package-lock.json b/package-lock.json
index 606982d..74ad745 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "color": "~4.2.3",
         "d3-array": "1.0.2",
         "d3-contour": "~1.1.2",
-        "d3-force": "~1.2.1",
+        "d3-force": "^2.1.0",
         "d3-geo": "1.5.0",
         "d3-scale": "1.0.4",
         "d3-scale-chromatic": "~1.1.1",
@@ -3703,14 +3703,13 @@
       }
     },
     "node_modules/d3-force": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
-      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
+      "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
       "dependencies": {
-        "d3-collection": "1",
-        "d3-dispatch": "1",
-        "d3-quadtree": "1",
-        "d3-timer": "1"
+        "d3-dispatch": "1 - 2",
+        "d3-quadtree": "1 - 2",
+        "d3-timer": "1 - 2"
       }
     },
     "node_modules/d3-force/node_modules/d3-timer": {
diff --git a/package.json b/package.json
index 25e4ac8..aff4d03 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "color": "~4.2.3",
     "d3-array": "1.0.2",
     "d3-contour": "~1.1.2",
-    "d3-force": "~1.2.1",
+    "d3-force": "^2.1.0",
     "d3-geo": "1.5.0",
     "d3-scale": "1.0.4",
     "d3-scale-chromatic": "~1.1.1",