Animate JSON data

[fallenartist]

Hello. I'm loving your library!

I'm wondering if it would be possible to rotate through imported JSON data and show 10 or so random arcs at one time?

Also, is there a way of animating the dot at the arc's end when it hits the surface, similarly to the Github globe?

And finally, would it be possible to snap the coordinates of arcs and labels to the closest hex polygon center so both the hex polygon and the dot are aligned?

My example is here: https://codepen.io/znak/pen/vYJZoOY?editors=0010

Thank you.

[vasturiano]

@fallenartist thanks for reaching out.

I'm wondering if it would be possible to rotate through imported JSON data and show 10 or so random arcs at one time?

Yes, you can do this simply by manipulating the content of .arcsData(<data>) by periodically cycling through different data sets. The component will manage the addition and removal of elements according to your input.

There is an example here that has a similar functionality of adding/removing arcs on demand (on globe click in that case), by manipulating the input data set. Code is here.

Also, is there a way of animating the dot at the arc's end when it hits the surface, similarly to the Github globe?

The above example also makes use of the newly added rings layer which can be used to mimic a similar effect. Or you can use the points layer if you prefer a filled opaque circle. For either case, you just need to calibrate the timing of the circles with the arcs landing, similar to how it's done in the mentioned example.

And finally, would it be possible to snap the coordinates of arcs and labels to the closest hex polygon center so both the hex polygon and the dot are aligned?

There's not a specific functionality like that in the arcs/labels layer, but you can easily achieve this by doing the coordinate quantization yourself using h3, specifically the h3ToGeo function. That's the inner library that globe.gl uses for hex binning, and you should arrive at the same hex coordinate centers, if using the same resolution.

[fallenartist]

Thank you @vasturiano! I've managed to sort out data changes and can see the new rings layer but I'm having trouble with timing functions of the latter. How can I delay firing the rings with the below? Thanks again.

.ringColor(() => t => `rgba(0,0,255,${1-t})`)

https://codepen.io/znak/pen/vYJZoOY

[kqwq]

By coincidence I had the same question as @fallenartist this morning (how to make the arc end when it hits the surface). Thankyou!

[vasturiano]

@fallenartist by looking at your example, sounds like you've managed to get it already. 😄 In any case it's just a matter of setting the appropriate timers to add/remove data items on the rings layer, like in this example: https://github.com/vasturiano/globe.gl/blob/e7bfcc1408b97713d263838b6e8895d0514f64b5/example/emit-arcs-on-click/index.html#L48-L54

[fallenartist]

Hi @vasturiano, yes, I've managed to do it, thank you.

One last quibble — assigning fade function to label colour with .labelColor(() => t => 'rgba(0,0,255,${1-t})') doesn't seem to do anything. Is that by design?

[vasturiano]

One last quibble — assigning fade function to label colour with .labelColor(() => t => 'rgba(0,0,255,${1-t})') doesn't seem to do anything. Is that by design?

@fallenartist yes, the labels layer does not accept nor have the concept of color gradients. Thus, it expects only a single color, not an interpolator.