Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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')
http.createServer(function (req, res) {
// Chrome automatically sends a requests for favicons
// Looks like https://code.google.com/p/chromium/issues/detail?id=39402 isn't
// fixed or this is a regression.
if(req.url.indexOf('favicon.ico') != -1) {
res.statusCode = 404
return
}
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.random.normal(10, 5)),
x = d3.scale.linear().domain([0, samples.length - 1]).range([0, width]),
y = d3.scale.linear().domain([0, d3.max(samples)]).range([height, 0]),
xAxis = d3.svg.axis().scale(x).orient('bottom').tickSize(height),
yAxis = d3.svg.axis().scale(y).orient('left')
var line = d3.svg.line()
.interpolate('basis')
.x(function(d, i) { return x(i) })
.y(y)
var vis = d3.select('body').html('').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 + ')')
vis.append('g')
.attr('class', 'x axis')
.call(xAxis)
vis.append('g')
.attr('class', 'y axis')
.call(yAxis)
vis.selectAll('.axis text')
.style('fill', '#888')
.style('font-family', 'Helvetica Neue')
.style('font-size', 11)
vis.selectAll('.axis line')
.style('stroke', '#eee')
.style('stroke-width', 1)
vis.selectAll('.domain')
.style('display', 'none')
vis.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(d3.select('body').node().innerHTML)
}).listen(1337, '127.0.0.1')
console.log('Server running at http://127.0.0.1:1337/');
@raees

This comment has been minimized.

Show comment Hide comment
@raees

raees Aug 17, 2015

Hi,

I tried your code but it shows the following error message:
TypeError: Cannot read property 'querySelector' of undefined

Can you please tell me where is the problem or any solution?

raees commented Aug 17, 2015

Hi,

I tried your code but it shows the following error message:
TypeError: Cannot read property 'querySelector' of undefined

Can you please tell me where is the problem or any solution?

@mattbullen

This comment has been minimized.

Show comment Hide comment
@mattbullen

mattbullen Sep 2, 2015

Same question!

Same question!

@edgar-humberto

This comment has been minimized.

Show comment Hide comment
@edgar-humberto

edgar-humberto Sep 9, 2015

Same here same error. Anyone have the answer to this?

Same here same error. Anyone have the answer to this?

@mhebrard

This comment has been minimized.

Show comment Hide comment
@mhebrard

mhebrard Oct 1, 2015

Maybe i miss something, but in my tests, the problem is :
on server side, there is no DOM. so d3.selection cannot find objects.

I still don't know the trick to use d3 in server side.

mhebrard commented Oct 1, 2015

Maybe i miss something, but in my tests, the problem is :
on server side, there is no DOM. so d3.selection cannot find objects.

I still don't know the trick to use d3 in server side.

@micheledisalvatore

This comment has been minimized.

Show comment Hide comment
@micheledisalvatore

micheledisalvatore Oct 19, 2015

here you can find an implementation of this example that works https://github.com/Objectway/d3-server-renderer

here you can find an implementation of this example that works https://github.com/Objectway/d3-server-renderer

@ubear

This comment has been minimized.

Show comment Hide comment
@ubear

ubear Oct 30, 2015

This simple project works using d3 and node.js, and it will render to png image:https://github.com/ubear/hegel

ubear commented Oct 30, 2015

This simple project works using d3 and node.js, and it will render to png image:https://github.com/ubear/hegel

@dotob

This comment has been minimized.

Show comment Hide comment
@dotob

dotob Jan 6, 2016

hi, i got it to work with jsdom: https://gist.github.com/dotob/37b80cbbd9f0e1f135db (sorry its coffeescript now...)

dotob commented Jan 6, 2016

hi, i got it to work with jsdom: https://gist.github.com/dotob/37b80cbbd9f0e1f135db (sorry its coffeescript now...)

@wboykinm

This comment has been minimized.

Show comment Hide comment
@wboykinm

wboykinm Jun 6, 2016

Here's a vanilla-JS implementation using jsdom (which is the first of all of the possible methods that I've actually gotten to work).

wboykinm commented Jun 6, 2016

Here's a vanilla-JS implementation using jsdom (which is the first of all of the possible methods that I've actually gotten to work).

@bradoyler

This comment has been minimized.

Show comment Hide comment
@bradoyler

bradoyler Aug 13, 2016

Try using D3-Node

Try using D3-Node

@plouc

This comment has been minimized.

Show comment Hide comment
@plouc

plouc Oct 1, 2016

You can try nivo, it's a set of d3 powered React components, it doesn't use d3 for DOM manipulation, so it's easy to render it on the server side without using jsdom or headless browser rendering, it also provide an http API.

For now those libraries are under heavy development.

An example of a pack layout

plouc commented Oct 1, 2016

You can try nivo, it's a set of d3 powered React components, it doesn't use d3 for DOM manipulation, so it's easy to render it on the server side without using jsdom or headless browser rendering, it also provide an http API.

For now those libraries are under heavy development.

An example of a pack layout

@jpcofr

This comment has been minimized.

Show comment Hide comment
@jpcofr

jpcofr Aug 1, 2017

Hi... I wrote an updated version of this example because it is not working. However, I have to manually set the closing svg tag because I do not know how to add the path inside the body of the svg. Could somebody check at that please?

jpcofr commented Aug 1, 2017

Hi... I wrote an updated version of this example because it is not working. However, I have to manually set the closing svg tag because I do not know how to add the path inside the body of the svg. Could somebody check at that please?

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