Firefox struggling about d3.js svg library? - javascript

I coded some d3.j code that is svg visualization library and in my Mint installation firefox is really bad for rendering it. Is it about my installation or is it the general case?
Here is a example link for d3.js example

Almost 2 years later, and the animation in FF is still a problem with FF29. It's a shame.

I had the same problem. Transitions are very slow in FF 15 compared to Chrome and Safari. But you should try FF beta or Aurora. They come with significant performance improvements for SVG transitions and d3.js. My transitions are now running smoothly.

Related

EXT JS 6.0.2 Donut Chart Crashes Chrome

Chrome browser crashes ("Aw Snap!") randomly when rendering Ext JS Donut Charts.
I initially thought this was a data issue. But, I was able to reproduce it even on Ext JS Kitchen sink (http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/?charts=true#pie-donut)
To reproduce this just check and un-check the boxes on Legend below the donut chart. which will cause the chart to re-render and eventually crash (it sometimes takes me 20,30+ clicks to reproduce this).
This issue is limited to Chrome Browser only.
I've found few threads describing the same issue
Link1
Link2
But, No solution yet.
I need help finding a workaround or solution.
Thanks in advance.
This is known Chrome issue. Should be fixed with Chrome 55 which was released couple of days ago.
You can see the Chromium ticket here: https://bugs.chromium.org/p/chromium/issues/detail?id=666046
Testing: I have app which uses Ext 6.2 charts interactions a lot. It used to crash in couple of seconds - with version 55 so far no crash! :)

SVG zoom with svg-pan-zoom.js performance issues in Mozilla Firefox

I am using javascript svg-pan-zoom.js (https://github.com/ariutta/svg-pan-zoom) libary to zoom and pan svg in web application. Zooming in Firefox is very slow and laggy, while zooming in Chrome and IE11 works very well (tested with 5MB .svg file that presents floor plan - if file is smaller, this issue is not that noticeable). Panning is working fine. I've read many topics on this issue on forum but I haven't find any solution yet. Does anybody know what is causing this problem and how to fix it?
Example: http://jsfiddle.net/coz3fd0L/3/
Check your refreshRate option. Maybe you set a high number.
If not then you may set a low number (ex. 10 which means max 10 frames per second) and if may improve your problem.
Other than that I don't know of any other problems in svg-pan-zoom. At least if pan is smooth then zoom should be the same.
Maybe your SVG has a lot of edges/curves/nodes and Firefox is simply bad at resizing such things. Or it is bad at resizing large SVGs when matrix transform is used (matrix transform is used for zoom/pan in svg-pan-zoom).
Update: From what I see this is purely a Firefox problem (or the way it is). Just opening the SVG from your example http://imgh.us/test_51.svg takes 100% of CPU (for page scroll).
Also I did try to change matrix transform values manually (to test if it is svg-pan-zoom issue) and it is anyway very slow.
The only solution I see is to try to optimize your SVGs (maybe it is possible to make them simpler: less edges, nodes, do not render white elements...).

D3 Map Pan and Zoom Performance on Chrome

To make things easier, here is a JSFiddle of what I have.
TRY
In FireFox (version 35.0.1) pan the map. Click and hold anywhere on the map, and move it about quickly left and right. Panning movement should be quick and smooth.
Now try the same in Chrome and you'll see that it is not as smooth! It is a bit jerky/laggy. I find it laggy in the latest version of IE and Opera too.
By the way, if you comment out this style block, then behaviour all of a sudden smooths out and stops being laggy! You won't get a nice map of course.
#map path {
fill: #C9DCC9;
stroke: #066860;
}
SO WHAT?
First of all I would appreciate it if someone can confirm this behaviour on their PCs. I am on Windows 8.1 with all latest updates.
And then, why isn't this behaviour happening on other maps done with D3? This one for example behaves smoothly! Is it to do with the complexity of the polygons?
To fix this, I simplifed the paths of the map. I used the -simplification function on TopoJson.
After the simplification of the paths, the map panning and zooming was super smooth in Chrome, Firefox, Opera and IE 11.
TopoJson is a node package, so you would need to install node and a lot of other dependencies for TopoJson to get it working on windows. If you're lucky it'll work for you on Windows.
I was unlucky so I went and created a Virtual Machine running Ubuntu and in there, the node setup was soo much easier, I managed to do what I wanted in 5 minutes. Compared to days attempting to get this working on Windows.
Anyways, hope this helps. :)

Flot.js performs poorly on android webview

I am using flot.js library for my graphing needs, but the performance with the android webview is very poor. I have this graph on the webpage, and have a need to be able to scroll up and down. But scrolling causes what I liken to a "sloshing" effect (think water in a glass!).
If scroll down the flot graph "slips" upwards, and similarly if I scroll up the flot graph slides downwards before returning to its normal position. So if I scroll up and down quickly, the graph looks like its bouncing around and overlaps the title and footer (as seen below).
I have tested this on a desktop, and the problem disappears so I believe it has something to do with the canvas or webview performance.
As anyone run into this problem before and know how I can get the flot graph to behave and stay properly aligned?
sample flot graph http://img543.imageshack.us/img543/1627/kpy4.png
UPDATE:
Android 4.4 now uses chromium for the webviews (almost chrome, basically) and the performance is a lot better.
~~~~~~~~~~~~~~~~~~~~~~~
Perhaps not the answer I, or anyone else is looking for, but I have discovered the problem to be a combination of poor flot.js and poor android webview performance.
The android webview, as noted many times on this site, has subpar performance for intensive js applications. Turning on hardware acceleration did not help in this case.
Additionally, flot.js does not perform terribly well either. In talking to a colleague, he was able to cut the loading time needed for his application by almost a factor of 100 by writing pure javascript instead of using flot.
TL;DR: Android WebView == Flot.js == slow

VML issues after applying KB2482017

Up until now I had a well functioning interactive graph on a page rendered using flot. After some patches were pushed, it stopped rendering in IE7. After some trial and error I found that neither flot, nor any other js drawing library (that used excanvas or some derivative for IE fallback) would render on IE7 or IE8 on Windows XP with KB2482017. Windows 7, IE8 with the patch is not affected. I have not tested Vista.
After some digging it seems even basic VML is broken on XP with the patch. Microsoft's own VML sample fails to render.
Has anyone else seen this behavior, and if so, know a workaround?
Here is a screenshot of my reputation graph from a machine with XP, IE7, and the patch applied.
Do you have McAfee antivirus, with HIPS 7.0 ? If so that could be the cause.
Check https://kc.mcafee.com/corporate/index?page=content&id=KB70810 for a similar issue.

Categories