Projecting topoJSON using D3 shows tiny

Question

I have been pounding my head for several hours to how does my map shows super small in D3.

I've tried adjusting the scale but it doesn't seam to project correctly.

Here's my code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Manda</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <style>
      .states :hover {
        fill: red;
      }

      .state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: 0.5px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
      }

      svg {
        background: rgb(201, 197, 197);
      }
    </style>
  </head>
  <body>
    <svg></svg>
  </body>
  <script>
    var w = 960,
      h = 600;
    var svg = d3.select("svg");
    svg.attr("width", w).attr("height", h);
    var projection = d3
      .geoAlbers()
      .scale(200)
      .translate([w / 2, h / 2]);
    var path = d3.geoPath().projection(projection);

    d3.queue()
      .defer(d3.json, "NCR/Mandaluyong/MandaTopo.json")
      .await(ready);

    function ready(err, data) {
      if (err) return console.log(err);

      var brgys = topojson.feature(data, data.objects.Mandaluyong).features;

      svg
        .selectAll(".brgy")
        .data(brgys)
        .enter()
        .append("path")
        .attr("class", "brgy")
        .attr("d", path)
        .attr("stroke", "black");
    }
  </script>
</html>

I added an stroke to emphasize the map.

Here's the MandaTopo.json. https://raw.githubusercontent.com/popoy2k/MandaLightMap/master/NCR/Mandaluyong/MandaTopo.json

Here's what i see in the svg Click me

Here's an [example](https://bl.ocks.org/Andrew-Reid/81589005add7ecc665de57237537ae3c) looking at the duplicate (and using the fitSize method and your code): — Andrew Reid, Aug 30 '19 at 16:18

score 0 · Answer 1 · answered Aug 30 '19 at 15:25

0

The projection you're using is d3.geoAlbers, which the documentation says is:

a U.S.-centric configuration of d3.geoConicEqualArea

Since it looks like your data is in the Philippines, maybe a different projection would work better for you.

I tried replacing the line var projection = d3.geoAlbers... with the following, which seemed to work pretty well:

var projection = d3
      .geoMercator()
      .scale(900000)
      .center([121.038505, 14.588329]);

answered Aug 30 '19 at 15:25

Andrea Crawford

321
2
10

The d3 Albers projection parameters can be made to accommodate any region and any Albers projection by setting the rotation and parallels manually. – Andrew Reid Aug 30 '19 at 16:19
Hi thank you for that i also read the documentation thanks! :D Big help! i do have a question now that i scaled it upto 500k, the on("mouseover") function doesn't work even when i add a class that we hovered change color – Carl Dennis Alingalan Aug 30 '19 at 16:21

Projecting topoJSON using D3 shows tiny

1 Answers1