Server-side D3 with ease
Requires Node 6+
- 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
constD3Node=require('d3-node')constd3n=newD3Node()// initializes D3 with container elementd3n.createSVG(10,20).append('g')// create SVG w/ 'g' tag and width/heightd3n.svgString()// output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>Setting container & insertion point via selector
constoptions={selector: '#chart',container: '<div id="container"><div id="chart"></div></div>'}constd3n=newD3Node(options)// initializes D3 with container elementconstd3=d3n.d3d3.select(d3n.document.querySelector('#chart')).append('span')// insert span tag into #chartd3n.html()// output: <html><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
constd3n=newD3Node({styles:'.test {fill:#000;}'})d3n.createSVG().append('g')d3n.svgString()Output
<svgxmlns="http://www.w3.org/2000/svg"><defs><styletype="text/css"><![CDATA[ .test{fill:#000;} ]]></style></defs><g></g><svg>Create a canvas (for generating a png)
constcanvasModule=require('canvas');constd3n=newD3Node({ canvasModule });// pass it node-canvasconstcanvas=d3n.createCanvas(960,500);constcontext=canvas.getContext('2d');// draw on your canvas, then output canvas to pngcanvas.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