[Javascript, D3.js, Dropbox] Visualize public JSON file from Dropbox in D3.js

load_public_dropbox_file_and_use_it_in_d3.js.md

Dropbox, D3.js, File, Folder, Public, Load, JSON, JSONP, CORS, Access-Control-Allow-Origin, Error

If you try to load a public JSON-file from Dropbox, you will probably get this error message:

XMLHttpRequest cannot load https://www.dropbox.com/s/123456789/data.json?dl=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

To load the file successfully, you have to change the end dl=0 to dl=1 and replace www.dropbox.com with dl.dropboxusercontent.com, so the URL should look like this: https://dl.dropboxusercontent.com/s/123456789/data.json?dl=1.

Now you can call:

var dropbox_url = "https://dl.dropboxusercontent.com/s/123456789/data.json?dl=1";

d3.json(dropbox_url, function(error, data){
  console.log("Successfully loaded file from Dropbox!");
  console.log(data);
});
````

I didn't actually need this for D3.js, but it was really helpful, thanks a lot!

This was very helpful.