How can I run a javascript as a node.js script without the DOM?

Question

https://github.com/jasondavies/d3-cloud is a word cloud in javascript using D3 library. This is an interactive demo. The demo used the d3-cloud script to generate an SVG in the HTML.

I would like to use this on the server side and get node.js to generate me an SVG file and save it to the disk whenever I update my data instead of loading the D3 library to the browser and rendering it there. Is there a way to do this? Can I use libraries that seem to rely on the HTML DOM without the DOM?

I am new to node.js

"Can I use libraries that seem to rely on the HTML DOM without the DOM": No, that's like driving without a car. — dandavis, Feb 14 '14 at 18:36
You could checkout [Phantom.js](http://phantomjs.org/) which might be more suitable for this kind of task. — TheHippo, Feb 14 '14 at 18:45
Since svg is xml, could you work with xml by adding xml2js module? Just a thought..I also am not familiar with node.js — Francis Hemsher, Feb 14 '14 at 19:21
@TheHippo - phantomJS served me well. Thank you. I could have selected this as the answer :-) — Lord Loh., Feb 15 '14 at 23:06

score 3 · Answer 1 · answered Feb 14 '14 at 18:36

3

Check out jsdom. You can get access to a window context which you can then perform your d3 operations. Then use node file to save it to a filesystem

// Count all of the links from the Node.js build page
var jsdom = require("jsdom");

jsdom.env(
  "http://nodejs.org/dist/",
  ["http://code.jquery.com/jquery.js"],
  function (errors, window) {
    console.log("there have been", window.$("a").length, "nodejs releases!");
  }
);

answered Feb 14 '14 at 18:36

michael truong

321
1
4

1

don't forget that jsdom would need the canvas package to use the canvas methods mentioned in the linked script... – dandavis Feb 14 '14 at 18:40
I am running on EC2 and am having serious trouble getting canvas package. So I took @TheHippo 's suggestion and used phantomJS. I am sure this would have worked if I could get the packages to install :-( – Lord Loh. Feb 15 '14 at 23:00

score 3 · Accepted Answer · edited May 23 '17 at 11:45

I took TheHippo's suggestion and used PhantomJS, I created a JS -

svggen.js:

var page = require('webpage').create(),
    url = 'http://www.example.com/wordcloud.html';

page.open(url, function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var svgData = page.evaluate(function(s){
                var serializer = new XMLSerializer();
                var element = document.getElementById("svg1");
                return serializer.serializeToString(element);
        });
        console.log("<?xml version=\"1.0\"?>"+svgData);
    }
    phantom.exit();
});

wordcloud.html:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script src="d3.layout.cloud.js"></script>
<script>
  var fill = d3.scale.category20();

  d3.layout.cloud().size([500, 800])
      .words([
        "Hello", "world", "normally", "you", "want", "more", "words",
        "than", "this"].map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 800)
        .attr("id","svg1")
        .attr("xmlns","http://www.w3.org/2000/svg")
        .attr("xmlns:xlink","http://www.w3.org/1999/xlink")
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
</script>
</body></html>

Then I run

phantomjs svggen.js > svgFile.svg

The resulting svgFile.svg is a standalone SVG File. For d3cloud check this.

I'll have to check out PhantomJS. Looks like it does everything that I *thought* could be done with node.js! — AmeliaBR, Feb 16 '14 at 18:06
No. PhantomJS is a headless browser and a JS tester. In the little I have used it, I do not think it's domain overlaps much with node.js. And I am no node.js expert. — Lord Loh., Feb 16 '14 at 21:47
I see. So you'd need both to run a server that could also dynamically build websites with Javascript. — AmeliaBR, Feb 17 '14 at 18:38

score 0 · Answer 3 · answered Feb 14 '14 at 18:32

0

You can create a DOM without a document by creating a document fragment. Once you have that, you can append a root <svg> element to it, then pass that node to d3.select(node). From there on, the rest of d3 methods should work as normal.

answered Feb 14 '14 at 18:32

AmeliaBR

27,344
6
86
119

1

how does one make a document fragment in node.js? – dandavis Feb 14 '14 at 18:35
That's a good question... I can't find any sort of reference about whether node.js supports the stand-alone `new DocumentFragment()` constructor. (The most supported way to create a document fragment in browsers is to use a method call on the main document, which is no good for you.) This [module in npm](https://www.npmjs.org/package/fragment#readme) seems to do the job, but I can't see the full code without running npm. – AmeliaBR Feb 14 '14 at 18:51

score 0 · Answer 4 · answered May 15 '14 at 03:20

You don't need phantomjs if you are just rendering a svg with d3.js

You could run d3 directly in node.js

global.d3 = d3 = require "d3"
cloud     = require 'd3.layout.cloud'
fs = require 'fs'

draw = (words) ->
  d3.select("body").append("svg").attr("width", 500).attr("height", 800).attr("id", "svg1").attr("xmlns", "http://www.w3.org/2000/svg").attr("xmlns:xlink", "http://www.w3.org/1999/xlink").append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text").style("font-size", (d) ->
    d.size + "px"
  ).style("font-family", "Impact").style("fill", (d, i) ->
    fill i
  ).attr("text-anchor", "middle").attr("transform", (d) ->
    "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"
  ).text (d) ->
    d.text

fill = d3.scale.category20()
cloud().size([500, 800]).words(["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"].map((d) ->
  text: d
  size: 10 + Math.random() * 90
)).padding(5).rotate(->
  ~~(Math.random() * 2) * 90
).font("Impact").fontSize((d) ->
  d.size
).on("end", draw).start()

svg = d3.select('body').node().innerHTML

console.log svg
fs.writeFile 'svgFile.svg', svg

How can I run a javascript as a node.js script without the DOM?

4 Answers4

You could run d3 directly in node.js

Linked