Can D3 read "Geojson" files?

Question

I've just downloaded a Geojson file from geojson.io to map the specific area I want in D3.

However, I cannot draw these features despite different approaches.

First, I thought maybe the file format - geojson - is not the correct one so I convert to json but I still cannot draw the features with D3. Then I converted the file format from json to geo.json, but still cannot show the map on the screen.

Here is an example of my geojson:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Melbourne","postcode":3004,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.96743202209473,-37.817242738346984],[144.9671745300293,-37.817581756139454],[144.97138023376465,-37.83439508475046],[144.96726036071777,-37.83737769454491],[144.9712085723877,-37.83934343961261],[144.97035026550293,-37.846189246249814],[144.97678756713864,-37.84930692776673],[144.9785041809082,-37.85283110466397],[144.98296737670898,-37.85601627346177],[144.98399734497067,-37.85073017332982],[144.98459815979004,-37.845714804898066],[144.9799633026123,-37.84503702624343],[144.97756004333496,-37.837259070321736],[144.97620820999146,-37.83701758470656],[144.97631549835205,-37.836602397064034],[144.9765408039093,-37.83548392076778],[144.97558057308197,-37.83526361283155],[144.97554302215576,-37.83480181136876],[144.9785041809082,-37.83524242934148],[144.9787616729736,-37.833632466297274],[144.9833106994629,-37.83412393242583],[144.98502731323242,-37.82775156590534],[144.98811721801758,-37.828904055935546],[144.98923301696777,-37.82320922404997],[144.9752426147461,-37.815208598896234],[144.96743202209473,-37.817242738346984]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Melbourne","postcode":3000,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.9558448791504,-37.82276853421615],[144.967303276062,-37.81910731693811],[144.9671745300293,-37.81737834565081],[144.97481346130368,-37.8151746960972],[144.97112274169922,-37.80768179558675],[144.95957851409912,-37.80608818475805],[144.9600076675415,-37.80496924596681],[144.9584197998047,-37.80154450977393],[144.95713233947754,-37.80168014591059],[144.9574327468872,-37.800595049843196],[144.95661735534668,-37.80079850657008],[144.95571613311765,-37.80608818475805],[144.95532989501953,-37.80849554104369],[144.95635986328122,-37.811886050589756],[144.9512529373169,-37.81324221081575],[144.9558448791504,-37.82276853421615]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Southbank","postcode":3006,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.96726036071777,-37.81914121793108],[144.9558448791504,-37.82287023210366],[144.9532699584961,-37.82361601233024],[144.94837760925293,-37.82320922404997],[144.94773387908936,-37.82592110356655],[144.94691848754883,-37.827005827470494],[144.94919300079346,-37.83032769523887],[144.9528408050537,-37.828158329147854],[144.95404243469238,-37.83102255682819],[144.95453596115112,-37.83062428330308],[144.95479345321655,-37.83078528775296],[144.9553084373474,-37.8307768138433],[144.95657444000244,-37.83040396085496],[144.96288299560547,-37.82856509014813],[144.96575832366943,-37.831378459010416],[144.97035026550293,-37.830293799384194],[144.96726036071777,-37.81914121793108]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Docklands","postcode":3008,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.95121002197266,-37.81310659591412],[144.94511604309082,-37.81500518186842],[144.94357109069824,-37.81297098076338],[144.93756294250488,-37.80971614241526],[144.93352890014648,-37.80958052103703],[144.93404388427732,-37.81283536536353],[144.93078231811523,-37.815412015363556],[144.92425918579102,-37.81690371899756],[144.91825103759763,-37.81873440498776],[144.920654296875,-37.82097184843051],[144.9319839477539,-37.822056645079854],[144.933443069458,-37.822192243539966],[144.93696212768555,-37.82585330779315],[144.94717597961423,-37.82605669492651],[144.9477767944336,-37.82287023210366],[144.9529266357422,-37.823412618470364],[144.95550155639648,-37.82273463488917],[144.95121002197266,-37.81310659591412]]]}},{"type":"Feature","properties":{"stroke":"#8080ff","stroke-width":2,"stroke-opacity":1,"fill":"#0080c0","fill-opacity":0.5,"city name":"Seddon","postcode":3011,"campus":"Southbank Campus","university":"Melbourne University"},"geometry":{"type":"Polygon","coordinates":[[[144.89966869354248,-37.81470005527579],[144.90559101104736,-37.81527640444762],[144.9093246459961,-37.80157841883145],[144.91232872009275,-37.799408207766895],[144.9148178100586,-37.800188134708165],[144.91627693176267,-37.79903519631872],[144.91636276245117,-37.797305754993076],[144.9143886566162,-37.79588147879352],[144.9098825454712,-37.79388066346596],[144.90554809570312,-37.79218501483793],[144.90365982055664,-37.79143891711323],[144.9023723602295,-37.790048442159254],[144.90262985229492,-37.78899709006653],[144.8938751220703,-37.78781006166096],[144.89035606384277,-37.78740307610388],[144.89031314849854,-37.78706391976077],[144.8833179473877,-37.78631777032694],[144.88142967224118,-37.79784832917946],[144.8798418045044,-37.7975770425844],[144.87941265106198,-37.80106978133416],[144.8869228363037,-37.801781872849624],[144.88529205322266,-37.8026635004523],[144.88409042358398,-37.809614426404934],[144.88687992095947,-37.8098517635444],[144.88962650299072,-37.81015691017421],[144.8899698257446,-37.80978395301097],[144.89447593688965,-37.81025862543725],[144.89816665649414,-37.81073329481208],[144.89820957183838,-37.81107234249728],[144.90112781524655,-37.81198776347078],[144.89966869354248,-37.81470005527579]]]}},

And here is my javascript:

var width = 900;
var height = 500;

var svg = d3.select("body").append("svg")
var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

d3.json("map.geo.json", function(err, geojson) {
      svg.append("path").attr("d", path(geojson));})

I am using d3v3

The map data should be drawn on the screen when I use D3 but now it cannot show anything and also doesn't have error message on it!

Answer 1

The short answer is yes - d3 can load and draw geojson files. Geojson is a subset of json - d3 paths take geojson objects representing geographic features and convert them to SVG or canvas paths. As geojson is a subset of json, we can use d3.json to load our geojson files. The file extention, whether .json, .geojson, or .geo.json is immaterial.

Your code loads and draws the geojson as expected. The problem instead lies elsewhere.

The issue is that the default Mercator project parameters spread the world over 960 pixels (anticipating a 960x500 pixel map). But, the default svg size is 300 pixels wide by 150 pixels high. Essentially your SVG is clipping your map so that only the top left of the map is visible (essentially Alaska and Northern Canada). Your features are not in Alaska nor Northern Canada - they are in Australia, so they are not visible - you can see this if you inspect your SVG - you'll see that the features are drawn beyond the extent of the SVG bounds (example):

This explains why there are no errors: the file is loaded and the features drawn: just beyond the extent of the SVG.

One solution would be to set the SVG width and height to the extent expected by the default projection parameters: 960x500 (you have width and height variables but you do not use them). This would include your feature, but they would be very small - after all the map is still showing the world - even if your features only cover a small part of it.

Scaling and centering a map is the main challenge now. This part has been answered many times before: you need to set your projection parameters to show the area of interest. The simplest way is to use fitSize, but this only works on v4+:

 projection.fitSize([svgWidth,svgHeight],geojsonObject])

As seen here:

var width = 900;
var height = 500;

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

var projection = d3.geoMercator();
var path = d3.geoPath().projection(projection);

d3.json("geo.json", function(err, geojson) { 

      projection.fitSize([width,height],geojson); // adjust the projection to the features
      svg.append("path").attr("d", path(geojson)); // draw the features

})

If you wish to remain with v3, this question should have some answers - as well as having more info for v4+.