Instantly share code, notes, and snippets.

@mef /pre-render.js
Last active Jul 17, 2018

Embed
What would you like to do?
proof-of-concept pre-rendering d3.js svgs on the server using node.js and jsdom module.
// pre-render d3 charts at server side
var d3 = require('d3')
, jsdom = require('jsdom')
, fs = require('fs')
, htmlStub = '<html><head></head><body><div id="dataviz-container"></div><script src="js/d3.v3.min.js"></script></body></html>'
jsdom.env({
features : { QuerySelector : true }
, html : htmlStub
, done : function(errors, window) {
// this callback function pre-renders the dataviz inside the html document, then export result into a static file
var el = window.document.querySelector('#dataviz-container')
, body = window.document.querySelector('body')
, circleId = 'a2324' // say, this value was dynamically retrieved from some database
// generate the dataviz
d3.select(el)
.append('svg:svg')
.attr('width', 600)
.attr('height', 300)
.append('circle')
.attr('cx', 300)
.attr('cy', 150)
.attr('r', 30)
.attr('fill', '#26963c')
.attr('id', circleId) // say, this value was dynamically retrieved from some database
// make the client-side script manipulate the circle at client side)
var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', '#f9af26')"
d3.select(body)
.append('script')
.html(clientScript)
// save result in an html file, we could also keep it in memory, or export the interesting fragment into a database for later use
var svgsrc = window.document.innerHTML
fs.writeFile('index.html', svgsrc, function(err) {
if(err) {
console.log('error saving document', err)
} else {
console.log('The file was saved!')
}
})
} // end jsDom done callback
})
// no semi-column was harmed during this development
@mishravinod202

This comment has been minimized.

Show comment
Hide comment
@mishravinod202

mishravinod202 Oct 15, 2014

i get the content in the "index.html" as "undefined", can you tell me why it is??

mishravinod202 commented Oct 15, 2014

i get the content in the "index.html" as "undefined", can you tell me why it is??

@Climax777

This comment has been minimized.

Show comment
Hide comment
@Climax777

Climax777 commented Jan 13, 2015

Same here

@Climax777

This comment has been minimized.

Show comment
Hide comment
@Climax777

Climax777 Jan 13, 2015

Line 37 should become:

var svgsrc = window.document.documentElement.innerHTML

Climax777 commented Jan 13, 2015

Line 37 should become:

var svgsrc = window.document.documentElement.innerHTML
@edgar-humberto

This comment has been minimized.

Show comment
Hide comment
@edgar-humberto

edgar-humberto Apr 27, 2015

@Climax777 indeed that fixed it.

edgar-humberto commented Apr 27, 2015

@Climax777 indeed that fixed it.

@edgar-humberto

This comment has been minimized.

Show comment
Hide comment
@edgar-humberto

edgar-humberto Apr 27, 2015

Also note that jsdom need to be 3.x.x as 4.0.+ does not support node.js

edgar-humberto commented Apr 27, 2015

Also note that jsdom need to be 3.x.x as 4.0.+ does not support node.js

@lauraGgit

This comment has been minimized.

Show comment
Hide comment
@lauraGgit

lauraGgit Jun 16, 2015

Also, if you plan on using d3.json, you need to pull the XMLHTTPRequest from here, because otherwise you get get the following error:
dirname/node_modules/d3/d3.js:1931
oresend", "progress", "load", "error"), headers = {}, request = new XMLHttpReq
ReferenceError: XMLHttpRequest is not defined

lauraGgit commented Jun 16, 2015

Also, if you plan on using d3.json, you need to pull the XMLHTTPRequest from here, because otherwise you get get the following error:
dirname/node_modules/d3/d3.js:1931
oresend", "progress", "load", "error"), headers = {}, request = new XMLHttpReq
ReferenceError: XMLHttpRequest is not defined

@kalebtrotter

This comment has been minimized.

Show comment
Hide comment
@kalebtrotter

kalebtrotter Feb 23, 2016

@Climax777 mad props. Thanks so much!

kalebtrotter commented Feb 23, 2016

@Climax777 mad props. Thanks so much!

@DinisCruz

This comment has been minimized.

Show comment
Hide comment
@DinisCruz

DinisCruz Apr 29, 2016

thx, here is my first pass at using node to render js (OWASP/Maturity-Models@f35b924)

DinisCruz commented Apr 29, 2016

thx, here is my first pass at using node to render js (OWASP/Maturity-Models@f35b924)

@bradoyler

This comment has been minimized.

Show comment
Hide comment
@bradoyler

bradoyler commented Jul 12, 2017

Give d3-node a try.

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