Kepler.gl: Add traffic animation layer

[heshan0131]

Description

Deck.gl trip layer is probably the most popular layer so far. To support trip animation in kepler.gl, we will add a trip layer into it and allow customize animation.

• Add trip animation layer to animate paths from a sequence of points

• Need to specify latitude, longitude, group by (id, uuid) and the timestamp column

• Add a slider to adjust the tail length, add color by option

• Automatically display a time playback slider when a trip layer is created

Implementation Plan

1. Data format

• __GeoJSON__
  Trips data should be formatted as Geojson feature collection, each as a LineString. There are 2 ways time can be embeded for animation:
  
  
  
  1. Add a 4th element to LineString coordinates, formatted as epoch seconds. Each point coordinate should be as [longitude, latitude, altitude, timgstamp].
  
  
  2. Specify start_time and end_time in feature properties, and assign them in trip layer config. If only provide start time and end time, the animation will be in a constant speed.
  
  

{
 "type": "Feature",
 "properties": {
    “start_time”: “2019-06-10 17:00”,
    “end_time”: “2019-06-10 19:00”,
    “trip_uuid”: “928-19283-129”
 },
"geometry": {
  "type": "LineString",
  "coordinates": [
    [-122.48369693756104, 37.83381888486939, 0, 1562701757],
    [-122.49223709106445, 37.83337825839438, 0, 1562701758],
    [-122.49378204345702, 37.83368330777276, 0, 1562701790]
  ]
 }
}

• __CSV__
  Gps points contained in csv from lat lng column can be used to create path by adding the group by (uuid, id, name, etc) and sort by (time, index, etc) option. Once a collection of path is created, it can be used to create trip layer.

2. Layer config

Trip layer should have the following configuration items:

• Basic
  
  
  
  • Select geometry column (required)
  
  
  • Select start time column (optional)
  
  
  • Select end time column (optional)
  
  
• Info
  
  
  
  • A How-to button (see icon layer)
  
  
  • Display instruction in a modal dialog to explain how trip layer works
  
  

• Color

  • Select a single color
  • Or allow color based on to the selected color range and color scale

• Animation control

  • Aniamtion control should be shown at the bottom of the map where the time span filter is
  • Animation control should allow adjust animation speed

• Tail length

  • A slider to control tail length

[ohld]

Any updates on this?

[heshan0131]

@yanhann10 will start to work on this starting today, estimated delivery would be mid August

[6156450]

very cool

[ohld]

@heshan0131 !

What is the probability of finishing that task in the current sprint? Really want to test it out in
kepler.gl/demo

Thanks

[laurids-reichardt]

Thanks @heshan0131 for the awesome work you're doing! For one of my projects, I would like to visualize bicycle traffic flowing through a city. The trip animation layer would be perfect for that use case. Can't wait till it lands in kepler.gl.

[heshan0131]

Target release date would be end of next week

[laurids-reichardt]

Love the current implementation of the trip layer so far! Noticed a small glitch: below the trail length slider a black closing parentheses is rendered.

[laurids-reichardt]

Do you have an aprox. ETA for when the trip layer implementation will land in master?

[laurids-reichardt]

Sorry to bother again. Will the trips layer be merged into master in the near future? How far along is the development. I love kepler.gl and with the addition of a trips layer it would be a great fit for my project. Thanks so much for all your work!

[heshan0131]

Thanks for your patience, I have some aesthetics to fix, will aim to land this by earlier next week!

[ivarmartin]

Hi! Is this feature currently working on the kepler.gl demo site? I'm trying to visualize a trip by using your json schema from above, but after uploading the geojson as a dataset and trying to create a new trip layer the demo site simply goes blank (white screen).

[will-locsci]

Coolest layer of the bunch, was wondering if csv data format is fully implemented? The current demo is showing to add data in below example format only:

Example:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "device":  "A",
      "vol":20},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-74.20986, 40.81773, 0, 1564184363],
          [-74.20987, 40.81765, 0, 1564184396],
          [-74.20998, 40.81746, 0, 1564184409]
        ]
      }
    }
  ]
}

[daizero37]

I have a data set which ranges between nearly a month.
The animation is awfully fast even if I slow the speed down to 0.01.
If I change the speed to 0.001, it becomes zero.
Is there any way that I can input the whole data as welll as getting a nice effect on animation?

第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！
triptest1.txt

[heshan0131]

Can you try this https://deploy-preview-1155--keplergl.netlify.app/demo?

Lowered the speed slider threshold to 0.001. Will land it later if it works

On Wed, Jun 17, 2020 at 12:49 AM daizero37 [e-mail] wrote:

I have a data set which ranges between nearly a month.
The animation is awfully fast even if I slow the speed down to 0.01.
If I change the speed to 0.001, it becomes zero.
Is there any way that I can input the whole data as welll as getting a
nice effect on animation?

第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/keplergl/kepler.gl/issues/397#issuecomment-645213181,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AA3QINHHMNANHA2GTPZ6K2TRXBYPTANCNFSM4G2XJCIQ
.

[daizero37]

Can you try this demo? Lowered the speed slider threshold to 0.001. Will land it later if it works
…
On Wed, Jun 17, 2020 at 12:49 AM daizero37 @.*> wrote: I have a data set which ranges between nearly a month. The animation is awfully fast even if I slow the speed down to 0.01. If I change the speed to 0.001, it becomes zero. Is there any way that I can input the whole data as welll as getting a nice effect on animation? 第一次用Git，看这个帖子你也好久不回了，还是希望能和您联系上，多谢！ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#397 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3QINHHMNANHA2GTPZ6K2TRXBYPTANCNFSM4G2XJCIQ .

The animation is slowed down, but it is still strange in that there are multiple trips especially when the stroke width is broad. My data only contains 1 trip and all the coordiantes are lined up ordered by timestamp. I think it should be like my test data, but it doesn't work.
I've attached my data(triptest4) and my test data(triptest1) below.
Thanks for your reply!

triptest4.txt
triptest1.txt

[daizero37]

Hello, Shan.
Would you please check my data above? :)