I’m looking for notebooks/examples of how to animate both a line and circle on a geo path (at variable speed), while using a scrubber? I’d like to recreate what I’ve done here Bear on the go / Mathew Brown / Observable but with a scrubber.
I’m making progress bear - scrubber / Mathew Brown / Observable but am having a hard time because while each segment of the line is just rendered (not animated) the circle animates along the path, so it’s a bit slower. Ideally, I’d like the path to also animate to the the set of coordinates.
I’m been using this example Arctic Sea Ice Volume and Extent / Mike Bostock / Observable but here the dot and line aren’t really animating, they are just rerendered. Since some of my points are far apart, it doesn’t work well for me.
Appreciate any help!
Here’s my go at it. I’m sure it could be improved but seems to work.
Looks great! Given the scenic environment, you might also want to consider this official Mapbox example:
This could potentially look really cool if you use the (just updated!) high resolution satellite imagery together with the 3d map.
Thanks! I had tried this approach Update a feature in realtime | Mapbox GL JS | Mapbox but I think because of the eratic movements of the bear, it was pretty jumpy. Perhaps if I slowed it down it would look better.
Good point! I really like how you can see the difference in “movement per day” with your current implementation.
For the fly-over camera thing it would probably be useful to have a steady camera speed so the bears movement would seem less jumpy. For that I guess you could re-arrange the data so you get the bears movements as a a single line string (I highly recommend using turf.js). Instead of the actual dates, the scrubber would then indicate the position of the bear along the line (0 = start, 1 = end). Given the scrubber’s value, you could calculate the bears position on the map using turf.js.
const totalDistance = turf.length(bearLineString)
const bearPosition = turf.along(bearLineString, scrubberValue * totalDistance)
const approxDateAtPosition = turf.nearestPointOnLine(bearLineString,bearPosition)?.properties?.date
Really just an idea, not sure whether this would actually be an improvement compared to the current implementation!
Interesting. Guess I don’t see how that would make the camera speed more steady… Wouldn’t the camera still move abruptly as the bear zig zags around? I’d really want to keep the movement per day feature… I suppose that should work with the method you’re proposing.
Will definitely have to check out turf!
Guess I don’t see how that would make the camera speed more steady… Wouldn’t the camera still move abruptly as the bear zig zags around?
Sorry for being unclear! What I meant is that instead of just using the actual recorded GPS positions of the bear, we could use turf’s
along method to interpolate between the points. Each keyframe in the animation would then correspond to an equal distance traveled by the bear. This way the camera, would move at a (relatively) steady speed.
While this makes the animation smoother, it makes it more difficult to see the difference in the bears movements per day.
I guess it’s really the question of what is more important / more interesting to show!
Here’s a fork of the notebook demonstrating what I meant with the “equal distance” movement. Let me know what you think!
That looks fantastic! I also really like the bear paw:) The one thing that makes me uneasy is that with this version the bear appears in a completely different spot on a given day, for example it’s position on Oct 8 in your version is where it was actually on Oct 14. As you suggest it’s a trade off. Yours looks cooler, but I think the original is more accurate… I do love how the camera moves though.
Haha glad you like it!
The one thing that makes me uneasy is that with this version the bear appears in a completely different spot on a given day, for example it’s position on Oct 8 in your version is where it was actually on Oct 14.
Sorry, that was due to an error with how I calculated the dates, this should be fixed now Still, you can’t see the “jumps” as easy as before, but then again it’s easier on the eye this way.
Unfortunately, initial load time is was quite slow due the way the date array is calculated now (check out the
dates cell). This could definitely be optimised, but for now I just attached a file with the “final” values (so it could be re-run if another bears path is uploaded).
Another thing I noticed (at least on Safari) is that the animation is sluggish on initial page load, but get’s back to normal when once I press pause/play