javascript - D3 samples in a Microsoft Stack

Question

We're trying to get familiar with D3 (http://d3js.org/), in particular samples such as http://bl.ocks.org/mbostock/3306362 and http://bl.ocks.org/mbostock/2206590. It seems all these samples use local file IO to load geolocation info. The following code snippets are common:

queue()
.defer(d3.json, "/mbostock/raw/4090846/us.json")
.defer(d3.tsv, "unemployment.tsv")
.await(ready)

while other samples often use this signature to load data:

d3.json("someJSONFile.json", function(error, uk) {
console.log(uk);
});

We've created several local html files to test out the samples, but we're running into security issues. It's apparent the script is accessing a local file, which is really giving us problems in a Microsoft stack (Apple or Linux isn't an option at this time, though we have tried Chrome, with no success). How can we enable the html file or refactor the script to have access to the local files?

Answer 1

You need to host the files through a web server since web browsers restrict what types of files can be accessed locally. The simplest way to do this on a windows machine:

1. Install python

2. Navigate to the directory holding your example with cmd.exe. Holding down shift, right clicking on the folder with the example and selecting Open Command Window Here is the easiest way to do this.

3. On the command prompt, enter python -m SimpleHTTPServer 8000, or python -m http.server 8000, on newer versions to start a web server.

4. Open a web browser (I would really suggest chrome, the dev tools are way ahead of ff and ie), go to 127.0.0.1:8000. The example should show up.