Name: d3-pre
Owner: FiveThirtyEight
Description: Pre-render d3 visualizations
Created: 2016-01-08 01:54:27.0
Updated: 2018-01-16 08:48:26.0
Pushed: 2016-10-08 19:07:12.0
Size: 2112
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|---|---|
| Aaron Bycoffe | 2016-07-14 21:18:02.0 | 2 |
| Andrei Scheinkman | 2016-10-05 20:49:49.0 | 1 |
| Matthew Conlen | 2016-10-08 19:07:12.0 | 79 |
| Zlatan Vasovi? | 2016-10-08 18:45:17.0 | 1 |
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A JavaScript library that pre-renders d3 visualizations into inline SVG elements, to reduce perceived page-load time and cut down on unwanted paint flashes.
The pre-rendering tool uses a headless browser to turn d3 code into its resulting SVG, and inserts the markup into your HTML. Then, the d3-pre JavaScript library overrides d3.append to check if a pre-rendered DOM node already exists before creating a new one. This approach allows you to use pre-rendered SVG without changing your visualization code.
See an example of the speed benefits of using inline SVG over SVG generated in the client by refreshing this page without pre-rendering and with pre-rendering.
install --save d3-pre
There are two things that you need to do to use this library:
d3 = require('d3');
equire the library and give it a reference to d3
Prerender = require('d3-pre');
prerender = Prerender(d3);
hen, when you start drawing SVG, call `prerender.start()`.
his modifies some d3 functions to make it aware
f the pre-rendered SVGs.
ender.start();
xisting d3 code goes here
3.select('body')
.append('svg')
.data(data)
.enter()
.append('rect')
.on('click', clickhandler)
etc. etc.
f you ever want to go back to the unmodified d3,
ust call `prerender.stop()`.
his is optional and usually not necessary.
ender.stop();
This can be done via a build task (like gulp), or on the command line. To provide control over which DOM modifications are saved back to the HTML file, you can add the following data-attributes in the HTML:
data-prerender-ignore: Any modifications that happen inside a node with this attribute will be ignored.data-prerender-only: Only modifications inside of this node are saved.data-prerender-minify: Any SVG with this attribute will automatically be passed through an SVG minification tool.Install the command line tool:
m install -g d3-pre-cli
Run the d3-pre command on an HTML file:
-pre ./path/to/index.html
This command will open the index.html file in a headless browser, running any JavaScript included on the page. Any modifications that the JavaScript makes to the DOM are saved back to the HTML file.
Install the gulp plugin:
m install gulp-d3-pre
Create a gulp task:
gulp = require('gulp');
d3Pre = require('gulp-d3-pre');
.task('prerender-svgs', function() {
lp.src('./public/index.html')
.pipe(d3Pre(options))
.pipe(gulp.dest('./public/'));
This task will open the index.html file in a headless browser, running any JavaScript included on the page. Any modifications that the JavaScript makes to the DOM are saved back to the HTML file. The following options may be passed to the gulp plugin:
preprocessHTML - A function to run before running the HTML through the pre-renderer. Takes a string as input and expects a string as output.postprocessHTML - A function to run after running the HTML through the pre-renderer. Takes a string as input and expects a string as output.Both of the above modules are thin wrappers around d3-pre-renderer. If you require more fine-grained control of when and where the pre-rendering step takes place, use d3-pre-renderer directly.
v1.3.0v4.MIT