D3.js loading local data file from file:///

Question

I know that D3.js supports loading data files with XHR and JSONP requests.

However in my case, I am going to run .html files by double clicking on them from filesystem, which is going to run it like file://.../foo.html on browser.

Is it possible to load data file (csv or json) within the same directory from computer as foo.html on browser (while not running on http:// but file://)?

Firefox works fine with local filesystem. IE and Chrome do not, and the other answers have pointed out how to deal with those. — explunit, Mar 14 '13 at 20:02

score 29 · Answer 1 · edited Dec 20 '14 at 18:43

29

The best solution would be to run a server on your computer to make it work.

The simplest way to have a local web server, as explained here is to run this command in the directory where you have your source code:

python -m SimpleHTTPServer 8888 &

Then just load the page http://localhost:8888

edited Dec 20 '14 at 18:43

Gordon

19,396
4
34
73

answered Mar 14 '13 at 18:36

Christopher Chiche

14,855
9
57
95

3

Note: This command starts the Python web server in the background. To stop the server, type `fg` (to bring the process into the "foreground"), then press Ctrl+C. More info: https://www.digitalocean.com/community/tutorials/how-to-use-bash-s-job-control-to-manage-foreground-and-background-processes – Mr-IDE Nov 14 '17 at 17:35
For Jetbrain users, right click on html file and click "Run '{filename}'" button and you are good to go :) – yhware May 26 '19 at 13:43

score 8 · Accepted Answer · answered Mar 14 '13 at 19:01

8

You can by disabling the respective security mechanisms in your browser. I think it works in Opera by default, and you can start Chrome with the --allow-file-access-from-files command line flag to allow loading data from file://.

answered Mar 14 '13 at 19:01

Lars Kotthoff

104,352
13
194
196

score 2 · Answer 3 · answered Mar 03 '16 at 23:30

Similar to the python answer from Christopher Chiche above, you can also use the built-in server that comes with various versions of PHP.

php -S localhost:8888 &

This was more useful for me, as my application has hooks to a php back-end script as well as the d3 front-end.

score 2 · Answer 4 · answered Feb 18 '21 at 01:56

Adding onto Christopher Chiche's answer (I am a new user, can't comment). For python 3 in Windows, that command does not work. Instead use this one

python -m http.server [<portNo>]

As described here, in python 3

the module SimpleHTTPServer has been replaced by http.server, at least in Windows.

D3.js loading local data file from file:///

4 Answers4

Linked

Related