j1-template 2022.5.0.rc0 → 2022.5.0.rc3

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

@@ -0,0 +1,480 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from bqplot import (\n",
+    "    OrdinalScale,\n",
+    "    LinearScale,\n",
+    "    Bars,\n",
+    "    Figure,\n",
+    "    Axis,\n",
+    "    ColorScale,\n",
+    "    ColorAxis,\n",
+    "    CATEGORY10,\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "size = 100\n",
+    "np.random.seed(0)\n",
+    "\n",
+    "x_data = range(size)\n",
+    "y_data = np.random.randn(size)\n",
+    "y_data_2 = np.random.randn(size)\n",
+    "y_data_3 = np.cumsum(np.random.randn(size) * 100.0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Basic Bar Chart"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(x=np.arange(10), y=np.random.rand(10), scales={\"x\": x_ord, \"y\": y_sc})\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, tick_format=\"0.2f\", orientation=\"vertical\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y], padding_x=0.025, padding_y=0.025)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Horizontal Bar Chart"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "To generate a horizontal bar chart, pass `orientation='horizontal'` to the bar."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=np.arange(10),\n",
+    "    y=np.arange(-5, 5),\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc},\n",
+    "    orientation=\"horizontal\",\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord, orientation=\"vertical\")\n",
+    "ax_y = Axis(scale=y_sc, tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y], padding_x=0.025, padding_y=0.025)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Changing the reference value from which the Bars are drawn"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_ord = LinearScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data[:20], y=np.abs(y_data_2[:20]), scales={\"x\": x_ord, \"y\": y_sc}, base=1.0\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# changing the base\n",
+    "bar.base = 2.0"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.align = \"right\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Bar Chart Properties"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Increasing the spacing between the bars\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(x=x_data[:20], y=y_data[:20], scales={\"x\": x_ord, \"y\": y_sc}, padding=0.2)\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# add bar labels\n",
+    "bar.label_display = True\n",
+    "bar.label_display_format = \".1f\"\n",
+    "bar.label_font_style = {\"fill\": \"pink\", \"font-size\": \"10px\"}"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# changing basic properties like stroke and opacity\n",
+    "bar.stroke = \"orange\"\n",
+    "bar.opacities = [0.5, 0.2]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.orientation = \"horizontal\"\n",
+    "ax_x.orientation = \"vertical\"\n",
+    "ax_y.orientation = \"horizontal\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Stacked Bar Chart for 2-d data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=[y_data[:20], y_data_2[:20]],\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc},\n",
+    "    padding=0.2,\n",
+    "    colors=CATEGORY10,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Grouped Bar Chart"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.type = \"grouped\"  # equivalent to saying\n",
+    "# bar = Bars(x=x_data, y=y_data, scales={'x': x_ord, 'y': y_sc}, padding=0.2, type='grouped')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=[y_data[:20], y_data_2[:20]],\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc},\n",
+    "    padding=0.2,\n",
+    "    colors=CATEGORY10,\n",
+    "    type=\"stacked\",\n",
+    "    orientation=\"horizontal\",\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord, orientation=\"vertical\")\n",
+    "ax_y = Axis(scale=y_sc, tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.type = \"grouped\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Modifying color mode"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "## Color mode has 3 values. 'group', 'element' and 'no_group'.\n",
+    "## 'group' means colors are assigned per group.\n",
+    "## 'element' means colors are assigned per group element.\n",
+    "## 'no_group' means means colors are assigned per bar, discarding the fact that there are groups or stacks\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=[y_data[:20], y_data_2[:20]],\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc},\n",
+    "    padding=0.2,\n",
+    "    colors=CATEGORY10,\n",
+    "    color_mode=\"group\",\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.color_mode = \"element\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "bar.color_mode = \"no_group\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "## for 1-d array for Y.\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=y_data[:20],\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc},\n",
+    "    padding=0.2,\n",
+    "    color_mode=\"element\",\n",
+    "    labels=[\"Values\"],\n",
+    "    display_legend=True,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "collapsed": true
+   },
+   "source": [
+    "## Representing additional dimension using Color"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# In this example, the color is just the magnitude of the y data\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "col_sc = ColorScale(scheme=\"Reds\")\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data[:20],\n",
+    "    y=y_data[:20],\n",
+    "    color=np.abs(y_data[:20]),\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc, \"color\": col_sc},\n",
+    "    padding=0.2,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "ax_c = ColorAxis(scale=col_sc, tick_format=\"0.2f\")\n",
+    "\n",
+    "margin = dict(top=50, bottom=80, left=50, right=50)\n",
+    "\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y, ax_c], fig_margin=margin)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Adding color for 2-d data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# By default color is applied along the axis=1\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "col_sc = ColorScale(scheme=\"Reds\")\n",
+    "\n",
+    "y_vals = [y_data[:20], y_data_2[:20], y_data_3[:20] / 100.0]\n",
+    "color_data = np.mean(y_vals, axis=1)\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=y_vals,\n",
+    "    color=color_data,\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc, \"color\": col_sc},\n",
+    "    padding=0.2,\n",
+    "    labels=[\"Dim 1\", \"Dim 2\", \"Dim 3\"],\n",
+    "    display_legend=True,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "ax_c = ColorAxis(scale=col_sc, tick_format=\"0.2f\")\n",
+    "\n",
+    "margin = dict(top=50, bottom=80, left=50, right=50)\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y, ax_c], fig_margin=margin)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Applying color along the axis=0\n",
+    "x_ord = OrdinalScale()\n",
+    "y_sc = LinearScale()\n",
+    "col_sc = ColorScale(mid=0.0)\n",
+    "\n",
+    "y_vals = [y_data[:20], y_data_2[:20], y_data_3[:20] / 100.0]\n",
+    "color_data = np.mean(y_vals, axis=0)\n",
+    "\n",
+    "bar = Bars(\n",
+    "    x=x_data,\n",
+    "    y=y_vals,\n",
+    "    color=color_data,\n",
+    "    scales={\"x\": x_ord, \"y\": y_sc, \"color\": col_sc},\n",
+    "    padding=0.2,\n",
+    "    color_mode=\"group\",\n",
+    "    stroke=\"orange\",\n",
+    ")\n",
+    "ax_x = Axis(scale=x_ord)\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\", tick_format=\"0.2f\")\n",
+    "ax_c = ColorAxis(scale=col_sc, tick_format=\"0.1f\")\n",
+    "\n",
+    "margin = dict(top=50, bottom=80, left=50, right=50)\n",
+    "Figure(marks=[bar], axes=[ax_x, ax_y, ax_c], fig_margin=margin)"
+   ]
+  }
+ ],
+ "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.8.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

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

@@ -0,0 +1,217 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from bqplot import LinearScale, Bins, Axis, Figure"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Bins Mark\n",
+    "\n",
+    "This `Mark` is essentially the same as the `Hist` `Mark` from a user point of view, but is actually a `Bars` instance that bins sample data.\n",
+    "\n",
+    "The difference with `Hist` is that the binning is done in the backend, so it will work better for large data as it does not have to ship the whole data back and forth to the frontend."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Create a sample of Gaussian draws\n",
+    "np.random.seed(0)\n",
+    "x_data = np.random.randn(1000)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Give the `Hist` mark the data you want to perform as the `sample` argument, and also give 'x' and 'y' scales."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc = LinearScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "hist = Bins(\n",
+    "    sample=x_data,\n",
+    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
+    "    padding=0,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_sc, tick_format=\"0.2f\")\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "Figure(marks=[hist], axes=[ax_x, ax_y], padding_y=0)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The midpoints of the resulting bins and their number of elements can be recovered via the read-only traits `x` and `y`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "hist.x, hist.y"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Tuning the bins\n",
+    "\n",
+    "Under the hood, the `Bins` mark is really a `Bars` mark, with some additional magic to control the binning. The data in `sample` is binned into equal-width bins. The parameters controlling the binning are the following traits:\n",
+    "\n",
+    "- `bins` sets the number of bins. It is either a fixed integer (10 by default), or the name of a method to determine the number of bins in a smart way ('auto', 'fd', 'doane', 'scott', 'rice', 'sturges' or 'sqrt').\n",
+    "\n",
+    "- `min` and `max` set the range of the data (`sample`) to be binned\n",
+    "\n",
+    "- `density`, if set to `True`, normalizes the heights of the bars.\n",
+    "\n",
+    "For more information, see the documentation of `numpy`'s `histogram`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x_sc = LinearScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "hist = Bins(\n",
+    "    sample=x_data,\n",
+    "    scales={\"x\": x_sc, \"y\": y_sc},\n",
+    "    padding=0,\n",
+    ")\n",
+    "ax_x = Axis(scale=x_sc, tick_format=\"0.2f\")\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "Figure(marks=[hist], axes=[ax_x, ax_y], padding_y=0)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Changing the number of bins\n",
+    "hist.bins = \"sqrt\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Changing the range\n",
+    "hist.min = 0"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Histogram Styling\n",
+    "\n",
+    "The styling of `Hist` is identical to the one of `Bars`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Normalizing the count\n",
+    "\n",
+    "x_sc = LinearScale()\n",
+    "y_sc = LinearScale()\n",
+    "\n",
+    "hist = Bins(sample=x_data, scales={\"x\": x_sc, \"y\": y_sc}, density=True)\n",
+    "ax_x = Axis(scale=x_sc, tick_format=\"0.2f\")\n",
+    "ax_y = Axis(scale=y_sc, orientation=\"vertical\")\n",
+    "\n",
+    "Figure(marks=[hist], axes=[ax_x, ax_y], padding_y=0)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# changing the color\n",
+    "hist.colors = [\"orangered\"]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# stroke and opacity update\n",
+    "hist.stroke = \"orange\"\n",
+    "hist.opacities = [0.5] * len(hist.x)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Laying the histogram on its side\n",
+    "hist.orientation = \"horizontal\"\n",
+    "ax_x.orientation = \"vertical\"\n",
+    "ax_y.orientation = \"horizontal\""
+   ]
+  }
+ ],
+ "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.7.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}