I'm currently working a problem that requires my web application to generate a chart that represents approximately 50k to 60k points of data. It loads fairly quickly (~6 seconds), but what I'm wondering if it is possible to use D3.js to generate the graph in a Web Worker and then pass the SVG back to be loaded into the page.
I'm currently working a problem that requires my web application to generate a chart that represents approximately 50k to 60k points of data. It loads fairly quickly (~6 seconds), but what I'm wondering if it is possible to use D3.js to generate the graph in a Web Worker and then pass the SVG back to be loaded into the page.
Share Improve this question asked Jun 11, 2012 at 17:14 user1449496user1449496 1961 silver badge5 bronze badges3 Answers
Reset to default 5Web Workers have no DOM access, so all you could do on that side would be to build something that could be used for quickly creating the DOM. The worker(s) could e.g process the datasets and do all the heavy putations, then pass the result back as a set of arrays.
https://github./mbostock/d3/mit/43d38773623b52209d2667287a1ae626fb95b0d9
A recent mit by Jason Davies. Mike Bostock says that in future the DOM dependent code will be separated from d3.core and that way you can make a custom d3 build that works with web-workers API.
I had the same problem where I have a force directed graph with a large number of nodes. It feels very sluggish. I want to improve the performance in some way. I think the last thread with phantomJS on a node server is a good idea, but the network latency involved in the approach will ruin the smooth force-directed feeling.
I managed to calculate the chords and groups of a chord layout using a web worker by doing the following:
create a custom build of d3 that doesn't have a dependecy on the document object or the DOM (see: https://github./mbostock/smash/wiki)
create a web worker file and use
importScripts
to load the custom d3 buildactivate your worker in your rendering code. I used a promise to encapsulate the munication with the worker:
calculateChords = (padding, matrix) -> deferred = $.Deferred() worker = new Worker("worker.js") worker.onmessage = (e) -> deferred.resolve(e.data.groups, e.data.chords); worker.postMessage { matrix: matrix } deferred.promise()
later, in the rendering function:
calculateChords(matrix).then (groups, chords) -> ...