javascript - 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.

Answer 1

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.