Skip to content

Developing D3.js applications in Chrome

7. March 2013

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:

http://localhost:8888

Tip: You can additionally, define an index.html on the main folder, to have a simple navigation!

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: