dropdown_ex.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "        <script type=\"text/javascript\">\n",
       "        window.PlotlyConfig = {MathJaxConfig: 'local'};\n",
       "        if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}\n",
       "        if (typeof require !== 'undefined') {\n",
       "        require.undef(\"plotly\");\n",
       "        requirejs.config({\n",
       "            paths: {\n",
       "                'plotly': ['https://cdn.plot.ly/plotly-latest.min']\n",
       "            }\n",
       "        });\n",
       "        require(['plotly'], function(Plotly) {\n",
       "            window._Plotly = Plotly;\n",
       "        });\n",
       "        }\n",
       "        </script>\n",
       "        "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "c:\\program files\\python36\\lib\\site-packages\\plotly\\graph_objs\\_deprecations.py:372: DeprecationWarning:\n",
      "\n",
      "plotly.graph_objs.Line is deprecated.\n",
      "Please replace it with one of the following more specific types\n",
      "  - plotly.graph_objs.scatter.Line\n",
      "  - plotly.graph_objs.layout.shape.Line\n",
      "  - etc.\n",
      "\n",
      "\n",
      "c:\\program files\\python36\\lib\\site-packages\\plotly\\graph_objs\\_deprecations.py:39: DeprecationWarning:\n",
      "\n",
      "plotly.graph_objs.Data is deprecated.\n",
      "Please replace it with a list or tuple of instances of the following types\n",
      "  - plotly.graph_objs.Scatter\n",
      "  - plotly.graph_objs.Bar\n",
      "  - plotly.graph_objs.Area\n",
      "  - plotly.graph_objs.Histogram\n",
      "  - etc.\n",
      "\n",
      "\n"
     ]
    },
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": false
       },
       "data": [
        {
         "line": {
          "color": "#FFD700",
          "width": 3
         },
         "name": "Gold",
         "type": "scatter",
         "uid": "47cda675-0f40-4464-8f10-eb72b9368dcf",
         "x": [
          "United States",
          "China",
          "South Korea",
          "Hungary",
          "Austraila",
          "Canada"
         ],
         "y": [
          10,
          8,
          4,
          4,
          4,
          0
         ]
        },
        {
         "line": {
          "color": "#C0C0C0",
          "width": 3
         },
         "name": "Silver",
         "type": "scatter",
         "uid": "bd00d43b-0ca6-447b-86b7-cf3d10c828eb",
         "visible": false,
         "x": [
          "United States",
          "China",
          "South Korea",
          "Hungary",
          "Austraila",
          "Canada"
         ],
         "y": [
          8,
          3,
          2,
          1,
          0,
          1
         ]
        },
        {
         "line": {
          "color": "#BA8651",
          "width": 3
         },
         "name": "Bronze",
         "type": "scatter",
         "uid": "69c434fa-a3a1-4bb6-8b8a-c4b53bcc2cdf",
         "visible": false,
         "x": [
          "United States",
          "China",
          "South Korea",
          "Hungary",
          "Austraila",
          "Canada"
         ],
         "y": [
          9,
          6,
          1,
          1,
          5,
          4
         ]
        },
        {
         "line": {
          "color": "#000000",
          "width": 4
         },
         "name": "Total",
         "type": "scatter",
         "uid": "e3b50638-1dde-42a1-bb94-fba1ca05172d",
         "visible": false,
         "x": [
          "United States",
          "China",
          "South Korea",
          "Hungary",
          "Austraila",
          "Canada"
         ],
         "y": [
          27,
          17,
          7,
          6,
          9,
          5
         ]
        }
       ],
       "layout": {
        "title": {
         "text": "2016 Summer Olympic Medal Count"
        },
        "updatemenus": [
         {
          "buttons": [
           {
            "args": [
             "visible",
             [
              true,
              false,
              false,
              false
             ]
            ],
            "label": "Gold",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              true,
              false,
              false
             ]
            ],
            "label": "Silver",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              false,
              true,
              false
             ]
            ],
            "label": "Bronze",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              false,
              false,
              true
             ]
            ],
            "label": "Total",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              true,
              true,
              true,
              true
             ]
            ],
            "label": "All",
            "method": "restyle"
           }
          ],
          "x": -0.05,
          "y": 1,
          "yanchor": "top"
         }
        ]
       }
      },
      "text/html": [
       "<div>\n",
       "        \n",
       "        \n",
       "            <div id=\"45c7dae4-2d23-451e-b785-ccc00ee3e003\" class=\"plotly-graph-div\" style=\"height:525px; width:100%;\"></div>\n",
       "            <script type=\"text/javascript\">\n",
       "                require([\"plotly\"], function(Plotly) {\n",
       "                    window.PLOTLYENV=window.PLOTLYENV || {};\n",
       "                    window.PLOTLYENV.BASE_URL='https://plot.ly';\n",
       "                    \n",
       "                if (document.getElementById(\"45c7dae4-2d23-451e-b785-ccc00ee3e003\")) {\n",
       "                    Plotly.newPlot(\n",
       "                        '45c7dae4-2d23-451e-b785-ccc00ee3e003',\n",
       "                        [{\"line\": {\"color\": \"#FFD700\", \"width\": 3}, \"name\": \"Gold\", \"type\": \"scatter\", \"uid\": \"47cda675-0f40-4464-8f10-eb72b9368dcf\", \"x\": [\"United States\", \"China\", \"South Korea\", \"Hungary\", \"Austraila\", \"Canada\"], \"y\": [10, 8, 4, 4, 4, 0]}, {\"line\": {\"color\": \"#C0C0C0\", \"width\": 3}, \"name\": \"Silver\", \"type\": \"scatter\", \"uid\": \"bd00d43b-0ca6-447b-86b7-cf3d10c828eb\", \"visible\": false, \"x\": [\"United States\", \"China\", \"South Korea\", \"Hungary\", \"Austraila\", \"Canada\"], \"y\": [8, 3, 2, 1, 0, 1]}, {\"line\": {\"color\": \"#BA8651\", \"width\": 3}, \"name\": \"Bronze\", \"type\": \"scatter\", \"uid\": \"69c434fa-a3a1-4bb6-8b8a-c4b53bcc2cdf\", \"visible\": false, \"x\": [\"United States\", \"China\", \"South Korea\", \"Hungary\", \"Austraila\", \"Canada\"], \"y\": [9, 6, 1, 1, 5, 4]}, {\"line\": {\"color\": \"#000000\", \"width\": 4}, \"name\": \"Total\", \"type\": \"scatter\", \"uid\": \"e3b50638-1dde-42a1-bb94-fba1ca05172d\", \"visible\": false, \"x\": [\"United States\", \"China\", \"South Korea\", \"Hungary\", \"Austraila\", \"Canada\"], \"y\": [27, 17, 7, 6, 9, 5]}],\n",
       "                        {\"title\": {\"text\": \"2016 Summer Olympic Medal Count\"}, \"updatemenus\": [{\"buttons\": [{\"args\": [\"visible\", [true, false, false, false]], \"label\": \"Gold\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, true, false, false]], \"label\": \"Silver\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, false, true, false]], \"label\": \"Bronze\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, false, false, true]], \"label\": \"Total\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [true, true, true, true]], \"label\": \"All\", \"method\": \"restyle\"}], \"x\": -0.05, \"y\": 1, \"yanchor\": \"top\"}]},\n",
       "                        {\"showLink\": false, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\", \"responsive\": true}\n",
       "                    ).then(function(){\n",
       "                            \n",
       "var gd = document.getElementById('45c7dae4-2d23-451e-b785-ccc00ee3e003');\n",
       "var x = new MutationObserver(function (mutations, observer) {{\n",
       "        var display = window.getComputedStyle(gd).display;\n",
       "        if (!display || display === 'none') {{\n",
       "            console.log([gd, 'removed!']);\n",
       "            Plotly.purge(gd);\n",
       "            observer.disconnect();\n",
       "        }}\n",
       "}});\n",
       "\n",
       "// Listen for the removal of the full notebook cells\n",
       "var notebookContainer = gd.closest('#notebook-container');\n",
       "if (notebookContainer) {{\n",
       "    x.observe(notebookContainer, {childList: true});\n",
       "}}\n",
       "\n",
       "// Listen for the clearing of the current output cell\n",
       "var outputEl = gd.closest('.output');\n",
       "if (outputEl) {{\n",
       "    x.observe(outputEl, {childList: true});\n",
       "}}\n",
       "\n",
       "                        })\n",
       "                };\n",
       "                });\n",
       "            </script>\n",
       "        </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "import os\n",
    "import plotly.graph_objs as go\n",
    "import plotly.io as pio\n",
    "import plotly.plotly as py\n",
    "import plotly.figure_factory as ff\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from  plotly.offline import plot\n",
    "import plotly\n",
    "from IPython.display import SVG, display\n",
    "from IPython.display import Image\n",
    "from IPython.display import display, Math, Latex\n",
    "import colorlover as cl\n",
    "from IPython.display import HTML\n",
    "from IPython.display import IFrame\n",
    "from plotly.offline import iplot, init_notebook_mode\n",
    "from IPython.display import YouTubeVideo\n",
    "init_notebook_mode(connected=True)\n",
    "import plotly.plotly as py\n",
    "from plotly.graph_objs import *\n",
    "\n",
    "countries = ['United States', 'China', 'South Korea', 'Hungary', 'Austraila', 'Canada']\n",
    "gold = [10, 8, 4, 4, 4, 0]\n",
    "silver = [8, 3, 2, 1, 0, 1]\n",
    "bronze = [9, 6, 1, 1, 5, 4]\n",
    "total = [27, 17, 7, 6, 9, 5]\n",
    "\n",
    "trace1 = Scatter(\n",
    "    x=countries, y=gold,\n",
    "    line=Line(\n",
    "        color='#FFD700',\n",
    "        width=3\n",
    "    ),\n",
    "    name='Gold'\n",
    ")\n",
    "\n",
    "trace2 = Scatter(\n",
    "    x=countries, y=silver,\n",
    "    visible=False,\n",
    "    line=Line(\n",
    "        color='#C0C0C0',\n",
    "        width=3\n",
    "    ),\n",
    "    name='Silver'\n",
    ")\n",
    "\n",
    "trace3 = Scatter(\n",
    "    x=countries, y=bronze,\n",
    "    visible=False,\n",
    "    line=Line(\n",
    "        color='#BA8651',\n",
    "        width=3\n",
    "    ),\n",
    "    name='Bronze'\n",
    ")\n",
    "\n",
    "trace4 = Scatter(\n",
    "    x=countries, y=total,\n",
    "    visible=False,\n",
    "    line=Line(\n",
    "        color='#000000',\n",
    "        width=4\n",
    "    ),\n",
    "    name='Total'\n",
    ")\n",
    "\n",
    "data = Data([trace1, trace2, trace3, trace4])\n",
    "layout = Layout(\n",
    "    title='2016 Summer Olympic Medal Count',\n",
    "    updatemenus=list([\n",
    "        dict(\n",
    "            x=-0.05,\n",
    "            y=1,\n",
    "            yanchor='top',\n",
    "            buttons=list([\n",
    "                dict(\n",
    "                    args=['visible', [True, False, False, False]],\n",
    "                    label='Gold',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, True, False, False]],\n",
    "                    label='Silver',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, True, False]],\n",
    "                    label='Bronze',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, False, True]],\n",
    "                    label='Total',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [True, True, True, True]],\n",
    "                    label='All',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "            ]),\n",
    "        )\n",
    "    ]),\n",
    ")\n",
    "fig = Figure(data=data, layout=layout)\n",
    "iplot(fig, filename='dropdown_ex')\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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
}