click-events.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "11c4f3ef",
   "metadata": {},
   "source": [
    "#### Update Points Using a Click Callback"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "25f64ab0",
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.graph_objects as go\n",
    "\n",
    "import numpy as np\n",
    "np.random.seed(1)\n",
    "\n",
    "x = np.random.rand(100)\n",
    "y = np.random.rand(100)\n",
    "\n",
    "f = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])\n",
    "\n",
    "scatter = f.data[0]\n",
    "colors = ['#a3a7e4'] * 100\n",
    "scatter.marker.color = colors\n",
    "scatter.marker.size = [10] * 100\n",
    "f.layout.hovermode = 'closest'\n",
    "\n",
    "\n",
    "# create our callback function\n",
    "def update_point(trace, points, selector):\n",
    "    c = list(scatter.marker.color)\n",
    "    s = list(scatter.marker.size)\n",
    "    for i in points.point_inds:\n",
    "        c[i] = '#bae2be'\n",
    "        s[i] = 20\n",
    "        with f.batch_update():\n",
    "            scatter.marker.color = c\n",
    "            scatter.marker.size = s\n",
    "\n",
    "\n",
    "scatter.on_click(update_point)\n",
    "\n",
    "f"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e75682ab",
   "metadata": {},
   "source": [
    "<img src='https://raw.githubusercontent.com/michaelbabyn/plot_data/master/figurewidget-click-event.gif'>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "59adad8e",
   "metadata": {},
   "source": [
    "#### Reference"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6c7a9a8c",
   "metadata": {},
   "source": [
    "See [these Jupyter notebooks](https://github.com/jonmmease/plotly_ipywidget_notebooks) for even more FigureWidget examples."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9cefaf80",
   "metadata": {
    "lines_to_next_cell": 2
   },
   "outputs": [],
   "source": [
    "import plotly.graph_objects as go\n",
    "f = go.FigureWidget([go.Scatter()])\n",
    "help(f.data[0].on_click)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3b434c75",
   "metadata": {},
   "source": [
    "### What About Dash?\n",
    "\n",
    "[Dash](https://dash.plot.ly/) is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.\n",
    "\n",
    "Learn about how to install Dash at https://dash.plot.ly/installation.\n",
    "\n",
    "Everywhere in this page that you see `fig.show()`, you can display the same figure in a Dash application by passing it to the `figure` argument of the [`Graph` component](https://dash.plot.ly/dash-core-components/graph) from the built-in `dash_core_components` package like this:\n",
    "\n",
    "```python\n",
    "import plotly.graph_objects as go # or plotly.express as px\n",
    "fig = go.Figure() # or any Plotly Express function e.g. px.bar(...)\n",
    "# fig.add_trace( ... )\n",
    "# fig.update_layout( ... )\n",
    "\n",
    "from dash import Dash, dcc, html\n",
    "\n",
    "app = Dash()\n",
    "app.layout = html.Div([\n",
    "    dcc.Graph(figure=fig)\n",
    "])\n",
    "\n",
    "app.run_server(debug=True, use_reloader=False)  # Turn off reloader if inside Jupyter\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "jupytext": {
   "notebook_metadata_filter": "all"
  },
  "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.5"
  },
  "plotly": {
   "description": "Click Events With FigureWidget",
   "display_as": "chart_events",
   "language": "python",
   "layout": "base",
   "name": "Click Events",
   "order": 4,
   "page_type": "example_index",
   "permalink": "python/click-events/",
   "thumbnail": "thumbnail/figurewidget-click-events.gif"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}