You're running into a Cross Domain Request issue when requesting the
json from a remote server.
If you look at your debugging tools when you load your page (or the
jsfiddle page) you'll see the
error in your cosole.
One solution would be to set up a proxy server to get around
An easier solution would be to do the following:
Copy the actual contents of the circle.json file you're trying to load,
Paste that content into a local document on your file
Refer to the local file in your script tag
Note: If you'd like to learn more about the Cross Domain Request issue,
google 'cross domain requests' or 'cors'. Or read this article on cross domain ajax requests or this
wikipedia page on Same Origin Policy. Good times...
Just saw your edit to the question. Changing the extension from .json to
.js won't solve the problem (the json won't be recognized as valid
which point the D3 object will no longer be able to recognize it as
Yet another solution would be to paste the json directly into your
Here's a working
jsfiddle that does just that.