{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "## Animation widget\n", "\n", "The animation widget includes an animation status bar and controls to play or pause animated data. The `filter` property of your map's style, applied to either a date or numeric field, drives both the animation and the widget. Only **one** animation can be controlled per layer. To learn more about creating animations visit: [Animated visualizations](https://carto.com/developers/carto-vl/guides/animated-visualizations/). \n", "\n", "To see available parameters run `help(animation_widget)`.\n", "\n", "In the example below, collisions in Seattle are animated by the date they occured. " ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [], "source": [ "from cartoframes.auth import set_default_credentials\n", "\n", "set_default_credentials('cartoframes')" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", " None\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", "\n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", " Static map image\n", " \n", " \n", " \n", "\n", "\n", " \n", "
\n", "
\n", "
\n", " \n", " \n", "
\n", "
\n", " \n", "\n", " \n", "\n", "
\n", "
\n", " :\n", "
\n", " \n", " \n", "
\n", "
\n", "\n", "
\n", " StackTrace\n", "
    \n", "
    \n", "
    \n", "\n", "\n", "\n", "\n", "\n", "\">\n", "\n", "" ], "text/plain": [ "" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "from cartoframes.viz import Layer, animation_widget, animation_style\n", "\n", "Layer(\n", " 'seattle_collisions',\n", " style=animation_style('incdate', color='blue', duration=20),\n", " widgets=[\n", " animation_widget(\n", " title='Collision Date',\n", " description= 'Play, pause, or select the range of the animation'\n", " )]\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Using dates in a DataFrame\n", "\n", "When animating data from a DataFrame, the columns that need to be treated as **Dates** should be `datetime` format" ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [], "source": [ "import pandas as pd\n", "import geopandas\n", "\n", "data = {\n", " 'date_column': ['2019-11-10', '2019-11-11', '2019-11-12', '2019-11-13', '2019-11-14', '2019-11-15'],\n", " 'lon': [50, 40, 30, 50, 30, 40],\n", " 'lat': [0, 1, 2, 3, 2, 1]\n", "}\n", "\n", "df = pd.DataFrame(data)" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [], "source": [ "df['date_column']= pd.to_datetime(df['date_column'])" ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "\n", "\n", " None\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", "\n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "\n", "\n", " Static map image\n", " \n", " \n", " \n", "\n", "\n", " \n", "
    \n", "
    \n", "
    \n", " \n", " \n", "
    \n", "
    \n", "     \n", "\n", " \n", "\n", "
    \n", "
    \n", " :\n", "
    \n", " \n", " \n", "
    \n", "
    \n", "\n", "
    \n", " StackTrace\n", "
      \n", "
      \n", "
      \n", "\n", "\n", "\n", "\n", "\n", "\">\n", "\n", "" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "gdf = geopandas.GeoDataFrame(df, geometry=geopandas.points_from_xy(df.lon, df.lat))\n", "\n", "Layer(\n", " gdf,\n", " style=animation_style('date_column', color='blue', size=20, duration=20),\n", " widgets=animation_widget(title='November')\n", ")" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.6.7" } }, "nbformat": 4, "nbformat_minor": 2 }