Basic Animation Example.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Import Plotly:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "from plotly.offline import init_notebook_mode, iplot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Enable offline mode:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window.Plotly) {{require(['plotly'],function(plotly) {window.Plotly=plotly;});}}</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Structure our data:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = [{'x': [0, 1], 'y': [0, 1]}]\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create layout:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [],
   "source": [
    "layout = {'xaxis': {'range': [0, 5], 'autorange': False},\n",
    "                    'yaxis': {'range': [0, 5], 'autorange': False},\n",
    "                    'title': 'Start Title',\n",
    "                    'updatemenus': [{'type': 'buttons',\n",
    "                                     'buttons': [{'label': 'Play',\n",
    "                                                  'method': 'animate',\n",
    "                                                  'args': [None]}]}]\n",
    "         }"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create frames:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [],
   "source": [
    "frames = [{'data': [{'x': [1, 2], 'y': [1, 2]}]},\n",
    "                     {'data': [{'x': [1, 4], 'y': [1, 4]}]},\n",
    "                     {'data': [{'x': [3, 4], 'y': [3, 4]}],\n",
    "                      'layout': {'title': 'End Title'}}]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "figure = {'data': data, 'layout': layout, 'frames': frames}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "data": [
        {
         "x": [
          0,
          1
         ],
         "y": [
          0,
          1
         ]
        }
       ],
       "frames": [
        {
         "data": [
          {
           "x": [
            1,
            2
           ],
           "y": [
            1,
            2
           ]
          }
         ]
        },
        {
         "data": [
          {
           "x": [
            1,
            4
           ],
           "y": [
            1,
            4
           ]
          }
         ]
        },
        {
         "data": [
          {
           "x": [
            3,
            4
           ],
           "y": [
            3,
            4
           ]
          }
         ],
         "layout": {
          "title": "End Title"
         }
        }
       ],
       "layout": {
        "title": "Start Title",
        "updatemenus": [
         {
          "buttons": [
           {
            "args": [
             null
            ],
            "label": "Play",
            "method": "animate"
           }
          ],
          "type": "buttons"
         }
        ],
        "xaxis": {
         "autorange": false,
         "range": [
          0,
          5
         ]
        },
        "yaxis": {
         "autorange": false,
         "range": [
          0,
          5
         ]
        }
       }
      },
      "text/html": [
       "<div id=\"d0967282-6d97-42ae-8668-f0f5bc9c5982\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";\n",
       "        Plotly.plot(\n",
       "            'd0967282-6d97-42ae-8668-f0f5bc9c5982',\n",
       "            [{\"x\": [0, 1], \"y\": [0, 1]}],\n",
       "            {\"xaxis\": {\"range\": [0, 5], \"autorange\": false}, \"yaxis\": {\"range\": [0, 5], \"autorange\": false}, \"title\": \"Start Title\", \"updatemenus\": [{\"type\": \"buttons\", \"buttons\": [{\"label\": \"Play\", \"method\": \"animate\", \"args\": [null]}]}]},\n",
       "            {\"showLink\": true, \"linkText\": \"Export to plot.ly\"}\n",
       "        ).then(function () {return Plotly.addFrames('d0967282-6d97-42ae-8668-f0f5bc9c5982',[{\"data\": [{\"x\": [1, 2], \"y\": [1, 2]}]}, {\"data\": [{\"x\": [1, 4], \"y\": [1, 4]}]}, {\"data\": [{\"x\": [3, 4], \"y\": [3, 4]}], \"layout\": {\"title\": \"End Title\"}}]);}).then(function(){Plotly.animate('d0967282-6d97-42ae-8668-f0f5bc9c5982');})\n",
       "        });</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"d0967282-6d97-42ae-8668-f0f5bc9c5982\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";\n",
       "        Plotly.plot(\n",
       "            'd0967282-6d97-42ae-8668-f0f5bc9c5982',\n",
       "            [{\"x\": [0, 1], \"y\": [0, 1]}],\n",
       "            {\"xaxis\": {\"range\": [0, 5], \"autorange\": false}, \"yaxis\": {\"range\": [0, 5], \"autorange\": false}, \"title\": \"Start Title\", \"updatemenus\": [{\"type\": \"buttons\", \"buttons\": [{\"label\": \"Play\", \"method\": \"animate\", \"args\": [null]}]}]},\n",
       "            {\"showLink\": true, \"linkText\": \"Export to plot.ly\"}\n",
       "        ).then(function () {return Plotly.addFrames('d0967282-6d97-42ae-8668-f0f5bc9c5982',[{\"data\": [{\"x\": [1, 2], \"y\": [1, 2]}]}, {\"data\": [{\"x\": [1, 4], \"y\": [1, 4]}]}, {\"data\": [{\"x\": [3, 4], \"y\": [3, 4]}], \"layout\": {\"title\": \"End Title\"}}]);}).then(function(){Plotly.animate('d0967282-6d97-42ae-8668-f0f5bc9c5982');})\n",
       "        });</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "iplot(figure)"
   ]
  }
 ],
 "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.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}