1

I am trying to display Pakistan map using d3js and topojson, but the size of map is very small and I am unable to increase its size.

URL of topojson: https://raw.githubusercontent.com/deldersveld/topojson/master/countries/pakistan/pakistan-provinces.json

I tried playing with the scale and translate but that didn't worked.

<meta charset="utf-8">

<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

</style>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">


<script>

var width = 960,
    height = 480;

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

var projection = d3.geo.equirectangular()
    .scale(153)

    .precision(.1);

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

d3.json("pak_map.json", function(error, topology) {
    if (error) throw error;

    svg.append("path")
      .datum(topojson.feature(topology, topology.objects.PAK_adm1))
      .attr("d", path)
      .attr("class", "land-boundary");
});

</script>

</body>
</html>
Inshal Saleem
  • 19
  • 3
  • have you tried changing scale and translation in your topojson? – curious_nustian Jun 28 '19 at 18:52
  • Yes, I have tried but unable to find right numbers – Inshal Saleem Jun 28 '19 at 18:53
  • The eaisest way would be to use projection.fitSize/fitExtent, but these methods are only include din v4+ (see [this block](https://bl.ocks.org/Andrew-Reid/6fb816f0a6ff75f83350431a06de2cdd) with your file). Otherwise you're limited to things like Mike's answer [here](https://stackoverflow.com/q/14492284/7106086). Ultimately, you are seeking to modify the scale of your projection (not the topojson) and center it either with projection.center() or projection.translate(). – Andrew Reid Jun 28 '19 at 21:06
  • As for why changing the projection scale alone won't work, this is a common problem: you aren't zooming in on the area of interest by default, just the center coordinate of the map - you could use `projection.scale(k).center([x,y])` where x,y are a longitude/latitude pair in the center of Pakistan and k is a value you tinker with by hand that you like - but the linked answer of Mike's will center your features automatically (via translation) with an appropriate scale. – Andrew Reid Jun 28 '19 at 21:12

0 Answers0