Cannot import data from csv file in d3

Question

I'm just learning d3, and I'm attempting to import data from a CSV file, but I keep getting the error "XMLHttpRequest cannot load file:///Users/Laura/Desktop/SampleECG.csv. Cross origin requests are only supported for HTTP. ". I've searched for how to fix this error and have ran it on a local web server, but I haven't found a solution that works for d3.v2.js. Here's a sample of the code:

var Time = []
    ECG1 = []

d3.csv("/Desktop/d3Project/Sample.csv", function(data) 
      {
      Time = data.map(function(d) {return [+d["Time"]];});
      ECG1 = data.map(function(d) {return [+d["ECG1"]];});
      console.log(Time)
      console.log(ECG1)
      });

Any help will be much appreciated.

What issues have you encountered with the local web server? Ajax requests won't work with the file: protocol, so a web server (whether it's local or not) is required. Ideally would would server both the script and the csv file from the same server. — nullability
– nullability, Commented Jan 10, 2014 at 18:43
I have faced the same problem. check do you gave correct file path? and to open file:/// , You should perform the request using local server. Try to open with firefox first. since it handle the request exception. And please provide more information as much as possible (i.e) your console logs and some more information. — divakar
– divakar, Commented Sep 25, 2014 at 5:49
If your goal is to run a local web server with minimal hassle, consider a browser extension such as Web Server for Chrome. — hbere
– hbere, Commented Jun 22, 2018 at 17:03

Hillary Sanders · Accepted Answer · 2017-01-17 20:42:25Z

34

This confused me too (I am also a d3 beginner).

So, for some reason, web browsers are not happy about you loading local data, probably for security reasons or something. Anyways, to get around this, you have to run a local web server. This is easy.

In your terminal, after cd-ing to your website's document root (thanks @daixtr), type:

python -m SimpleHTTPServer 8888 &

Okay, now as long as that terminal window is open and running, your local 8888 web server will be running.

So in my case, originally the web page I was working on was called

file://localhost/Users/hills/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html

When I opened it in chrome. To open up my page on my local web server, I just typed (into the chrome search bar):

http://localhost:8888/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html

Now, reading in CSVs should work. Weird, I know.

edited Jan 17, 2017 at 20:42

answered Sep 25, 2014 at 5:08

Hillary Sanders

6,09711 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Yang Over a year ago

I tried this and end up getting this error in console: XMLHttpRequest cannot load localhost:8888/test.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. Have you ran into this as well?

Dimitar Nikovski Over a year ago

Had the same issue as your comment, just request the html page the same way as the .csv so that they are of the same origin. So instead of opening the .html from the file in windows explorer, request it in the browser: http://localhost:8888/Desktop/website/mypage.html

Matt Stobbs Over a year ago

SimpleHTTPServer has been renamed to http.server in python 3

needshelp Over a year ago

I'd also add that you can access Terminal and drag & drop the file in, hit enter, get an error, then copy in the python code.

daparic · Accepted Answer · 2015-02-09 01:05:09Z

6

To those using built-in python webserver and who are still experiencing issues, do REMEMBER and make sure that you run the "python -m SimpleHTTPServer 8888" invocation at the correct path of which you consider to be your DocumentRoot. That is, you cannot just run 'python -m SimpleHTTPServer 8888' anywhere. You have to actually 'cd /to/correct/path/' containing your index.html or data.tsv and then from there run 'python -m SimpleHTTPServer 8888'.

answered Feb 9, 2015 at 1:05

daparic

4,6222 gold badges47 silver badges46 bronze badges

1 Comment

Hillary Sanders Over a year ago

That's a great point. I added it to the main answer so people see.

NinaNeu · Accepted Answer · 2020-02-24 20:07:57Z

Also, just learning D3 for school work. I was trying to run this simple D3 example: https://gist.github.com/d3noob/b3ff6ae1c120eea654b5

I had the same problem as OP re: loading data using Chrome browser. I bet the great solution Hillary Sanders posted above was re: Python 2.X.

My answer is re: Python 3.X [OS: Ubuntu 16x]:

Open a terminal window within the root directory of your project, then run:

python3 -m http.server

It will serve HTTP on port 8000 by default unless it is already taken, in that case to open another port, e.g. 7800, run:

python3 -m http.server 7800

Then, on your Chrome browser address bar type:

localhost:8000

The above worked for me because I only had an index.html page in my root folder. In case, you have a HTML page with a different name, type the whole path to that local HTML page and it should work also. And, you should be able to see the graph created from the data set in my link (that must be in a folder like data/data.csv). I hope this helps. :-)

user3007270 · Accepted Answer · 2017-02-26 02:26:26Z

1

Use Firefox, idk what Chrome tries to accomplish

answered Feb 26, 2017 at 2:26

user3007270

4046 silver badges16 bronze badges

3 Comments

KCK Over a year ago

Want to know the reason why chrome wasn't able to do this

Deeksha Over a year ago

I faced the same CORS issue on Firefox as well.

Raptor yesterday

Incorrect. CORS is not Chrome-specific.

Collectives™ on Stack Overflow

Cannot import data from csv file in d3

4 Answers 4

4 Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related