How to use D3 in Node.js properly?


I've been trying to invoke D3 within Node.js. I tried firstly to import d3.v2.js from D3's website with the script tag, but then read this thread:

I want to run d3 from a Cakefile

Where D3's author advises one should 'npm install d3'...I did this, and I can successfully invoke it in node console:

dpc@ananda:$ node
> var d3 = require("d3");
> d3.version;

However, when trying to invoke it from app.js with 'node app.js', I get:

    throw e; // process.nextTick error, or 'error' event on first tick
TypeError: Cannot read property 'BSON' of undefined
at     /Users/dpc/Dropbox/sync/Business/MindfulSound/Development/

I realise that elsewhere, D3's author has clearly specified that one should require the canvas:


var Canvas = require("canvas");

but even then, (and even if specifically requiring index.js instead of d3.v2.js in a require statement in app.js), I can't get the below to work within a Jade template:

- script('/javascripts/d3.v2.js')
h1 Dashboard
        h2 Statistics
              var Canvas = require("canvas");
              var w = 400,
                  h = 400,
                  r = Math.min(w, h) / 2,
                  data = d3.range(10).map(Math.random).sort(d3.descending),
                  color = d3.scale.category20(),
                  arc = d3.svg.arc().outerRadius(r),
                  donut = d3.layout.pie();
              var vis ="body").append("svg")
                  .attr("width", w)
                  .attr("height", h);
              var arcs = vis.selectAll("g.arc")
                  .attr("class", "arc")
                  .attr("transform", "translate(" + r + "," + r + ")");
              var paths = arcs.append("path")
                  .attr("fill", function(d, i) { return color(i); });
                  .attrTween("d", tweenPie);
                  .delay(function(d, i) { return 2000 + i * 50; })
                  .attrTween("d", tweenDonut);

              function tweenPie(b) {
                b.innerRadius = 0;
                var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
                return function(t) {
                  return arc(i(t));

              function tweenDonut(b) {
                b.innerRadius = r * .6;
                var i = d3.interpolate({innerRadius: 0}, b);
                return function(t) {
                  return arc(i(t));

        h2 Achievements
8/26/2019 8:43:39 PM

Accepted Answer

The correct way to use D3 within Node is to use NPM to install d3 and then to require it. You can either npm install d3 or use a package.json file, followed by npm install:

  "name": "my-awesome-package",
  "version": "0.0.1",
  "dependencies": {
    "d3": "3"

Once you have d3 in your node_modules directory, load it via require:

var d3 = require("d3");

And that's it.

Regarding your other issues: Canvas is not required to use D3. The node-canvas example you linked requires canvas because it renders to a canvas. The TypeError (Cannot read property 'BSON' of undefined) appears to be related to your use of mongoose / monogdb, not D3.

6/8/2013 1:34:11 PM

To use with ES6's import instead of require:

import * as d3 from 'd3';

This is perhaps obvious to any experienced babel/ES6-user, and I know this is an old question, but I came here in an attempt to figure this out. Hope this is helpful for someone.

More on import vs. require is found here.

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow