Hacker News Reader

Comment by ModernCYPH3R | Hacker News Reader

This is a great visualization. There's something deeply satisfying about seeing a network topology laid out like this. I've been working on some Markov chain visualizations for a lottery variance engine recently, and getting the node-edge density right without it becoming a 'hairball' is a constant struggle. What did you use for the layout engine? Is it custom D3, or are you using something like Sigma.js for the heavy lifting?

View on HN

Thank you! It uses D3js as-is for no other reason than being the one I'm more familiarized with.

I also had issues with node density. The way I solved them was by adjusting the forces between the nodes, particularly the repulsion and collision forces so that there is is no superposition. Values too high or too low can make the simulation chaotic or too dense, while others make it more fluid or faster to stabilize from an initial seed.

That being said, if it was a bigger simulation I probably would have had issues keeping the performance, and it's possible I would have considered a different engine.

Makes sense. D3 is definitely the safest bet for fine-tuning those repulsion forces if you don't mind the learning curve. I ended up going a similar route for the Markov visualizations. I initially tried forcing it through a heavier canvas engine because of the sheer volume of state lottery draw combinations, but finding that 'Goldilocks' zone for the collision forces in D3 eventually tamed the hairball. Great work on this map. I'll probably end up referencing your layout if my node density gets out of hand in Phase 2.

Reply on news.ycombinator.com