csvd3.jsjsbin

How do I reference a csv file in jsbin


I am trying to recreate this d3 example in JSBIN

d3.csv("bar-data.csv", function(error, data) {
...
})

I am trying to reference the csv file but it does seem to be able to access the csv file:

d3.csv("http://bl.ocks.org/d3noob/raw/8952219/d45ad0a7caf9c499d1a1e975b3760c90f5321072/bar-data.csv", function(error, data) {
...

I have tried uploading the file to dropbox and using that link but that alos does not work.

Can anyone advise how I can get these urls to the csv file to work. or offer another way for me to try and recreate this example? The reason I want to recreate it is so I can modify and test it with other data and just generally do more with it....

NOTE Another option is to try jsfiddle, which I will, but I would like to use jsbin.


EDIT1

here is the JSFIDDLE using the dropbox link to the csv file. this is the error I get in firefox:

 https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv 200 OK 966ms    d3.v3.min.js (line 1)
 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dropbox.com/s/plpl0yjxze9elpd/bar-data.csv. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
 TypeError: data is undefined

EDIT2

One way is to not read in from the csv at all and have it in an array already , which takes a while to get it to the format I want, but I would still like to be able to get it to work by reading in the csv file.

data = [{"date":"2013-01","value":53},{"date":"2013-02","value":165},{"date":"2013-03","value":269},{"date":"2013-04","value":344},{"date":"2013-05","value":376},{"date":"2013-06","value":410},{"date":"2013-07","value":421},{"date":"2013-08","value":405},{"date":"2013-09","value":376},{"date":"2013-10","value":359},{"date":"2013-11","value":392},{"date":"2013-12","value":433},{"date":"2014-01","value":455},{"date":"2014-02","value":478}]

FIDDLE
JSBIN


Solution

  • It's going to be hard to find somewhere to drop that file that won't hit you with CORS restrictions. The easiest thing to do would just be to download the code and run it locally from a file.

    If you really want to do it all in the browser, Plunker would be a good choice. It's similar to jsfiddle or jsbin, but allows you to create any type of file you want in your project. So just create a csv file there and paste the data in.