j1-template 2022.5.0.rc3 → 2022.5.1.rc0

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Interactions/Mark Interactions.ipynb

@@ -1,476 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from __future__ import print_function\n",
-    "from bqplot import *\n",
-    "import numpy as np\n",
-    "import pandas as pd\n",
-    "from ipywidgets import Layout, Dropdown, Button\n",
-    "from ipywidgets import Image as ImageIpy"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Scatter Chart"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "#### Scatter Chart Selections\n",
-    "\n",
-    "Click a point on the `Scatter` plot to select it. Now, run the cell below to check the selection. After you've done this, try holding the `ctrl` (or `command` key on Mac) and clicking another point. Clicking the background will reset the selection."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "x_sc = LinearScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "x_data = np.arange(20)\n",
-    "y_data = np.random.randn(20)\n",
-    "\n",
-    "scatter_chart = Scatter(\n",
-    "    x=x_data,\n",
-    "    y=y_data,\n",
-    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
-    "    colors=[\"dodgerblue\"],\n",
-    "    interactions={\"click\": \"select\"},\n",
-    "    selected_style={\"opacity\": 1.0, \"fill\": \"DarkOrange\", \"stroke\": \"Red\"},\n",
-    "    unselected_style={\"opacity\": 0.5},\n",
-    ")\n",
-    "\n",
-    "ax_x = Axis(scale=x_sc)\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "\n",
-    "Figure(marks=[scatter_chart], axes=[ax_x, ax_y])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "scatter_chart.selected"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Alternately, the `selected` attribute can be directly set on the Python side (try running the cell below):"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "scatter_chart.selected = [1, 2, 3]"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "#### Scatter Chart Interactions and Tooltips"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "scrolled": false
-   },
-   "outputs": [],
-   "source": [
-    "x_sc = LinearScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "x_data = np.arange(20)\n",
-    "y_data = np.random.randn(20)\n",
-    "\n",
-    "dd = Dropdown(options=[\"First\", \"Second\", \"Third\", \"Fourth\"])\n",
-    "scatter_chart = Scatter(\n",
-    "    x=x_data,\n",
-    "    y=y_data,\n",
-    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
-    "    colors=[\"dodgerblue\"],\n",
-    "    names=np.arange(100, 200),\n",
-    "    names_unique=False,\n",
-    "    display_names=False,\n",
-    "    display_legend=True,\n",
-    "    labels=[\"Blue\"],\n",
-    ")\n",
-    "ins = Button(icon=\"fa-legal\")\n",
-    "scatter_chart.tooltip = ins\n",
-    "line = Lines(x=x_data, y=y_data, scales={\"x\": x_sc, \"y\": y_sc}, colors=[\"dodgerblue\"])\n",
-    "scatter_chart2 = Scatter(\n",
-    "    x=x_data,\n",
-    "    y=np.random.randn(20),\n",
-    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
-    "    colors=[\"orangered\"],\n",
-    "    tooltip=dd,\n",
-    "    names=np.arange(100, 200),\n",
-    "    names_unique=False,\n",
-    "    display_names=False,\n",
-    "    display_legend=True,\n",
-    "    labels=[\"Red\"],\n",
-    ")\n",
-    "\n",
-    "ax_x = Axis(scale=x_sc)\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "\n",
-    "fig = Figure(marks=[scatter_chart, scatter_chart2, line], axes=[ax_x, ax_y])\n",
-    "fig"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "def print_event(self, target):\n",
-    "    print(target)\n",
-    "\n",
-    "\n",
-    "# Adding call back to scatter events\n",
-    "# print custom mssg on hover and background click of Blue Scatter\n",
-    "scatter_chart.on_hover(print_event)\n",
-    "scatter_chart.on_background_click(print_event)\n",
-    "\n",
-    "# print custom mssg on click of an element or legend of Red Scatter\n",
-    "scatter_chart2.on_element_click(print_event)\n",
-    "scatter_chart2.on_legend_click(print_event)\n",
-    "line.on_element_click(print_event)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Changing interaction from hover to click for tooltip\n",
-    "scatter_chart.interactions = {\"click\": \"tooltip\"}"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding figure as tooltip\n",
-    "x_sc = LinearScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "x_data = np.arange(10)\n",
-    "y_data = np.random.randn(10)\n",
-    "\n",
-    "lc = Lines(x=x_data, y=y_data, scales={\"x\": x_sc, \"y\": y_sc})\n",
-    "ax_x = Axis(scale=x_sc)\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "tooltip_fig = Figure(marks=[lc], axes=[ax_x, ax_y], layout=Layout(min_width=\"600px\"))\n",
-    "\n",
-    "scatter_chart.tooltip = tooltip_fig"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Image\n",
-    "\n",
-    "For images, `on_element_click` returns the location of the mouse click."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "i = ImageIpy.from_file(os.path.abspath(\"../data_files/trees.jpg\"))\n",
-    "bqi = Image(image=i, scales={\"x\": x_sc, \"y\": y_sc}, x=(0, 10), y=(-1, 1))\n",
-    "\n",
-    "fig_image = Figure(marks=[bqi], axes=[ax_x, ax_y])\n",
-    "fig_image"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "bqi.on_element_click(print_event)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Line Chart"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding default tooltip to Line Chart\n",
-    "x_sc = LinearScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "x_data = np.arange(100)\n",
-    "y_data = np.random.randn(3, 100)\n",
-    "\n",
-    "def_tt = Tooltip(\n",
-    "    fields=[\"name\", \"index\"], formats=[\"\", \".2f\"], labels=[\"id\", \"line_num\"]\n",
-    ")\n",
-    "line_chart = Lines(\n",
-    "    x=x_data,\n",
-    "    y=y_data,\n",
-    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
-    "    tooltip=def_tt,\n",
-    "    display_legend=True,\n",
-    "    labels=[\"line 1\", \"line 2\", \"line 3\"],\n",
-    ")\n",
-    "\n",
-    "ax_x = Axis(scale=x_sc)\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "\n",
-    "Figure(marks=[line_chart], axes=[ax_x, ax_y])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding call back to print event when legend or the line is clicked\n",
-    "line_chart.on_legend_click(print_event)\n",
-    "line_chart.on_element_click(print_event)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Bar Chart"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding interaction to select bar on click for Bar Chart\n",
-    "x_sc = OrdinalScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "x_data = np.arange(10)\n",
-    "y_data = np.random.randn(2, 10)\n",
-    "\n",
-    "bar_chart = Bars(\n",
-    "    x=x_data,\n",
-    "    y=[y_data[0, :].tolist(), y_data[1, :].tolist()],\n",
-    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
-    "    interactions={\"click\": \"select\"},\n",
-    "    selected_style={\"stroke\": \"orange\", \"fill\": \"red\"},\n",
-    "    labels=[\"Level 1\", \"Level 2\"],\n",
-    "    display_legend=True,\n",
-    ")\n",
-    "ax_x = Axis(scale=x_sc)\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "\n",
-    "Figure(marks=[bar_chart], axes=[ax_x, ax_y])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding a tooltip on hover in addition to select on click\n",
-    "def_tt = Tooltip(fields=[\"x\", \"y\"], formats=[\"\", \".2f\"])\n",
-    "bar_chart.tooltip = def_tt\n",
-    "bar_chart.interactions = {\n",
-    "    \"legend_hover\": \"highlight_axes\",\n",
-    "    \"hover\": \"tooltip\",\n",
-    "    \"click\": \"select\",\n",
-    "}"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Changing tooltip to be on click\n",
-    "bar_chart.interactions = {\"click\": \"tooltip\"}"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Call back on legend being clicked\n",
-    "bar_chart.type = \"grouped\"\n",
-    "bar_chart.on_legend_click(print_event)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Histogram"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Adding tooltip for Histogram\n",
-    "x_sc = LinearScale()\n",
-    "y_sc = LinearScale()\n",
-    "\n",
-    "sample_data = np.random.randn(100)\n",
-    "\n",
-    "def_tt = Tooltip(formats=[\"\", \".2f\"], fields=[\"count\", \"midpoint\"])\n",
-    "hist = Hist(\n",
-    "    sample=sample_data,\n",
-    "    scales={\"sample\": x_sc, \"count\": y_sc},\n",
-    "    tooltip=def_tt,\n",
-    "    display_legend=True,\n",
-    "    labels=[\"Test Hist\"],\n",
-    "    select_bars=True,\n",
-    ")\n",
-    "ax_x = Axis(scale=x_sc, tick_format=\"0.2f\")\n",
-    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
-    "\n",
-    "Figure(marks=[hist], axes=[ax_x, ax_y])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Changing tooltip to be displayed on click\n",
-    "hist.interactions = {\"click\": \"tooltip\"}"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Changing tooltip to be on click of legend\n",
-    "hist.interactions = {\"legend_click\": \"tooltip\"}"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {
-    "collapsed": true
-   },
-   "source": [
-    "## Pie Chart"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Set up a pie chart with click to show the tooltip."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "pie_data = np.abs(np.random.randn(10))\n",
-    "\n",
-    "sc = ColorScale(scheme=\"Reds\")\n",
-    "tooltip_widget = Tooltip(\n",
-    "    fields=[\"size\", \"index\", \"color\"], formats=[\"0.2f\", \"\", \"0.2f\"]\n",
-    ")\n",
-    "pie = Pie(\n",
-    "    sizes=pie_data,\n",
-    "    scales={\"color\": sc},\n",
-    "    color=np.random.randn(10),\n",
-    "    tooltip=tooltip_widget,\n",
-    "    interactions={\"click\": \"tooltip\"},\n",
-    "    selected_style={\"fill\": \"red\"},\n",
-    ")\n",
-    "\n",
-    "pie.selected_style = {\"opacity\": \"1\", \"stroke\": \"white\", \"stroke-width\": \"2\"}\n",
-    "pie.unselected_style = {\"opacity\": \"0.2\"}\n",
-    "\n",
-    "Figure(marks=[pie])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Changing interaction to select on click and tooltip on hover\n",
-    "pie.interactions = {\"click\": \"select\", \"hover\": \"tooltip\"}"
-   ]
-  }
- ],
- "metadata": {
-  "anaconda-cloud": {},
-  "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.7.6"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 2
-}