D3-Node


Server-side D3 with ease

> Tested on Nodejs v16 & up

see examples >


$3

- 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

$3


__Create a SVG__

``javascript
import { D3Node } from 'd3-node' // 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:
`

$3

__Setting container & insertion point via selector__

`javascript
const options = { selector: '#chart', container: '

' }
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:

d3n.chartHTML() // output:

`

__Inline SVG styles__

`javascript
const d3n = new D3Node({styles:'.test {fill:#000;}'})
d3n.createSVG().append('g')
d3n.svgString()
`

> Output
`html






`

__Create a canvas (for generating a png)__
`javascript
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'));
`

$3

$3

`
$ npm test
``

$3

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