notebooks/examples.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "hungarian-transparency",
   "metadata": {},
   "source": [
    "# More Examples\n",
    "\n",
    "This notebook contains more examples, including a [larger-scale example with 1 million points](#Large-Scale-Test)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "married-halifax",
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import jscatter"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "570d63e9-832c-45cd-ab00-8869401c7916",
   "metadata": {},
   "source": [
    "We'll start by creating some dummy data that we can use to test jupyter-scatter."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "intermediate-balance",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>x</th>\n",
       "      <th>y</th>\n",
       "      <th>value</th>\n",
       "      <th>group</th>\n",
       "      <th>bla</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>0.228503</td>\n",
       "      <td>0.134184</td>\n",
       "      <td>0.463158</td>\n",
       "      <td>C</td>\n",
       "      <td>0.966027</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>0.873693</td>\n",
       "      <td>0.923344</td>\n",
       "      <td>0.474707</td>\n",
       "      <td>G</td>\n",
       "      <td>0.278722</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>0.450566</td>\n",
       "      <td>0.361604</td>\n",
       "      <td>0.800696</td>\n",
       "      <td>D</td>\n",
       "      <td>0.443519</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>0.418162</td>\n",
       "      <td>0.145864</td>\n",
       "      <td>0.940385</td>\n",
       "      <td>D</td>\n",
       "      <td>0.058974</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>0.833118</td>\n",
       "      <td>0.815866</td>\n",
       "      <td>0.988112</td>\n",
       "      <td>G</td>\n",
       "      <td>0.782633</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "          x         y     value group       bla\n",
       "0  0.228503  0.134184  0.463158     C  0.966027\n",
       "1  0.873693  0.923344  0.474707     G  0.278722\n",
       "2  0.450566  0.361604  0.800696     D  0.443519\n",
       "3  0.418162  0.145864  0.940385     D  0.058974\n",
       "4  0.833118  0.815866  0.988112     G  0.782633"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "n = 500\n",
    "data = np.random.rand(n, 5)\n",
    "df = pd.DataFrame(data, columns=['x', 'y', 'value', 'group', 'bla'])\n",
    "df['group'] = df['x'].map(lambda x: chr(65 + round(x * 7)))\n",
    "df.head(5)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "north-effect",
   "metadata": {},
   "source": [
    "## Simple Test\n",
    "\n",
    "In this example, we'll demonstrate the functional API."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "complex-interview",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c655d7dd4f01402ba6594a19bb1b92c4",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "scatter = jscatter.Scatter('x', 'y', df)\n",
    "scatter.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b511ae5e-6e5c-4b0b-9261-a552e037ca33",
   "metadata": {},
   "source": [
    "A useful feature of ipywidgets is that you can change the scatter plot after displaying it. Using the functional API we can chain multiple changes together."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "assured-athens",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<jscatter.jscatter.Scatter at 0x15a07da80>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "scatter.color(by='group').size(by='value').height(320).selection(df.query('x < 0.5').index).axes(grid=True, labels=['X', 'Y']).legend(True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "12682e2f-1198-4f3f-b6a3-98e41109da8e",
   "metadata": {},
   "source": [
    "Jupyter-scatter provides sensible default configurations. For instance, in the example above jupyter-scatter employs the colorblind safe Okabe and Ito colormap to visualize the `group` attribute of the data points.\n",
    "\n",
    "We can override the colormap using any Matplotlib color map or define our own categorical colormap easily using a dictionary of category-color pairs."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "bb748369-1a37-4fdb-bbbf-6a18e667230a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<jscatter.jscatter.Scatter at 0x15a07da80>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "scatter.color(map=dict(\n",
    "  C='red',\n",
    "  B='blue',\n",
    "  A='yellow',\n",
    "  D='pink',\n",
    "  E='green',\n",
    "  F='brown',\n",
    "  G='gray',\n",
    "  H='#56B4E9'\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "julian-consequence",
   "metadata": {},
   "source": [
    "# Short-Hand Test\n",
    "\n",
    "If you only want to plot something once, you can short-hand API."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "surrounded-discharge",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "40578e1f9a3f4304964feff2a4b4c2bb",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "jscatter.plot(\n",
    "    data=df,\n",
    "    x='x',\n",
    "    y='y',\n",
    "    color_by='value',\n",
    "    color_order='reverse',\n",
    "    size_by='value',\n",
    "    size_map=[10,11,12,13,14,15],\n",
    "    opacity_by='value',\n",
    "    connect_by='group',\n",
    "    connection_color_by='value',\n",
    "    connection_color_order='reverse',\n",
    "    height=600\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "lonely-armor",
   "metadata": {},
   "source": [
    "# Large-Scale Test\n",
    "\n",
    "In the following we're going to visualize the Rössler Attractor using 1 million points. This example is taken from the [absolutely fantastic writeup by the wonderful Ricky Reusser](https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds). Ricky, you're the best!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "deluxe-illustration",
   "metadata": {},
   "outputs": [],
   "source": [
    "def roesslerAttractor(num):\n",
    "    from math import inf\n",
    "    \n",
    "    points = []\n",
    "\n",
    "    xn = 2.644838333129883\n",
    "    yn = 4.060488700866699\n",
    "    zn = 2.8982460498809814\n",
    "    a = 0.2\n",
    "    b = 0.2\n",
    "    c = 5.7\n",
    "    dt = 0.006\n",
    "\n",
    "    minX = inf\n",
    "    maxX = -inf\n",
    "    minY = inf\n",
    "    maxY = -inf\n",
    "    for i in range(num):\n",
    "        dx = -yn - zn\n",
    "        dy = xn + a * yn\n",
    "        dz = b + zn * (xn - c)\n",
    "\n",
    "        xh = xn + 0.5 * dt * dx\n",
    "        yh = yn + 0.5 * dt * dy\n",
    "        zh = zn + 0.5 * dt * dz\n",
    "\n",
    "        dx = -yh - zh\n",
    "        dy = xh + a * yh\n",
    "        dz = b + zh * (xh - c)\n",
    "\n",
    "        xn1 = xn + dt * dx\n",
    "        yn1 = yn + dt * dy\n",
    "        zn1 = zn + dt * dz\n",
    "\n",
    "        points.append([xn1, yn1])\n",
    "\n",
    "        minX = min(xn1, minX)\n",
    "        maxX = max(xn1, maxX)\n",
    "        minY = min(yn1, minY)\n",
    "        maxY = max(yn1, maxY)\n",
    "\n",
    "        xn = xn1;\n",
    "        yn = yn1;\n",
    "        zn = zn1;\n",
    "\n",
    "\n",
    "    dX = maxX - minX\n",
    "    dY = maxY - minY\n",
    "\n",
    "    for i in range(num):\n",
    "        points[i][0] -= minX\n",
    "        points[i][0] /= dX / 2\n",
    "        points[i][0] -= 1\n",
    "        points[i][1] -= minY\n",
    "        points[i][1] /= dY / 2\n",
    "        points[i][1] -= 1\n",
    "\n",
    "    return points"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "educated-cheat",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c3d475eb9f52492fa9e18a87cb8fcf95",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "points = np.asarray(roesslerAttractor(1000000))\n",
    "jscatter.plot(points[:,0], points[:,1], height=640)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a809a644-6730-4000-b733-1322b6059a0c",
   "metadata": {},
   "source": [
    "Note, as you're zooming in, the point opacity is automatically adjusted based the number of points within the view. This feature is an extension from Ricky Reusser's dynamic point opacity introduced in [his fantastic writeup](https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds) mentioned above."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "advisory-answer",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.10.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}