0

I am trying to create a Map of any country from geoJson file using d3.js

Below is the code of html file 

<!DOCTYPE html>
<html>

  <head>
  <title>Demo d3</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="file://d:AUS.jsonp"></script>
    </head>

<body>

<script>

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

d3.json("AUS.json",function(data){

var group=canvass.selectAll("g")
                 .data(data.features).
                 .enter()
                 .append("g")

var projection=d3.geo.mercator().scale(7300).translate([]0,1980);
var path=d3.geo.path().projection(projection);

var areas=group.append("path")
               .attr("d",path)
                .attr("class","area")
                .attr("fill","blue");



});

</script>

  </body>
</html>

I have kept the AUS.json file locally in the same path as that of HTML file but when I open the HTML page I don't get any map.

I think that HTML file is not able to open that JSON file.

Any idea what to do?

user3074097
  • 807
  • 1
  • 8
  • 13
  • It looks like you have a typo -- should be `.translate([0,1980]);`. – Lars Kotthoff Dec 06 '13 at 11:24
  • sry ,yes it was a typo error.but changing it did not solve the problem. – user3074097 Dec 06 '13 at 11:32
  • Are you getting any error message? You may have run into [this problem](http://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work). – Lars Kotthoff Dec 06 '13 at 11:33
  • No error message.There is a similar post check this http://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work. but the solution is not clear. – user3074097 Dec 06 '13 at 11:35
  • If you're not getting an error message then that's probably not the problem. It may simply be the case that the map is zoomed/translated to a position where you can't see anything. [This question](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) may help with that. – Lars Kotthoff Dec 06 '13 at 11:39
  • If I debug in chrome and check the body of html page,I don't see any tag created by d3 which means that page is not generating map. – user3074097 Dec 06 '13 at 11:42
  • Not even the `svg` tag? – Lars Kotthoff Dec 06 '13 at 11:48
  • I believe that this code d3.json("AUS.json",function(data){ makes an http request to get that file.But the file is in local folder so it fails.In the browser console I am getting "XMLHttpRequest cannot load AUS.json" – user3074097 Dec 06 '13 at 11:49
  • SVG is getting generated after solving last typo error.. – user3074097 Dec 06 '13 at 11:51
  • Right, so you do have the same problem as in the question I've linked to. Have you tried any of those answers? – Lars Kotthoff Dec 06 '13 at 11:53
  • No My script is not able to access the local json file ie. I get message in the console "XMLHttpRequest cannot load file:///C:/Users/xyx/Desktop/New%20folder/AUS.json. Cross origin requests are only supported for HTTP" – user3074097 Dec 06 '13 at 11:55
  • Yes -- have you tried including the JSON in your HTML file? – Lars Kotthoff Dec 06 '13 at 12:08
  • Sorry to say that .But could you tell me how..I think even if i add json into html page,how will the call to d3.json("AUS.json",function(data) will access JSON included in HTML?As d3.json makes an HTTP call – user3074097 Dec 06 '13 at 12:14
  • Put `data = ;` instead of the call to `d3.json`. – Lars Kotthoff Dec 06 '13 at 12:19
  • I am not sure how the binding will happen then..Sorry to bother a lot – user3074097 Dec 06 '13 at 12:27
  • Remove the call to `d3.json`, keeping only what's inside the callback function. Then copy and paste the contents of the JSON file as outlined above. – Lars Kotthoff Dec 06 '13 at 12:50
  • Okay..Now path is generated under svg tag..but it is still not visible.. – user3074097 Dec 06 '13 at 13:18
  • Hey its working..thanks a lot..yipee.I don't believe you had lot of patience..thanks again.. – user3074097 Dec 06 '13 at 13:22
  • 1
    Could you post your solution as an answer for reference please? – Lars Kotthoff Dec 06 '13 at 13:58

0 Answers0