d3 transitions not working in multiple browsers

Question

My question has to do with this chart (Beeswarm plot). I have a project which is based on this more or less. Some things are different and the volume of data is a little higher. For some reason, I don't see any transitions in IE, Firefox or Edge when the chart is updated with new data; however it works perfectly in chrome.

When I click on the filters to update the data, there is a 2-4 second lag and the new data is reflected after that. There is no transition but more like a graph refresh.

The exact browser versions are as follows:

Chrome v56 [Works]
Firefox v51
IE v11.576
Edge v38

Does any one have any idea about what might be causing this? Thanks in advance

Note: The example I used to make this chart works on IE, Firefox and Edge.

Jsfiddle here

Answer 1

The lag can be easily explained. You forgot to change this:

for (var i = 0; i < dataSet.length; ++i) simulation.tick();

In my original code I had approximately 190 countries. However, you have 440 data points, and that takes more time to compute.

Thus, simply change the number of calls to tick to something between 100 and 300:

for (var i = 0; i < 150; ++i) simulation.tick();
//                   ^-------- tweak this number

The greater this number the smaller the chance of overlapping circles, but the greater the lag. In a "normal" D3 force directed chart with the default settings, tick runs 300 times before the simulation stops.

If you want to keep the ticks as dataset.lenght , introducing a delay in the transitions reduces the visual effect of the lag.

Here is your updated fiddle: https://jsfiddle.net/oo20pdnk/

Regarding the other browsers, I couldn't reproduce the problem: It is working in Firefox and IE to me. However, you have some jQuery code at the bottom (which I removed anyway, mixing D3 with jQuery gives me headache).

PS: When using someone else's code, I believe it's a good idea changing the variable names. Right now you have something like africaColor , europeColor , countriesCircles etc, which makes sense in my code, but not in yours!