d3 in node and in browser - How to import?

Question

I simply can't understand what the best way is to import and use all the functionality of d3 in node and in the browser. This certainly has to do with my limited understanding of the differences of require. import and importing d3 in a script-tag.

When should I use what? Should I, for example when I want to read a file in node, just install npm install d3 and then I have access to e.g. the d3's csvfunction via

import {csv } from "d3-fetch ?

For example I have this little script:

import { csv } from 'd3-fetch'
let path = './data.csv'
let data = await csv(path)
console.log(data)

In my package.json I have:

"dependencies": {
    "d3-fetch": "^3.0.1"
}

But still I get the error:

ReferenceError: fetch is not defined

I'd be super happy to receive any pointer to good ressources to learn about how imports should work. For me this simply isn't trivial. I know there are some ressources on SO, but none really helped me so far. I'm sorry for this very simple, yet confusing question...

Noah Brinton Noah Brinton · Accepted Answer · 2021-11-08T22:19:27

Nothing looks wrong with your import statements. Node does not natively support the fetch API which is why you get a reference error. The creator of D3 actually answered this question here.

d3 in node and in browser - How to import?

1 Answers