Using D3.js on the server-side with Express.js

Greg Jopa

unread,

Nov 27, 2013, 2:41:46 PM11/27/13

to d3...@googlegroups.com

I put together a demo app that I'd like to share with the d3 community. This demo app renders a d3 bar chart on the server-side with node.js using the express.js web framework:

Blog Post: http://www.gregjopa.com/2013/11/render-svg-charts-server-side-with-d3-js/

Demo App: https://github.com/gregjopa/d3-server-side-demo

The tricky part for me was working with jsdom and integrating it with my ejs templates. I got this working by appending my chart widget to the jsdom and then getting it’s outerHTML value and rendering it in my ejs template: https://github.com/gregjopa/d3-server-side-demo/blob/master/bar_chart_helper.js#L7-L21. I haven't worked with jsdom before so let me know if you see any issues with this approach.

Hopefully this post will help other developers looking to run d3.js with node.js and express.js.

Raees Afridi

unread,

Jul 21, 2015, 8:31:45 AM7/21/15

to d3...@googlegroups.com

Hello Greg,

I am new to express and d3 and trying to configure and run your code, I didn't install jsdom because it didn't require but I got the following errors:

TypeError: e:\htdocs\hiwi\d3serverside\index.html:28
26| <body>
27| <h1>D3 Server-side Demo</h1>
>> 28| <%-
29| barChartHelper.getBarChart({
30| data: fixtureData,
31| width: 400,

Cannot read property 'querySelector' of undefined
at d3_select (e:\htdocs\hiwi\d3serverside\node_modules\d3\d3.js:562:13)
at Object.d3.select (e:\htdocs\hiwi\d3serverside\node_modules\d3\d3.js:1043:17)
at Object.getBarChart (e:\htdocs\hiwi\d3serverside\bar_chart_helper.js:15:6)
at eval (eval at <anonymous> (e:\htdocs\hiwi\d3serverside\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:31:22)
at eval (eval at <anonymous> (e:\htdocs\hiwi\d3serverside\node_modules\ejs\lib\ejs.js:242:14), <anonymous>:48:37)
at e:\htdocs\hiwi\d3serverside\node_modules\ejs\lib\ejs.js:255:15
at Object.exports.render (e:\htdocs\hiwi\d3serverside\node_modules\ejs\lib\ejs.js:293:13)
at View.exports.renderFile [as engine] (e:\htdocs\hiwi\d3serverside\node_modules\ejs\lib\ejs.js:323:20)
at View.render (e:\htdocs\hiwi\d3serverside\node_modules\express\lib\view.js:76:8)
at Function.app.render (e:\htdocs\hiwi\d3serverside\node_modules\express\lib\application.js:496:10)

Can you please tell me where is the problem?

Joe Keohan

unread,

Jul 21, 2015, 11:44:46 AM7/21/15

to d3...@googlegroups.com

Greg,

I just visited the jsom git and noticed the following update: "Note that as of our 4.0.0 release, jsdom no longer works with Node.js™, and instead requires io.js. You are still welcome to install a release in the 3.x series if you use Node.js™."

Joe

Greg Jopa

unread,

Jul 21, 2015, 1:07:32 PM7/21/15

to d3...@googlegroups.com

Hi Raees,

The module jsdom is no longer a production dependency of d3 so you need to require it separately. As Joe mentioned, you need to use jsdom version 3.x to work with Node.js (I don't think the d3 node module supports io.js yet). The d3 node module still uses jsdom as one of its devDependencies for testing so it is still possible to use jsdom with d3. I just updated my d3-server-side-demo repo to work with the latest version of d3 and jsdom 3. Check out the changes here: https://github.com/gregjopa/d3-server-side-demo/commit/eb88eb66d84df8816a26fbbf4a23fa1728909d12.

-Greg

Raees Afridi

unread,

Aug 26, 2015, 8:34:13 PM8/26/15

to d3-js

Hi Greg, thanks for the information. You are absolutely right. I install jsdom 3.x module but jsdom 3.x has dependency on contextify and contextify has dependency on C++ compiler and python. I install visual studio 2013 desktop and python But it still not work for me. I am fetching the data from postgresql database using node.js and then want to assign database values to the d3 histogram and show it in my local browser using node.js. Have you any idea?

Reply all

Reply to author

Forward