D3.js - json file won't load

Question

I am new to D3.js and am trying to load a json file. I have followed a tutorial and am using the following code:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
<title>D3 World Map</title>
<style>
  path {
    stroke: white;
    stroke-width: 0.5px;
    fill: black;
  }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
         var width = 900;
         var height = 600;

  var projection = d3.geo.mercator();

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

  d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {
      g.selectAll("path")
       .data(topology.features)
      .enter()
        .append("path")
        .attr("d", path)
  });
</script>

The structure of my json file is as follows:

{ "type": "Feature", "properties": { "REGION": "Southern Region", "REG_CODE": "03", "DIVISION": "Cork West", "DIV_CODE": "0319", "DISTRICT": "Bandon", "DIST_CODE": "4300A", "SUB_DIST": "Kinsale", "SUB_IRISH": "Cionn tSáile", "SUB_CODE": "4305B", "COUNTY_1": "Cork", "COUNTY_2": null, "GEOGID": "M4305B", "Male2011": 5765, "Female2011": 5963, "Total2011": 11728, "PPOcc2011": 4054, "Unocc2011": 1177, "Vacant2011": 1013, "HS2011": 5231, "PCVac2011": 19.4, "CREATEDBY": "Paul Creaner" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 154039.34449999966, 50090.991299999878 ], [ 154039.8311, 50105.332900000736 ], [ 154041.9757000003, 50130.335699999705 ]

and so on with a long list of coordinates

However when I load this html file, I am just getting a blank screen. I have checked the console and am not getting errors (I previously was and resolved these).

Can anyone help? Any help greatly appreciated.

Thank you.

So what exactly do you want to get from the json file? The coordinates? And could u send a link to the tut? — FutureCake
– FutureCake, Commented Nov 6, 2016 at 20:13
I want to be able to view the map using D3.js (with the aim of creating a heat map in the future but just trying to get the basics to work at the moment) - What do you mean send a link to the tut? Thanks for your help — Maeve90
– Maeve90, Commented Nov 6, 2016 at 20:35
The first error, as pointed out by @cojack's answer, is the wrong usage of arguments. The second and maybe third error appears to be caused by the file format and the projection used. My answer to "D3.js - Drawing points on map fails due to wrong projection" may help solving this. — altocumulus
– altocumulus, Commented Nov 6, 2016 at 21:14

Andrew Reid · Accepted Answer · 2017-11-24 00:28:54Z

2

First, cojack's answer is the first part of the answer.

Second, your geojson does not use WGS84, instead it uses a projected coordinate space. D3 needs WGS84 or lat long pairs. So this will produce errors when D3 tries to project it onto the SVG coordinate space. You'll have to reproject the geojson in order to use it in d3. You will need to know what projection the data uses currently in order to reproject it.

Third, once you are able to project without errors, the projection parameters can be changed so that your map is centered and scaled properly over your data. On a Mercator projection

projection.scale(number).center([longitude,latitude]);

should be sufficient to properly scale and center a map.

I swapped the geojson for another, and had no issues with displaying data based on the plunker in cojack's comment (plunker, takes a moment to load geojson).

edited Nov 24, 2017 at 0:28

answered Nov 6, 2016 at 21:19

Andrew Reid

38.3k7 gold badges74 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maeve90 Over a year ago

Good spot on pointing out the projected coordinate space - I did not realise that D3.js needed to be in lat long format. I will try that and hopefully it will resolve the problem. Thanks

cojack · Accepted Answer · 2016-11-06 20:27:58Z

1

First of all, json data is wrong. Syntax of your json is not completed. Then, you mismatch arguments order, error is first in callback, not data. So when you will change it, it will might works as you exptected. From:

d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {

To:

d3.json("Census2011_Garda_Subdisticts.json", function(error, topology) {

Don't forget to check error if exists and react to them.

Regards.

answered Nov 6, 2016 at 20:27

cojack

2,6501 gold badge21 silver badges19 bronze badges

2 Comments

Maeve90 Over a year ago

Thanks for your suggestion - I have tried reversing the order and I still have no map appearing and no errors in the console. Any other ideas?

cojack Over a year ago

I have created Plunker for your question: plnkr.co/edit/bdPdAA01aEGYZgG7Z05A?p=preview and for me it "do something" but doesn't apear, and in console I have an error related to d3 itself. But I don't know this library. I just only figure out an logic problem in your code.

Collectives™ on Stack Overflow

D3.js - json file won't load

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related