Server-side D3 with ease
Tested on Nodejs v16 & up
- Performance: pre-rendering allows offloading data processing, and network overhead
- Take advantage of the entire ecosystem: npmjs.com
- Static rendering of Data-Driven Documents (D3.js)
- Portable SVG with embedded stylesheets
- Easily adapt examples from bl.ocks.org
Create a SVG
import { D3Node } from 'd3-node' const d3n = new D3Node() // initializes D3 with container element d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height d3n.svgString() // output: <svg width="10" height="20" xmlns="http://www.w3.org/2000/svg"><g></g></svg>
Setting container & insertion point via selector
const options = { selector: '#chart', container: '<div id="container"><div id="chart"></div></div>' } const d3n = new D3Node(options) // initializes D3 with container element const d3 = d3n.d3 d3.select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart d3n.html() // output: <html><head></head><body><div id="container"><div id="chart"><span></span></div></div></body></html> d3n.chartHTML() // output: <div id="chart"><span></span></div>
Inline SVG styles
const d3n = new D3Node({styles:'.test {fill:#000;}'}) d3n.createSVG().append('g') d3n.svgString()
Output
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style> </defs> <g></g> </svg>
Create a canvas (for generating a png)
const canvasModule = require('canvas'); // supports node-canvas v1 & v2.x const d3n = new D3Node({ canvasModule }); // pass it node-canvas const canvas = d3n.createCanvas(960, 500); const context = canvas.getContext('2d'); // draw on your canvas, then output canvas to png canvas.pngStream().pipe(fs.createWriteStream('output.png'));
$ npm test
- Add more examples: (remote data, world map)
- Create Gulp task
- Add option to inject css/js into html output