https://github.com/ptytb/d3-worker
Render D3 charts inside background process (worker)
https://github.com/ptytb/d3-worker
d3 shadow-dom web-component worker worker-service
Last synced: 6 months ago
JSON representation
Render D3 charts inside background process (worker)
- Host: GitHub
- URL: https://github.com/ptytb/d3-worker
- Owner: ptytb
- License: mit
- Created: 2017-11-28T20:49:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T16:15:53.000Z (over 7 years ago)
- Last Synced: 2024-11-27T09:14:46.694Z (11 months ago)
- Topics: d3, shadow-dom, web-component, worker, worker-service
- Language: JavaScript
- Size: 2.77 MB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# d3-worker
```html
```
```javascript
// test_render.js
export class Render extends BaseRenderer {
constructor() {
super();
this.register();
}
sizeHint(size) { /* tell the host chart its dimensions to reflow */ }
load(data) { /* fetch data for rendering from *source* */ }
render(config) { /* draw witn d3 here */ }
}
new Render();
```
[Live example](https://ptytb.github.io/d3-worker/)
## Synopsis
This library does rendering of the d3 chart in two stages:
1. Worker stage. Renders SVG in a background process into fake-DOM.
2. Component stage. Now SVG is subdued to the real-DOM component and requires only updates, which are fast.
Both stages share the same renderer code.
The point is to allow interaction with some d3 charts while other
d3 charts are being loaded and rendered, the first time slowly.
It's still a work in progress package, any contributions or critique would be appreciated!
## Install
```bash
npm install d3-worker
```
## Usage
Just use the **<d3-worker>** tag as above and include
*dist/d3-worker-wrapper.min.js* in your html file.
Settings can be passed to renderer script by **<set>** tag.
There's an example in */docs*:
- index.html
- renderTest.js
run server from package root, go to http://localhost:8000/docs
[Try it on github pages](https://ptytb.github.io/d3-worker/)
## Dependencies
- **Web Components** support in browser (turn it on in FireFox by setting *dom.webcomponents.enabled=true*, *dom.webcomponents.customelements.enabled=true*)
- **nodom** library for fake-DOM (using forked version)
- **D3** library
- **Spin.js** library for nice spinner
- **rollup** for building
## Issues
There're two things can have negative affect on performance:
- serializing and de-serializing of the fake-DOM.
- layout reflow when inserting fake chunk received from worker.
The latter is resolved by means of *Shadow DOM* ability
to encapsulate its contexts [read here about CSS Containment](https://developers.google.com/web/updates/2016/06/css-containment).
The side effect is
you have to provide size hint for component manually. Otherwise, when
size is being calculated naturally, e.g. regarding with the content
have been generated by d3, the reflow time taken cancels all the positive
effects of parallel processing.
## Todo
- [ ] Remove duplication of d3 library code base for wrapper & renderer
- [ ] Fix *config* passed to render
- [ ] component.updateFinished event
- [ ] cleanse workers
- [ ] Use class instead of ugly renderer boilerplate
- [ ] Custom shadow DOM Styles
- [ ] Render to raster. Requires *Offscreen Canvas feature*
- [ ] Make sane ES6 exports
- [ ] Replace *eval()* with dynamic *import()*
- [ ] Import thru <link rel="import">
- [ ] Zero-copy transfer from worker
- [ ] Provide *wrap()* for usage without components
- [ ] Add docs
- [ ] Test with polyfill