Developing D3.js applications in Chrome
So far I developed my D3.js applications using Firefox and Firebug, what worked really good.
But today I made this tutorial and they suggest to use Chrome and the pre-installed Web Inspector Developer Tools.And this is a bit more useful than Firebug, especially because of the possibility to add code directly within the console. So I decided to give it a try and develop for the next time in Chrome.
But when I opened my already developed applications…the first error occurred! Doh!
XMLHttpRequest cannot load file:///directory/of/my/JSON/document/germany.json. Cross origin requests are only supported for HTTP.
…as well as some related errors!
I was surprised about this, as there was no failure in Firefox. So I exerted my good old friend…Google. S/He said:“It’s not related to D3, any XMLHTTPRequest you make to another domain will throw this error if access is not allowed.” (Source)
Aha…I never heard of this…let’s find the solution!“Note: Chrome has strict permissions for reading files out of the local
file system. Some examples use AJAX which works differently via HTTP
instead of local files. For the best experience, load the D3 examples
from your own machine via HTTP. Any static file web server will work;”
Ok…so let’s set up a simple static Python server (on Ubuntu 12.04):
Ctrl+Alt+T (opens a terminal) cd /Path/to/my/application python -m SimpleHTTPServer 8888
Tip: I personally prefer to open terminal directly from directory, to avoid the “cd” stuff and search. Therefore I have “nautilus-open-terminal“ installed.
And that’s it. Now I just have to open the application from the localhost:
Tip: You can additionally, define an index.html on the main folder, to have a simple navigation!