Server-side D3 for static chart/map generation 📊
Clone or download
Latest commit 8c60656 Nov 29, 2018


Build Status Codecov npm npm

Server-side D3 with ease  

Requires Node 6+

maps and charts with d3-node

see examples >



Basic usage:


Create a SVG

 const D3Node = require('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=""><g></g></svg>

Advanced usage

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'#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>
 d3n.chartHTML()   // output: <div id="chart"><span></span></div>

Inline SVG styles

 const d3n = new D3Node({styles:'.test {fill:#000;}'})


<svg xmlns="">
     <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style>

Create a canvas (for generating a png)

 const canvasModule = require('canvas'); // only supports canvas@1.x currently
 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

See examples for more...

Run Tests:

$ npm test


  • Add more examples: (remote data, world map)
  • Create Gulp task
  • Add option to inject css/js into html output