I am trying to create an interactive map of Nepal in d3.js with a topojson file. I have been able to do so with the d3.geo.albers() projection. The code I used in given below.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.feature {
fill: #ccc;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.albers()
.center([86, 28])
.rotate([4.4, 0])
.parallels([27, 32]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data/nepal3.json", function(error, npl) {
var districts = topojson.feature(npl, npl.objects.nepal_districts);
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(districts),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][2]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][3] + b[0][4])) / 2];
projection
.scale(s)
.translate(t);
svg.append("path")
.datum(districts)
.attr("class", "feature")
.attr("d", path);
});
The map I get is not quite what I want. It is projected the wrong way than how the standard map of nepal looks like.
It looks like this, instead of the usual projection.
What am I doing wrong here? Are there any other projections more suitable for the co-ordinated of Nepal?
It looks like you've rotated the projection in the wrong direction, i.e. are looking at Nepal through the earth from the other side. It should work fine if you rotate it by 180 degrees, i.e.
.rotate([184.4,0])