Search code examples
d3.jsmapsgeojson

Get a geosjon band based on a random point and a random angle

I'm trying to do some kind of rubber band ball in d3, I thought it was going to be easy because I remember seeing Jason Davies example (the 2nd one at the top) but it looks like it was more complex actually.

Jason's example for a vertical band is quite straightfoward:

let band = [2, -2].map((d, i) => {
    let stripe = d3.range(-180, 180).map((x) => [x, d])
    stripe.push(stripe[0])
    return i ? stripe.reverse() : stripe
})

So I starting by making a vertical band like this:

let band = [2, -2].map((d, i) => {
    let stripe = d3.range(-90, 90).map((y) => [d, y])
    stripe.push(stripe[0])
    return i ? stripe.reverse() : stripe
})

But instead, I get this weird shape that closes on each pole (it's supposed to be filled too, not stroked):

globe

My end goal would be to simply specify a point, an angle and a width (4 in my example) and it would return the coordinates necessary to draw a band around the globe.

Thanks.

Solution

  • So it was a fairly simple problem because of d3. I used d3.geo.circle with an angle of 90° (default) and a random point, so:

    let circle = d3.geo.circle()
    .origin(coords)()

    Since d3.geo.circle returns a polygon, I needed to edit it's properties:

    circle.type = 'LineString'
circle.coordinates = circle.coordinates[0]

    Here's the final result:

    globes