Server-side D3 with ease
- 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
var D3Node = require('d3-node')
var d3 = D3Node.d3
var d3n = new D3Node() // create instance
d3.select(d3n.document.body).append('span') // select <body> & insert span
d3n.html() // returns: <html><head></head><body><span></span></body></html>SVG creation
var d3n = new D3Node() // initializes D3 with container element
d3n.createSVG().append('g') // create SVG w/ 'g' tag
d3n.svgString() // output: <svg xmlns="http://www.w3.org/2000/svg"><g></g></svg>Setting container & insertion point via selector
var options = {selector: '#chart'}, container: '<div id="container"><div id="chart"></div></div>'}
var d3n = new D3Node(options) // initializes D3 with container element
d3.select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart
d3n.html() // output: <html><body><div id="container"><div id="chart"><span></span></div></div></body></html> Inline SVG styles
var 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>$ npm test
- Add more examples: (remote data, world map)
- Create Gulp task
- Add option to inject css/js into html output
- Canvas support