0

I have a script that is supposed to show GeoJson data. When I run this script I am able to enter a page and, however page is empty, it doesn't have any errors in the console. Also, I can see svg element in the html and it has values.enter image description here

Code:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>geoPath measures</title>
</head>

<body>
<div align="center">
<svg id="my_dataviz" width="400" height="560"></svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>
  var svg = d3.select('#my_dataviz');
  var projection = d3.geoMercator().scale(400).translate([200, 280]).center([0, 5]);
  var geoGenerator = d3.geoPath().projection(projection);
  // REQUEST DATA
  d3.json(
    'https://raw.githubusercontent.com/EugeneBorshch/ukraine_geojson/master/Ukraine.json', 
    function(err, json) {
      svg.append("g")
      .selectAll("path")
      .data(json.features)
      .enter()
      .append('path')
      .attr('d', geoGenerator)
      .attr('fill', 'steelblue');
    }
  );
</script>
</body>
</html>

What is the problem? Why I can't visualize data?

evgenyorlov1
  • 225
  • 5
  • 15
  • 1
    This is working as expected - but the coordinates are beyond the edge of your SVG (note the negative y values in the path data). How did you choose your centering point : `[0,5]`. This is not near the Ukraine, but probably somewhere along the coast of Africa between Nigeria and Ghana. If you used a centering coordinate in Ukraine, you'd have more luck, try `[31,48]`. This [question & answer](https://stackoverflow.com/q/42587745/7106086) covers the same problem. This [answer](https://stackoverflow.com/a/40940028/7106086) shows how to automagically scale and translate the map to a given feature. – Andrew Reid Jan 19 '21 at 16:53
  • @AndrewReid, I was going to close this a duplicate. Is there a reason you did not? – Mark Jan 19 '21 at 18:09
  • @Mark, was getting round to it – Andrew Reid Jan 19 '21 at 19:02
  • @AndrewReid, I didn't want to do it in case you were planning some brilliant re-hash to this old, frequently asked issue. – Mark Jan 19 '21 at 19:21

0 Answers0