CODEWITHSUNDEEP
javascriptsvgd3.jsweb-worker
user1449496
user1449496

Reputation: 196

Use Web Worker and D3.js to asynchronously generate graphs?

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.

Upvotes: 12

Views: 5766

Answers (3)

arunkjn
arunkjn

Reputation: 5911

https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9

A recent commit 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.

Upvotes: 5

thedude
thedude

Reputation: 9812

I managed to calculate the chords and groups of a chord layout using a web worker by doing the following:

  1. create a custom build of d3 that doesn't have a dependecy on the document object or the DOM (see: https://github.com/mbostock/smash/wiki)

  2. create a web worker file and use importScripts to load the custom d3 build

  3. activate your worker in your rendering code. I used a promise to encapsulate the communication 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) ->
    ...

Upvotes: 1

Erik Dahlström
Erik Dahlström

Reputation: 60966

Web 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 computations, then pass the result back as a set of arrays.

Upvotes: 5

Related Questions