CODEWITHSUNDEEP
javascriptjsond3.jsgeojson
Maeve90
Maeve90

Reputation: 345

D3.js - json file won't load

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.

Upvotes: 0

Views: 672

Answers (2)

Andrew Reid
Andrew Reid

Reputation: 38151

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).

Upvotes: 2

cojack
cojack

Reputation: 2610

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.

Upvotes: 1

Related Questions