# Drawing the tropics on a map

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!

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

1 Like

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

Thanks @Fil ! that’s perfect

Nice, lots of useful stuff there. Thankyou!

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