How do I render the most recent objects on top in a "cumulative" CartoDB Torque anima
I am attempting to create a Torque animation through the CartoDB Editor. I would like to show the cumulative state of the data as the animation progresses.
In some areas, the data is very dense (especially when zoomed out), yet I want to show that new data is still being added. Therefore I would like new markers to initially show up in one color (the “initial” color), and then after a frame or two of the animation, for them to show in a second color (the “final” color). The new markers (the ones showing up for the first time in the current frame of the animation) need to show up on top of the existing markers.
Attempt 1, entered the following in the CartoDB Editors “CSS” tab:
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:cumulative;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 1] {marker-fill: #87CEFF;} /* light blue – intended initial color */ [frame-offset = 2] {marker-fill: #0000FF;} /* dark blue – intended final color */ } [value = 2] { [frame-offset = 1] {marker-fill: #ffb6c1;} /* light red – intended initial color */ [frame-offset = 2] {marker-fill: #FF0000;} /* dark red – intended final color */ } }Result: lighter colors (the intended “initial” colors) only shows up “under” the darker “final” color markers. Hence the light color markers only show up if there is no other data yet in that area. Attempt 2: Same CartoCSS as in attempt 1, but I sorted my data with the following SQL: SELECT * FROM exportfixed_16 order by "timestamp" asc
Result: No change from above. Light color markers only show up “under” the dark color markers.
Attempt 3: Entered the following CartoCSS is the “CSS” tab in the CartoDB Editor:
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:cumulative;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 2] {marker-fill: #0000FF;} /*dark blue – intended final color */ [frame-offset = 1] {marker-fill: #87CEFF;} /* light blue – intended initial color */ } [value = 2] { [frame-offset = 2] {marker-fill: #FF0000;} /* dark red – intended final color */ [frame-offset = 1] {marker-fill: #ffb6c1;} /* light red – intended initial color */ } }Result: Dark colored markers never show, only light color markers show.
The following works, with the exception that is not cumulative (which I need). I attempted to simulate a cumulative effect by having as many [frame-offset] filters as there are total frames in the animation but Torque seems to limit the number of [frame-offset] filters to 32.
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:linear;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 8] {marker-fill: #0000FF;} [frame-offset = 7] {marker-fill: #0000FF;} [frame-offset = 6] {marker-fill: #0000FF;} [frame-offset = 5] {marker-fill: #0000FF;} [frame-offset = 4] {marker-fill: #0000FF;} [frame-offset = 3] {marker-fill: #0000FF;} [frame-offset = 2] {marker-fill: #0000FF;} [frame-offset = 1] {marker-fill: #87CEFF;} } [value = 2] { [frame-offset = 8] {marker-fill: #FF0000;} [frame-offset = 7] {marker-fill: #FF0000;} [frame-offset = 6] {marker-fill: #FF0000;} [frame-offset = 5] {marker-fill: #FF0000;} [frame-offset = 4] {marker-fill: #FF0000;} [frame-offset = 3] {marker-fill: #FF0000;} [frame-offset = 2] {marker-fill: #FF0000;} [frame-offset = 1] {marker-fill: #ffb6c1;} } }
أكثر...
I am attempting to create a Torque animation through the CartoDB Editor. I would like to show the cumulative state of the data as the animation progresses.
In some areas, the data is very dense (especially when zoomed out), yet I want to show that new data is still being added. Therefore I would like new markers to initially show up in one color (the “initial” color), and then after a frame or two of the animation, for them to show in a second color (the “final” color). The new markers (the ones showing up for the first time in the current frame of the animation) need to show up on top of the existing markers.
Attempt 1, entered the following in the CartoDB Editors “CSS” tab:
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:cumulative;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 1] {marker-fill: #87CEFF;} /* light blue – intended initial color */ [frame-offset = 2] {marker-fill: #0000FF;} /* dark blue – intended final color */ } [value = 2] { [frame-offset = 1] {marker-fill: #ffb6c1;} /* light red – intended initial color */ [frame-offset = 2] {marker-fill: #FF0000;} /* dark red – intended final color */ } }Result: lighter colors (the intended “initial” colors) only shows up “under” the darker “final” color markers. Hence the light color markers only show up if there is no other data yet in that area. Attempt 2: Same CartoCSS as in attempt 1, but I sorted my data with the following SQL: SELECT * FROM exportfixed_16 order by "timestamp" asc
Result: No change from above. Light color markers only show up “under” the dark color markers.
Attempt 3: Entered the following CartoCSS is the “CSS” tab in the CartoDB Editor:
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:cumulative;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 2] {marker-fill: #0000FF;} /*dark blue – intended final color */ [frame-offset = 1] {marker-fill: #87CEFF;} /* light blue – intended initial color */ } [value = 2] { [frame-offset = 2] {marker-fill: #FF0000;} /* dark red – intended final color */ [frame-offset = 1] {marker-fill: #ffb6c1;} /* light red – intended initial color */ } }Result: Dark colored markers never show, only light color markers show.
The following works, with the exception that is not cumulative (which I need). I attempted to simulate a cumulative effect by having as many [frame-offset] filters as there are total frames in the animation but Torque seems to limit the number of [frame-offset] filters to 32.
Map {-torque-frame-count:256;-torque-animation-duration:30;-torque-time-attribute:"timestamp";-torque-aggregation-function:"max(usernumber)";-torque-resolution:2;-torque-data-aggregation:linear;}#exportfixed_16 { comp-op: src-over; marker-width:10; marker-fill-opacity:1; marker-line-width: 0; marker-type: ellipse; marker-width: 8; [value = 1] { [frame-offset = 8] {marker-fill: #0000FF;} [frame-offset = 7] {marker-fill: #0000FF;} [frame-offset = 6] {marker-fill: #0000FF;} [frame-offset = 5] {marker-fill: #0000FF;} [frame-offset = 4] {marker-fill: #0000FF;} [frame-offset = 3] {marker-fill: #0000FF;} [frame-offset = 2] {marker-fill: #0000FF;} [frame-offset = 1] {marker-fill: #87CEFF;} } [value = 2] { [frame-offset = 8] {marker-fill: #FF0000;} [frame-offset = 7] {marker-fill: #FF0000;} [frame-offset = 6] {marker-fill: #FF0000;} [frame-offset = 5] {marker-fill: #FF0000;} [frame-offset = 4] {marker-fill: #FF0000;} [frame-offset = 3] {marker-fill: #FF0000;} [frame-offset = 2] {marker-fill: #FF0000;} [frame-offset = 1] {marker-fill: #ffb6c1;} } }
أكثر...