D3 & Node

Posted 20th of May 2020.

Using node we can create and save graphs so they can just be embedded as images rather than having to be rendered from data client-side. However this requires some additional considerations since D3 doesn’t work from node out of the box.

DOM

D3 requires a DOM but node doesn’t provide one, you could use jsdom for this.

let dom = new JSDOM()
let svg = d3.select(dom.window.document.body)
  .append("svg")
  .attr('xmlns', 'http://www.w3.org/2000/svg')

(The namespace is necessary because we’re going to write this one to disc rather than inserting it immediately into a html5 document.)

Loading data

D3’s fetch based data loading functions obviously don’t work in node so we have to load the data manually.

let csv = await fs.readFile("seattle-temps.csv")
let data = d3.csvParse(csv.toString(),
  d => ({
    date: new Date(d.date),
    temperature: +d.temp
  }))

(The use readFileSync if you don’t want to deal with the promise.)

Saving graphs

Because we want to create and save graphs locally we have to extract the raw svg and save them.

fs.writeFile(name + ".svg", svg.node().outerHTML)