4 ms·

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

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?

CSenn 10y ago
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?
- tixzdk 10y ago
  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 :)
  - CSenn 10y ago
    Hmm, that sounds like a promising idea...
    - nsthorat 10y ago
      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).
austinlyons 10y ago
Or maybe just show a spinner to communicate "doing some intense computation"?
- CSenn 10y ago
  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...
zodPod 10y ago
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.

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?

CSenn 10y ago

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?

tixzdk 10y ago
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 :)
- CSenn 10y ago
  Hmm, that sounds like a promising idea...
  - nsthorat 10y ago
    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).

austinlyons 10y ago

Or maybe just show a spinner to communicate "doing some intense computation"?

CSenn 10y ago
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...

zodPod 10y ago

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.