How can we load a CSV file into JupyterLab using d3?

Question

I couldn't find a straightforward way to run d3 in JupyterLab, but when I load it this way:

%%html
<script src="https://d3js.org/d3.v7.min.js"></script>

This works:

%%javascript
d3.select(element)
    .append("text")
    .text("Hello World!");

Hello World!

Now I am trying to load a CSV file like this one:

Name,Count
A,10
B,15
C,14

To do so, I run this:

%%javascript
d3.csv("df.csv", function(data){
    console.log(data);
});

This does not work and output is something like this:

What's the correct way to load CSV into JupyterLab using d3?

score 1 · Accepted Answer · answered Aug 01 '21 at 11:41

This is a static file so in order to load it you need to use an endpoint which serves files as raw text/blobs, which is files/. It requires a path relative to root of the jupyter server (this is the directory where you start JupyterLab from). For example, if you have the df.csv in the root directory and your URL for JupyterLab looks like:

http://localhost:8889/lab/tree/Untitled.ipynb

you want to use:

http://localhost:8888/files/df.csv

How can we load a CSV file into JupyterLab using d3?

1 Answers1