Drawing the tropics on a map

Community Help
1

Hi, I want to draw the tropics on a world map. This has turned out to be more tricky than I anticipated!

Because d3.geoPath will draw the shortest line between two points you can’t just specify a couple of points on the tropic and let it join them up. My fix has been to generate a whole bunch of points around each tropic and, at a zoomed out enough scale, it looks like the line goes straight which is fine for my immediate needs but it bugs me, is there a better way?

Here’s my minimal notebook example… Drawing the tropics on a D3 world map / Tom Pearson | Observable showing my solution (blue lines) and a lower res version of the same solution illustrating the issue I described with geoPath (red line)

Any pointers, suggestions or solution are welcome!

2

Not sure if it helps, but here’s how @neocarto’s geotoolbox defines the tropics as features:

1 Like
3

Due to D3’s spherical interpolation, adding many control points is the way to do it. In terms of code, you can use d3.geoCircle:

d3.geoCircle().center([0, 90]).radius(90 - 23.43656)(); // cancer
d3.geoCircle().center([0, 90]).radius(90 + 23.43656)(); // capricorn

To change the number of control points, see GitHub - d3/d3-geo: Geographic projections, spherical shapes and spherical trigonometry.

3 Likes
4

Thanks @Fil ! that’s perfect

5

Nice, lots of useful stuff there. Thankyou!

6

Exactly one year ago, I published a notebook in french with a small function geoline to generate any graticule with few options:

  • value => value in degree of the generated line.
  • direction => “latitude”, “lat” or “longitude”, “lon”.
  • precision => step between each coordinates in degree. Default 2.5
  • geojson => if true return a geojson of type LineString, if false return an array of coordinates.
1 Like