This is a small proof on concept showing how to generate a d3
SVG chart in a web worker and pass it back to the main UI thread to be injected into a webpage.
This PoC leverages jsdom
's experimental integration into the browser to generate a virtual DOM given web workers don't have direct access to the actual DOM. d3
will happily use jsdom's document to generate an SVG chart - pertty cool!
Integrating jsdom
into the browser with Browserify
was discussed here. I also lifted code from a gist that demonstrated how to generate a d3
chart with a force layout. The chart example comes from the d3 docs.
-
Clone the repo
-
run
npm install
-
run
npm start
- This will generate a browser-compatiblejsdom
bundle, set a watch on the source files, and fire up a server onhttp://localhost:8999
. This script works on Windows, you may want to execute the scripts separately on Mac/*nix machines.