Directly render and serve d3 visualizations from a nodejs server.

d3-server.js

// Start `node d3-server.js`
// Then visit http://localhost:1337/
//
var d3 = require('d3'),
    http = require('http'),
    jsdom = require('jsdom/lib/old-api'),
    fs = require('fs'),
    xmldom = require('xmldom');

http.createServer(function (req, res) {

    var pad = {t: 10, r: 10, b: 50, l: 40},
        width = 800 - pad.l - pad.r,
        height = 500 - pad.t - pad.b,
        samples = d3.range(10).map(d3.randomNormal(10, 5)),
        x = d3.scaleLinear().domain([0, samples.length - 1]).range([0, width]),
        y = d3.scaleLinear().domain([0, d3.max(samples)]).range([height, 0]),
        xAxis = d3.axisBottom(x).tickSize(height),
        yAxis = d3.axisLeft(y)

    var line = d3.line()
        .curve(d3.curveBasis)
        .x(function (d, i) {
            return x(i)
        })
        .y(y)

    var document = jsdom.jsdom();
    var svg = d3.select(document.body)

    svg.append('svg')
        .attr('xmlns', 'http://www.w3.org/2000/svg')
        .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
        .attr('width', width + pad.l + pad.r)
        .attr('height', height + pad.t + pad.b)
        .append('g')
        .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')
        .append('g')
        .attr('class', 'x axis')
        .call(xAxis)
        .append('g')
        .attr('class', 'y axis')
        .call(yAxis)
        .selectAll('.axis text')
        .style('fill', '#888')
        .style('font-family', 'Helvetica Neue')
        .style('font-size', 11)
        .selectAll('.axis line')
        .style('stroke', '#eee')
        .style('stroke-width', 1)
        .selectAll('.domain')
        .style('display', 'none')

    svg.selectAll('path.samples')
        .data([samples])
        .enter()
        .append('path')
        .attr('class', 'samples')
        .attr('d', line)
        .style('fill', 'none')
        .style('stroke', '#c00')
        .style('stroke-width', 2)

    res.writeHead(200, {'Content-Type': 'image/svg+xml'})
    res.end(svg.html())

    fs.writeFile("./out.svg", svg.html(), function (err) {
        if (err) {
            return console.log(err);
        }
    });


}).listen(1337, '127.0.0.1')

console.log('Server running at http://127.0.0.1:1337/');

package.json

{
  "name": "poc_svg_generation",
  "version": "1.0.0",
  "description": "",
  "main": "test_d3.js",
  "dependencies": {
    "d3": "^4.10.0",
    "d3-node": "^1.0.3",
    "jsdom": "^11.1.0",
    "xmldom": "^0.1.27"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

FIXME: The rendering of the closing svg tag prevents everything else to be seen.