Skip to content

Instantly share code, notes, and snippets.

@jpcofr
Forked from caged/d3-server.js
Last active August 2, 2017 15:21
Show Gist options
  • Save jpcofr/ba1d23a429181e3c7682ef7d61fb7e0c to your computer and use it in GitHub Desktop.
Save jpcofr/ba1d23a429181e3c7682ef7d61fb7e0c to your computer and use it in GitHub Desktop.
Directly render and serve d3 visualizations from a nodejs server.
// 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/');
{
"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"
}
@jpcofr
Copy link
Author

jpcofr commented Aug 2, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment