There is a considerable lag when I drag and release the slider. I assume you are doing some intense computation, but perhaps allow the UI to be responsive while you are doing so?
This was the first thing I noticed too. What's the point of a slider if I can't watch it change as I slide? It'd make more sense to just show me a series of images or possibly allow me to select what I'm looking at based on some kind of button or something. The slider interface makes it feel like something that you should see changing live.
That's a good point. I tried some light optimizations using ShouldComponentUpdate in React, but I believe the bottleneck is a synchronous blocking call in the D3 rendering process. Larger networks write up 25,000 SVG elements, and I was not sure how to significantly improve rendering speed. Someone suggested Canvas with D3 could speed rendering up?
If possible, send it off to a web worker? That free's up the UI thread
Edit: So it's the rendering that's hard on the CPU. Canvas would probably improve performance. Also, the graphic is so simple and there doesn't seem to be any event listeners on the edges themselves, that converting should be trivial :)
For the most part you're not doing live animations, statically drawing on a 3 canvases would give you what you want (without huge overhead of DOM nodes and simplicity of 2D canvas painting). Web workers aren't going to do much since most of your lag is coming from way too much DOM (causing layout, repaints to take forever).
In my experience spinners work great for async calls, but not so great for blocking synchronous computations. There is probably something that could be done though with a little bit of creativity though...
