j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Marks/Object Model/GridHeatMap.ipynb

@@ -0,0 +1,422 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from bqplot import ColorScale, GridHeatMap, Axis, Figure, OrdinalScale, LinearScale"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Get Data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "np.random.seed(0)\n",
+    "data = np.random.randn(10, 10)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Basic Heat map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "col_sc = ColorScale()\n",
+    "grid_map = GridHeatMap(color=data, scales={\"color\": col_sc})\n",
+    "\n",
+    "Figure(marks=[grid_map], padding_y=0.0)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "grid_map.display_format = \".2f\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "grid_map.font_style = {\"font-size\": \"12px\", \"fill\": \"black\", \"font-weight\": \"bold\"}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "grid_map.display_format = None"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Heat map with axes"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = OrdinalScale(), OrdinalScale(reverse=True), ColorScale()\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    color=data, scales={\"column\": x_sc, \"row\": y_sc, \"color\": col_sc}\n",
+    ")\n",
+    "ax_x, ax_y = Axis(scale=x_sc), Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "Figure(marks=[grid_map], axes=[ax_x, ax_y], padding_y=0.0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Non Uniform Heat map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "## The data along the rows is not uniform. Hence the 5th row(from top) of the map\n",
+    "## is twice the height of the remaining rows.\n",
+    "row_data = np.arange(10)\n",
+    "row_data[5:] = np.arange(6, 11)\n",
+    "\n",
+    "column_data = np.arange(10, 20)\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    row=row_data,\n",
+    "    column=column_data,\n",
+    "    color=data,\n",
+    "    scales={\"row\": y_sc, \"column\": x_sc, \"color\": col_sc},\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [],
+   "source": [
+    "print(row_data.shape)\n",
+    "print(column_data.shape)\n",
+    "print(data.shape)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Alignment of the data with respect to the grid"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "For a `N-by-N` matrix, `N+1` points along the row or the column are assumed to be end points."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "row_data = np.arange(11)\n",
+    "column_data = np.arange(10, 21)\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    row=row_data,\n",
+    "    column=column_data,\n",
+    "    color=data,\n",
+    "    scales={\"row\": y_sc, \"column\": x_sc, \"color\": col_sc},\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "By default, for `N` points along any dimension, data aligns to the `start` of the rectangles in the grid.\n",
+    "The grid extends infinitely in the other direction. By default, the grid extends infintely\n",
+    "towards the bottom and the right."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, max=15), ColorScale()\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "row_data = np.arange(10)\n",
+    "column_data = np.arange(10, 20)\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    row=row_data,\n",
+    "    column=column_data,\n",
+    "    color=data,\n",
+    "    scales={\"row\": y_sc, \"column\": x_sc, \"color\": col_sc},\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "By changing the `row_align` and `column_align` properties, the grid can extend in the opposite direction"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = (\n",
+    "    LinearScale(),\n",
+    "    LinearScale(reverse=True, min=-5, max=15),\n",
+    "    ColorScale(),\n",
+    ")\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "row_data = np.arange(10)\n",
+    "column_data = np.arange(10, 20)\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    row=row_data,\n",
+    "    column=column_data,\n",
+    "    color=data,\n",
+    "    scales={\"row\": y_sc, \"column\": x_sc, \"color\": col_sc},\n",
+    "    row_align=\"end\",\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "For `N+1` points on any direction, the grid extends infintely in both directions"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = (\n",
+    "    LinearScale(),\n",
+    "    LinearScale(reverse=True, min=-5, max=15),\n",
+    "    ColorScale(),\n",
+    ")\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "row_data = np.arange(9)\n",
+    "column_data = np.arange(10, 20)\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    row=row_data,\n",
+    "    column=column_data,\n",
+    "    color=data,\n",
+    "    scales={\"row\": y_sc, \"column\": x_sc, \"color\": col_sc},\n",
+    "    row_align=\"end\",\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Changing opacity and stroke"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "col_sc = ColorScale()\n",
+    "\n",
+    "grid_map = GridHeatMap(\n",
+    "    color=data, scales={\"color\": col_sc}, opacity=0.3, stroke=\"white\"\n",
+    ")\n",
+    "Figure(marks=[grid_map], padding_y=0.0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Selections on the grid map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Selection on the `GridHeatMap` works similar to excel. Clicking on a cell selects the cell, and deselects the previous selection. Using the `Ctrl` key allows multiple cells to be selected, while the `Shift` key selects the range from the last cell in the selection to the current cell."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = np.random.randn(10, 10)\n",
+    "\n",
+    "col_sc = ColorScale()\n",
+    "grid_map = GridHeatMap(\n",
+    "    color=data,\n",
+    "    scales={\"color\": col_sc},\n",
+    "    interactions={\"click\": \"select\"},\n",
+    "    selected_style={\"opacity\": \"1.0\"},\n",
+    "    unselected_style={\"opacity\": 0.4},\n",
+    ")\n",
+    "\n",
+    "Figure(marks=[grid_map], padding_y=0.0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `selected` trait of a `GridHeatMap` contains a list of lists, with each sub-list containing the row and column index of a selected cell."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "grid_map.selected"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Registering `on_element_click` event handler"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from IPython.display import display\n",
+    "from bqplot import *\n",
+    "\n",
+    "np.random.seed(0)\n",
+    "data = np.random.randn(10, 10)\n",
+    "col_sc = ColorScale()\n",
+    "grid_map = GridHeatMap(\n",
+    "    color=data,\n",
+    "    scales={\"color\": col_sc},\n",
+    "    interactions={\"click\": \"select\"},\n",
+    "    selected_style={\"stroke\": \"blue\", \"stroke-width\": 3},\n",
+    ")\n",
+    "figure = Figure(marks=[grid_map], padding_y=0.0)\n",
+    "\n",
+    "from ipywidgets import Output\n",
+    "\n",
+    "out = Output()\n",
+    "\n",
+    "\n",
+    "@out.capture()\n",
+    "def print_event(self, target):\n",
+    "    print(target)\n",
+    "\n",
+    "\n",
+    "# test\n",
+    "print_event(1, \"test output\")\n",
+    "grid_map.on_element_click(print_event)\n",
+    "\n",
+    "display(figure)\n",
+    "display(out)"
+   ]
+  }
+ ],
+ "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": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Marks/Object Model/HeatMap.ipynb

@@ -0,0 +1,157 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "collapsed": true
+   },
+   "source": [
+    "# Heatmap"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `HeatMap` mark represents a 2d matrix of values as a color image. It can be used to visualize a 2d function, or a grayscale image for instance.\n",
+    "\n",
+    "\n",
+    "`HeatMap` is very similar to the `GridHeatMap`, but should be preferred for a greater number of points (starting at around 100x100), to avoid overloading the browser. `GridHeatMap` offers more control (interactions, selections), and is better suited for a smaller number of points."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from bqplot import Figure, LinearScale, ColorScale, Color, Axis, HeatMap, ColorAxis\n",
+    "from ipywidgets import Layout"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Data Input\n",
+    "\n",
+    "- `x` is a 1d array, corresponding to the abscissas of the points (size N)\n",
+    "- `y` is a 1d array, corresponding to the ordinates of the points (size M)\n",
+    "- `color` is a 2d array, $\\text{color}_{ij}$ is the intensity of the point $(x_i, y_j)$ (size (N, M))\n",
+    "\n",
+    "Scales must be defined for each attribute:\n",
+    "- a `LinearScale`, `LogScale` or `OrdinalScale` for `x` and `y`\n",
+    "- a `ColorScale` for `color`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x = np.linspace(-5, 5, 200)\n",
+    "y = np.linspace(-5, 5, 200)\n",
+    "X, Y = np.meshgrid(x, y)\n",
+    "color = np.cos(X ** 2 + Y ** 2)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Plotting a 2-dimensional function\n",
+    "\n",
+    "This is a visualization of the function $f(x, y) = \\text{cos}(x^2+y^2)$"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc, y_sc, col_sc = LinearScale(), LinearScale(), ColorScale(scheme=\"RdYlBu\")\n",
+    "heat = HeatMap(x=x, y=y, color=color, scales={\"x\": x_sc, \"y\": y_sc, \"color\": col_sc})\n",
+    "ax_x = Axis(scale=x_sc)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "ax_c = ColorAxis(scale=col_sc)\n",
+    "fig = Figure(\n",
+    "    marks=[heat],\n",
+    "    axes=[ax_x, ax_y, ax_c],\n",
+    "    title=\"Cosine\",\n",
+    "    layout=Layout(width=\"650px\", height=\"650px\"),\n",
+    "    min_aspect_ratio=1,\n",
+    "    max_aspect_ratio=1,\n",
+    "    padding_y=0,\n",
+    ")\n",
+    "fig"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Displaying an image\n",
+    "\n",
+    "The `HeatMap` can be used as is to display a 2d grayscale image, by feeding the matrix of pixel intensities to the `color` attribute"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from scipy.misc import ascent\n",
+    "\n",
+    "Z = ascent()\n",
+    "Z = Z[::-1, :]\n",
+    "aspect_ratio = Z.shape[1] / Z.shape[0]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "col_sc = ColorScale(scheme=\"Greys\", reverse=True)\n",
+    "scales = {\"color\": col_sc}\n",
+    "ascent = HeatMap(color=Z, scales=scales)\n",
+    "img = Figure(\n",
+    "    title=\"Ascent\",\n",
+    "    marks=[ascent],\n",
+    "    layout=Layout(width=\"650px\", height=\"650px\"),\n",
+    "    min_aspect_ratio=aspect_ratio,\n",
+    "    max_aspect_ratio=aspect_ratio,\n",
+    "    padding_y=0,\n",
+    ")\n",
+    "img"
+   ]
+  }
+ ],
+ "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
+}