security issue reproducing d3.js example at home

Question

I'm trying to reproduce this example from github gist (an map of the United States) https://gist.github.com/4431123 The required file "us.json" I copied to my home directory.

A similar problem has already appeared on this site.

<!-- language: lang-html -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: steelblue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
d3.json("us.json", function(error, us) {
  svg.append("path")
      .attr("d", topojson.object(us, us.objects.counties).geometries.map(function(d) {
        var bounds = path.bounds(d);
        return "M" + bounds[0]
            + "H" + bounds[1][0]
            + "V" + bounds[1][3]
            + "H" + bounds[0][0]
            + "Z";
      }).join(""));
});

</script>

Here are the error messages I'm getting:

XMLHttpRequest cannot load file:///C:/Users/work/Documents/d3js/us.json. Cross origin requests are only supported for HTTP.

So I tried using the web.

XMLHttpRequest cannot load https://gist.github.com/raw/4090846/b8c888f35c42400a080ab03c31a7649e0b9bc9a8/us.json. Origin null is not allowed by Access-Control-Allow-Origin.

Searching gives me this question on StackOverflow suggesting this is Chrome trying to save me from myself.

score 5 · Accepted Answer · answered Jan 06 '13 at 07:10

You're running into the same origin policy, which only allows AJAX calls from a page to be made to the same host and port, using the same protocol. To get around this, you can run a web server in the directory you're working in using Python:

$ python -m SimpleHTTPServer 8080

You can now access your page at http://localhost:8080 in your web browser, and the AJAX call should now work.

security issue reproducing d3.js example at home

1 Answers1