0

I would like to minimize greenland and antartica on my D3 geojson map. How do I do this. I've tried scale and translate methods but they simply move the map around on the page not providing the minimized y coordinates.

image of map

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.v3.js"></script>
  <script src="topojson.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";
        var margin = 75,
            width = 1920 - margin,
            height = 1080 - margin;

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class', 'map');

        var projection = d3.geo.mercator();

        var path = d3.geo.path().projection(projection);


        var map = svg.selectAll('path')
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', path)
                     .style('fill', 'rgb(9, 157, 217)')
                     .style('stroke', 'black')
                     .style('stroke-width', 0.5);

      };
      </script>
  </head>
<body>
  <script type="text/javascript">

    /*
        Use D3 to load the GeoJSON file
    */
    //d3.json("world-topo-min.json", draw);
    d3.json("world_countries.json", draw);

  </script>
</body>
</html>
Improve this question
4
  • Have a look at the article Interactive Map with d3.js. In section 3. Convert Files there is a paragraph on excluding Antarctica. The same will work for Greenland, although I think it might be best to just clip this country like shown in the article.
    – altocumulus
    Commented Aug 30, 2017 at 8:55
  • Thank you altocumulus for responding but section 3 is on excluding Antartica in the process converting geojson to topojson using the ogr2ogr utility. Is there a way to exclude it from the map I already have?
    – heisenberg
    Commented Aug 30, 2017 at 10:43
  • What does your world_countries.json file look like? Could you set up a working demo?
    – altocumulus
    Commented Aug 30, 2017 at 12:15
  • Here is my working demo. d3-projects-mcent.c9users.io/Udacity/…
    – heisenberg
    Commented Aug 30, 2017 at 12:37

1 Answer 1

Reset to default
3

If you want to remove the areas for Greenland and Antarctica on the fly, you can simply filter your GeoJSON FeatureCollection, i.e. geo_data.features. In this array you will find features for both Greenland ("id": "GRL") as well as Antarctica ("id": "ATA"). Hence, you can make use of the array's .filter() method to get rid of these two features leaving the rest untouched:

 var map = svg.selectAll('path')
   .data(geo_data.features.filter(d => d.id !== "GRL" && d.id !== "ATA))
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.