diff --git a/docs/guides/08-animated-visualizations.md b/docs/guides/08-animated-visualizations.md index 9633599d3..c7cd39a27 100644 --- a/docs/guides/08-animated-visualizations.md +++ b/docs/guides/08-animated-visualizations.md @@ -11,7 +11,7 @@ With CARTO VL you can make animated maps of points, lines and polygons using the frameBorder="0"> - +You can explore this map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-7.html) ### Create a basic animation Before getting into the details, it is important to understand the general syntax for animating data in CARTO VL: @@ -42,6 +42,7 @@ const viz = new carto.Viz(` frameBorder="0"> +You can explore this map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-0.html) **Note:** If you are wondering about the points, this is an animation of the journey of three birds, from January to April of 2014. It is using data from [movebank.org](https://www.movebank.org/) and the *date_time* column represents the date of the bird track and its associated timestamp. You can check the code of the previous map to see how to configure this *bird_journey* as the `carto.source.Dataset` for the visualization. @@ -115,7 +116,7 @@ const viz = new carto.Viz(` frameBorder="0"> - +You can explore this map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-2.html) #### Adjust fade Since you are visualizing bird migration, the journey the birds took should be shown more clearly through symbology. You can get this added effect by adjusting the `fade` parameters. By setting `fadeIn` to `0` and `fadeOut` to `0.5`, the previous point from the journey is visible for longer in the animation which helps to better visualize the flight path of the migration journey. @@ -134,6 +135,7 @@ filter: animation($date_time, 30, fade(0, 0.5)) frameBorder="0"> +You can explore this map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-3.html) #### Final touches @@ -161,6 +163,7 @@ const viz = new carto.Viz(` frameBorder="0"> +You can explore the final map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-4.html) ### Animation controls @@ -185,7 +188,6 @@ The variables are now available in the `viz` object. If you want to access the a viz.variables.animation.play(); ``` - #### Add animation controls The next step is to add buttons and elements that allow you to control and interact with the animation. @@ -285,7 +287,7 @@ The `setInterval()` is a common method available at the browser, that calls a fu #### All together Well done! In the example below you will find the full code, including the animation controls. You can play with it and make adjustments. -Remember you can style your HTML controls using CSS. These styles are very simple, but at the beginning of this guide you have a complete example that includes beautiful styles. This example is also available in the [examples section](/developers/carto-vl/examples/#example-animation-controls). +Remember you can style your HTML controls using CSS. These styles are very simple, but at the beginning of this guide you have a complete example that includes beautiful styles. A similar example is available in the [examples section](/developers/carto-vl/examples/#example-animation-controls).
+You can explore this map [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-5.html) ```js const map = new mapboxgl.Map({ @@ -402,12 +405,12 @@ As you can see in the result, you are able to visualize, via color, where each b
-You can explore the final step [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-6.html) +You can explore the final step [here](/developers/carto-vl/examples/maps/guides/animated-viz/step-7.html)