0

I'm trying to play around with this Simple d3.js Graph, yet whenever I load the file locally, the graph won't render.

I'm not sure if this has something to do with loading the D3.js library? I have the CSV file in the directory.

I know this is kind of a vague question, but any ideas as to why this won't work locally?

Kyle
  • 1,153
  • 5
  • 28
  • 56

3 Answers3

2

Change the line trying to load data.csv to request the version he is hosting at http://bl.ocks.org/d3noob/raw/b3ff6ae1c120eea654b5/a1f7e8f2a609bfab778b8c48eaa0f7c90f3f6f80/data.csv

You cannot load files locally.

wrshawn
  • 429
  • 2
  • 6
  • Now I'm getting: **1 XMLHttpRequest cannot load http://bl.ocks.org/d3noob/raw/b3ff6ae1c120eea654b5/a1f7e8f2a609bfab778b8c48eaa0f7c90f3f6f80/data.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.** – Kyle Mar 02 '15 at 04:19
  • 1
    Sigh. If you are using chrome and start it with `--allow-file-access-from-files` you can load it from your file system. From the os x terminal, `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files` On windows, you have to edit the properties on the .exe, or something. – wrshawn Mar 02 '15 at 04:30
  • I use @user1403582's method. There's no need to run a web server locally if you want to use Chrome. However, I find that I need to provide the full path to the html file. Since I almost always start Chrome from the directory containing the file I'm working on, I add `\`pwd\`` in a shell script: `open -a /Applications/Google\ Chrome.app --args --allow-file-access-from-files \`pwd\`/"$1"`. – Mars Mar 02 '15 at 05:56
2

If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. Try Firefox to see if that's the case (it will probably let you load the file correctly).

If that is the problem, you will want to install a local web server like WAMP (if you're running Windows) or follow instructions on the wiki page here: https://github.com/mbostock/d3/wiki

Good luck

d3noob
  • 2,133
  • 3
  • 29
  • 36
0

javascript is not allowed to load files from local disk. which is what the csv file becomes when saved to local, and the d3.js tries to refer to it. if you have a local webserver, you can make it work.

sujitv
  • 135
  • 1
  • 12
  • *sigh* I guess I can just push to GitHub – Kyle Mar 02 '15 at 04:12
  • You may hit the same problem you had when trying to use user1403582's approach. The problem being that you are now making a cross domain request, where potentially the server has not explicitly allowed your domain (local = null) to access its resources through a script. see : https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – sujitv Mar 02 '15 at 04:31