Load local .csv with js and process it with d3.js

Question

I stuck on the following thing. I don't have a running local http-service so I'd like to handle my file loading otherwise.

First I created the following function, as suggested in some references.

var fileArray = [];
function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files;
        window.array = []
        if (f) {
            var r = new FileReader();
                r.onload = function(e) { 
                var contents = e.target.result;
                window.array.push(contents);
                fileArray.push({name:f.name, contents: contents});
                }
                r.readAsText(f);
                console.log(fileArray);
                } else { 
                    alert("Failed to load file");
                }
            }
            document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

Then I try to call the fileArray in a d3.csv function. But this is where I stuck - the console log just shows an empty array.

var dataset = []
                    d3.csv(fileArray, function(data) {
                    dataset = data.map(function(d) { return [ d["TEXT"], +d["HOURS"], +d["MONTH_DIGIT"] ]; });
                    console.log(dataset)
                });

The .csv file has the following structure.

"TEXT","HOURS","MONTH_DIGIT"
"Adjustments work",849.45,"01"

How do I exactly call the file to work with d3.js?

That would me my last try. I'd like to take the file and it's contents and work with it. — thelama, Aug 12 '13 at 14:09
But couldn't you just work on the file's content inside `d3.csv()`? Nothing prevents you from doing non-d3.js logic inside the cdv() method. — m_vdbeek, Aug 12 '13 at 14:22
It seems, that my fileArray code isn't working as it should. I added another console.log for (f) - the file is displayed but the log for the fileArray is emtpy as it is. Anyone an idea why? edit: started the whole thing now via python simplehttp — thelama, Aug 20 '13 at 13:20
possible duplicate of [D3.js loading local data file from file:///](http://stackoverflow.com/questions/15417437/d3-js-loading-local-data-file-from-file) — user1251007, Sep 03 '14 at 12:24
See here another thread about importing csv: files.https://stackoverflow.com/a/63871971/13730780 — erdogant, Sep 13 '20 at 19:17

score 2 · Accepted Answer · answered Aug 12 '13 at 14:36

2

If you want to "take the file and it's contents and work with it", you could load the file inside the d3.csv() method, after the callback and the apply the changes you wanted to make to the content.

d3.csv('/path/to/myfile.csv, function(data) {
    // Modify the files data
    ...
    // Do something with d3.js
});

answered Aug 12 '13 at 14:36

m_vdbeek

3,704
7
46
77

10

this would be possible if i ran a http service, which I don't have at the moment. "XMLHttpRequest cannot load file:. Cross origin requests are only supported for HTTP." I even thought of starting a python simplehttp server but shouldn't it be possible to handle files locally without having any kind of http in the background? – thelama Aug 13 '13 at 05:18
Yes, I have tried it with a relative path aswell as directly in the directory where the .html file is. – thelama Aug 13 '13 at 12:42
same problem here aswell – gustavz Sep 30 '19 at 12:07
I also tried accessing local file through file://. It fails with the error : "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.". I was not looking to update my browser settings to allow cross origin requests. Easiest way was to make the local file accessible over http. – Binita Bharati Jan 30 '20 at 05:57
Simple but unsafe way is to start Chrome with command and arg: C:\PathTo\Chrome.exe" --allow-file-access-from-files for Windows and open -a "Google Chrome" -n --args --allow-file-access-from-files for macOS. – K. Symbol Aug 19 '20 at 03:25

score 2 · Answer 2 · answered Aug 07 '14 at 18:32

For JSON:

var data = JSON.parse(JavascriptStringVariableThatContainsJSON);

For CSV:

 var data = d3.csv.parseRows(JavascriptStringVariableThatContainsMyCSVdata);

//then add data to the graph and call enter, something like:

 var dataEnter = svg.selectAll("rect").data(data).enter();

score 0 · Answer 3 · answered Jan 16 '23 at 16:57

d3.csv tries to fetch over http/https.

You need to read the file first then use d3.csvParse on the content (in string format).

A simple example in node:

import * as d3 from "d3";
import * as fs from "fs";

const csv = fs.readFileSync("./data/data.csv", "utf8");
const data =d3.csvParse(csv);
console.log(data);

Load local .csv with js and process it with d3.js

3 Answers3