Search code examples
javascriptjsond3.jstreemap

D3.js: Treemap doesn't load from JSON file


I am trying to run this very example of a treemap on localhost, but I can't load the JSON file (which, by the way, is the same JSON file that the example uses).

The console returns the next error in Google Chrome:

XMLHttpRequest cannot load file:///C:/Users/Usuario/Downloads/d3/flare.json. Cross origin requests are only supported for HTTP. 

The JSON file is in the same folder as the html file.

Thanks in advance for your help.


Solution

  • You cannot load local files because of the security policy. To quote the D3 website:

    When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. If you use d3.xhr locally (including d3.json et al.), you must have a local web server. For example, you can run Python's built-in server:

    python -m SimpleHTTPServer 8888 &

    or for Python 3+

    python -m http.server 8888 &

    Once this is running, go to http://127.0.0.1:8888/.