Using D3 version 5 to plot a map using JSON File

Question

I am trying to plot a map using a JSON file, I have tried all the always at my end but all the paths(regions on the map that should be different sizes and spread across the map) come up the same size(height and width) and in the same x and y coordinates. You would understand better when you run the code and inspect the SVG element in the browser. I am mentioning my code and the JSON file.

//Width and height
var w = 800;
var h = 800;

//Define map projection

var projection = d3.geoAlbersUsa();

// translate the map to w/2 and h/2 and scale it to 500 
// to see the map properly

//Define path generator
var path = d3.geoPath()
  .projection(projection);

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

//Load in GeoJSON data
d3.json("https://api.jsonbin.io/b/5f955d1bbd69750f00c34c5e").then(function(json) {
  console.log(json.features);
  json.features = json.features.map(function(feature) {
    return turf.rewind(feature, {
      reverse: true
    });
  })
  //Bind data and create one path per GeoJSON feature
  svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path);

  // Try coloring the elements using fill steelblue

});

<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>

" I have tried all the always at my end but the path for each section comes up as the same size" - what have you tried, and I'm afraid I'm not clear on the end result you are looking for - my guess would be is that you want to size the feature to fit the width/height? — Andrew Reid, Oct 22 '20 at 03:24
What I meant was that all the paths(regions on the map that should be different sizes and spread across the map) come up the same size(height and width) and in the same x and y coordinates. You would understand better when you run the code and inspect the svg element in the browser. @Andrew Reid — Harsh Kaur, Oct 22 '20 at 15:32
Your code generates errors, and it should, while also not drawing no actual elements: you're using d3v3 syntax with d3v5, `topojson` is undefined since you aren't using that library, and you don't have topojson in any event - you're trying to draw geojson data - `idx` doesn't have a objects property and there is no variable called `uk` to pass to `topojson.feature`. Is your goal simply to draw a map showing the geojson scaled to fit the provided dimensions? And if you have different code than in the question, can you edit the question to include it? — Andrew Reid, Oct 22 '20 at 20:08
Have updated the question with the code, Sorry about the confusion there ? @AndrewReid — Harsh Kaur, Oct 23 '20 at 14:51
No worries - I see a few issues: the projection isn't intended for Sask. (see [here](https://stackoverflow.com/a/40940028/7106086) on how to center a map on a given feature, but don't use d3.geoAlbersUsa, try d3.geoMercator or some other generic projection) and the winding order is incorrect (see [here](https://stackoverflow.com/q/49311001/7106086) on how to rewind with turf.js) — Andrew Reid, Oct 24 '20 at 03:06
I got the turf.js to work but I am trying since yesterday but have not been able to make the geoMercator function work with it, I have updated my code if you want to check it. @AndrewReid — Harsh Kaur, Oct 24 '20 at 20:52

score 0 · Answer 1 · answered Oct 25 '20 at 11:19

The answer @Andrew Reid linked to was perfect to fix the problem. You need to wait until you've loaded the JSON data before you can create the projection - otherwise you can't fit the bounds on the data yet.

I've had to remove some parts from your GeoJSON to be allowed to host it due to filesizes.

//Width and height
var w = 800;
var h = 800;

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

//Load in GeoJSON data
d3.json("https://api.jsonbin.io/b/5f955d1bbd69750f00c34c5e").then(function(json) {
  console.log(json.features);
  json.features = json.features.map(function(feature) {
    return turf.rewind(feature, {
      reverse: true
    });
  });

  var projection = d3.geoMercator().fitSize([w, h], json);
  // translate the map to w/2 and h/2 and scale it to 500 
  // to see the map properly

  //Define path generator
  var path = d3.geoPath()
    .projection(projection);

  //Bind data and create one path per GeoJSON feature
  svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("fill", "steelblue")
    .attr("stroke", "white");
});

<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>

Using D3 version 5 to plot a map using JSON File

1 Answers1