[GIS] D3: center a map feature using correct latitude and longitude, without rotation

d3javascriptlatitude longitude

The following is a map of Chicago which I've created in D3.js, and the JS code to render it.

I had a very hard time centering Chicago within my viewfinder (the white box). After much trial and error, I was finally able to make it work, with the long/lat of [8.25, 41.88205] and a rotation of [92.35, .5, -4], using the Albers projection. This seems weird to me, since the long/lat of Chicago should be [87.627815, 41.88205].

So, my questions are: what is up with the 8.25 longitude? Why doesn't D3 center Chicago on my screen simply with the long/lat of [87.627815, 41.88205]? And why do I need to apply the rotation at all?

BTW, the community_areas_sm.geojson file comes off the City of Chicago website, and contains correct long/lat values.

<script>
var width = 600,
    height = 750

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)

var map = d3.json(
    "/static/data/community_areas_sm.geojson", function(error, map) {
        if (error) return console.error(error)

        var proj = d3.geo.albers()
            .center([8.25, 41.88205])
            .parallels([40, 45])
            .scale(105000)
            .rotate([92.35, .5, -4])
            .translate([width / 2, height / 2])

        svg.selectAll("path")
            .data(map.features)
            .enter().append("path")
            .attr("d", d3.geo.path().projection(proj))
        }
    )
</script>

Best Answer

Rotation is necessary because d3.geo.albers defaults to centering on the middle of the US (center and rotate are used in that block but they match the defaults).

I haven't seen a clear explanation of this in the d3 docs but here's what I've pieced together using d3.geo for various things: use rotate to spin the globe to your area of interest. Most of the time (all the time?) this means changing longitude only. The longitude sent to rotate should be the longitude you want to be the center of your map AKA the central meridian. After rotate, you can shift the center of your map in either direction but it's common to specify longitude as 0 (since your map is already where you want it in the x direction) and use latitude to shift your map's center north or south. You can see this in the Let's Make a Map tutorial.

As for the latitude of 8.25, I think that's getting the map back to Chicago after rotating in three directions ([92.35, .5, -4]). I don't know enough to give a mathematical explanation but that's my guess.

If you create your projection like so:

var proj = d3.geo.albers()
  .center([0, 41.83])
  .rotate([87.65, 0])
  .parallels([40, 45])
  .scale(30000)
  .translate([w / 2, h / 2])

you'll be centered on Chicago.

Related Solutions

Averaged Coordinates – How to Compute an Averaged Latitude and Longitude Coordinates

For a simple mean, you do not want to average the longitude and latitude coordinates. This might work pretty well at lower latitudes, but at higher latitudes it will begin to give poor results and completely break down near the poles.

The method I've used for this type of thing is to convert the longitude/latitude coordinates to 3d cartesian coordinates (x,y,z). Average these (to give a cartesian vector), and then convert back again. Note that you probably do not need to normalize the vector, so the actual average process could be a simple sum.

Edit, here is my c# code:

The following converts cartesian coordinates to latitude/longitude (in degrees): Remove the RAD2DEG constants for radians.

Latitude = MPUtility.RAD2DEG * Math.Atan2(z, Math.Sqrt(x * x + y * y));
Longitude = MPUtility.RAD2DEG * Math.Atan2(-y, x);

And here we calculate cartesian coordinates from latitude/longitude (specified in radians):

private void CalcCartesianCoord()
{
    _x = Math.Sin(LatitudeRadians) * Math.Cos(LongitudeRadians);
    _y = Math.Sin(LatitudeRadians) * Math.Sin(LongitudeRadians);
    _z = Math.Cos(LatitudeRadians); 
}

Both are cut & pasted from real code, hence the mix of degrees and radians. There are properties here which do some of the conversions (eg. LatitudeRadians is a property that returns a radian value).

Note that optimization is possible: the duplicate sine calculations, for instance. Also the trig calculations might be cacheable if you call them a lot.

[GIS] How to render latitude-longitude coordinates on a map with D3

You need to have a projection() function to project the lat and long of your points onto the map. By default, a d3 geo path uses the albersUsa projection, so you could declare it explicitly:

var projection = d3.geo.albersUsa();

You'll see this done in examples that don't use AlbersUsa, and by defining the projection you can modify it. Having it defined makes it available as a function. This way you could place your points as svg circles:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

That should drop a circle on the rough vicinity of New York. You could then bind data that had the "lat" and "long" as attributes, in which case it would look like this:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

The projection function takes [long,lat] array and returns a [x,y] array, which fits fine into transform,translate() syntax, or you could split the array for x and y values.

The example below places polys, lines and points, and takes the points from a csv and projects them onto a map, but notice that it transforms the g element and appends an a circle onto that element (you might also want a label or other aspects to a site, all of which would be appended to that projected g element):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/

Best Answer

Related Solutions

Averaged Coordinates – How to Compute an Averaged Latitude and Longitude Coordinates

[GIS] How to render latitude-longitude coordinates on a map with D3

Related Question