CODEWITHSUNDEEP
javascripthtmld3.jsgeojsontopojson
goppman
goppman

Reputation: 15

D3 and TopoJSON will not load in browser

I have been working with examples of D3 and TopoJSON from mbostocks github account The D3 and topoJSON work I have been doing was not appearing in the browwer or local nodejs http-server either. The example I just copy and pasted from mbostocks github didn't appear either. This example is below. Right now I am confused to why it is not appearing in the broswer. I have the script src in the file along with the needed html boiler plate. If anybody can please tell me why it is not running that would be great. I am just starting to work with D3 and topoJSON. Thank You!

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      .states {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
      }

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

      var width = 960,
          height = 500;

      var fill = d3.scale.log()
          .domain([10, 500])
          .range(["brown", "steelblue"]);

      var path = d3.geo.path();

      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

      d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
        svg.append("g")
            .attr("class", "counties")
          .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
          .enter().append("path")
            .attr("d", path)
            .style("fill", function(d) { return fill(path.area(d)); });

        svg.append("path")
            .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
            .attr("class", "states")
            .attr("d", path);
      });

      </script>
  </body>

</html>

Upvotes: 0

Views: 1640

Answers (1)

iH8
iH8

Reputation: 28638

You're not supposed to run it locally. Always best to run it from a httpserver. I've copied your example to Plunker: http://plnkr.co/edit/xojc5C7RcBpQehQBdLc1?p=preview and it just works. The only thing i changed was the URL used in the d3.json function and made a copy of the data file us.json. Now it refers to a local file /mbostock/raw/4090846/us.json which i'm guessing you don't have on the location/host you're using. The example runs on http://bl.ocks.org/ so the actual file url is http://bl.ocks.org/mbostock/raw/4090846/us.json. But you can't use that URL on your page because of cross-origin policies in your browser.

So what you must do is visit the url: http://bl.ocks.org/mbostock/raw/4090846/us.json and save that file as us.json in the same directory as where your index.html resides. Then change the URL in function d3.json() to us.json like i did in the Plunker. See for yourself, there is nothing wrong with that code. I'm guessing the script simply can't find the JSON file so it won't draw anything since it has no data to draw. You can see that in your console window, it should throw an error: "GET http://yourhost/mbostock/raw/4090846/us.json 404 (Not Found)"

BTW: The Plunker also has a download button so it downloads all the files used in that Plunker in a compressed zip file. You could use that too. Good luck!

Upvotes: 2

Related Questions