j1-template 2022.5.0.rc3 → 2022.5.1.rc0

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

@@ -1,422 +0,0 @@
-{
- "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

@@ -1,157 +0,0 @@
-{
- "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
-}