Open thomassth opened 3 weeks ago
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.
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:
Ok, so far, I've determined that it happens in this line (and disappears when commented out):
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 🎉
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)
How it looks when commented out:
https://github.com/user-attachments/assets/4a87800c-dca0-4512-a01d-29a560e489c5
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
Scratch that. Seems that just upgrading to d3-force@2.1.0 resolves the issue of things jumping around :)
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",
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.