How to use D3 in Node.js properly?

Question

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"); undefined > d3.version; '2.8.1'  

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

node.js:201     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/nad.am/nadam/node_modules/mongoose/node_modules/mongodb/lib/mongodb/index.js:45:44 

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

https://github.com/mbostock/d3/blob/master/examples/node-canvas/us-counties.js

as:

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   section.css-table     section.two-column       section.cell         hr.grey         h2 Statistics         #mainGraph             script(type="text/javascript")                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 = d3.select("body").append("svg")                   .data([data])                   .attr("width", w)                   .attr("height", h);               var arcs = vis.selectAll("g.arc")                   .data(donut)                   .enter().append("g")                   .attr("class", "arc")                   .attr("transform", "translate(" + r + "," + r + ")");               var paths = arcs.append("path")                   .attr("fill", function(d, i) { return color(i); });               paths.transition()                   .ease("bounce")                   .duration(2000)                   .attrTween("d", tweenPie);               paths.transition()                   .ease("elastic")                   .delay(function(d, i) { return 2000 + i * 50; })                   .duration(750)                   .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));                 };        section.cell         hr.grey         h2 Achievements 

Answer 1

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.