j1-template 2022.5.0 → 2022.5.1.rc0

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

@@ -1,357 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import numpy as np\n",
-    "from bqplot import Graph, LinearScale, ColorScale, Figure, Tooltip\n",
-    "from ipywidgets import Layout"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Nodes and Links should be supplied to the Graph mark.\n",
-    "<p>Node attributes\n",
-    "\n",
-    "| Attribute|      Type     |  Description | Default |\n",
-    "|:----------:|:-------------:|:------:|\n",
-    "| label |  str | node label | mandatory attribute |\n",
-    "| label_display |  {center, outside, none} | label display options | center |\n",
-    "| shape |  {circle, ellipse, rect} | node shape | circle |\n",
-    "| shape_attrs |  dict | [node SVG attributes](https://www.w3.org/TR/SVG/shapes.html) | {'r': 15} |\n",
-    "<p> Link Attributes\n",
-    "\n",
-    "| Attribute|      Type     |  Description | Default |\n",
-    "|:----------:|:-------------:|:------:|\n",
-    "| source |  int | source node index | mandatory attribute |\n",
-    "| target |  int | target node index | mandatory attribute |\n",
-    "| value |  float | value of the link. Use np.nan if you do not want a link| - |\n",
-    "\n",
-    "<p> Link data can also be supplied using a link_matrix which is a numpy array of shape (n, n) where n is the number of nodes in the graph\n",
-    "\n",
-    "<p> Link Data can be passed in through 3 data attributes -\n",
-    "1. link_data - list of dicts (e.g. [{'source': 0, 'target': 1, 'value': 10}, {'source': 2, 'target': 1, 'value': 20},...]\n",
-    "2. link_matrix - 2-d numpy array of shape (n, n) where n is the number of nodes\n",
-    "3. link_color - 2-d numpy array of shape (n, n) where n is the number of nodes. This attribute can be used to encode the link_color by passing in a link_color scale\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "fig_layout = Layout(width=\"960px\", height=\"500px\")"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Directed Graph\n",
-    "If we dont specify the x and y location for nodes then the force layout will set the location of nodes"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "node_data = [\n",
-    "    dict(label=\"A\", shape=\"rect\"),\n",
-    "    dict(label=\"B\", shape=\"ellipse\"),\n",
-    "    dict(label=\"C\", shape=\"ellipse\"),\n",
-    "    dict(label=\"D\", shape=\"rect\"),\n",
-    "    dict(label=\"E\", shape=\"ellipse\"),\n",
-    "    dict(label=\"F\", shape=\"circle\"),\n",
-    "    dict(label=\"G\", shape=\"ellipse\"),\n",
-    "]\n",
-    "link_data = [\n",
-    "    {\"source\": s, \"target\": t} for s, t in np.random.randint(0, 7, (10, 2)) if s != t\n",
-    "]\n",
-    "graph = Graph(\n",
-    "    node_data=node_data, link_data=link_data, charge=-600, colors=[\"orange\"] * 7\n",
-    ")\n",
-    "Figure(marks=[graph], layout=fig_layout)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "graph.link_type = \"line\""
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Explicitly setting x and y location for nodes using x and y scales.\n",
-    "Force layout animation is disabled in this case"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "node_data = list(\"ABCDEFG\")\n",
-    "\n",
-    "# using link matrix to set links\n",
-    "link_matrix = np.zeros((7, 7))\n",
-    "xs = LinearScale()\n",
-    "ys = LinearScale()\n",
-    "x = [100, 200, 200, 300, 300, 300, 300]\n",
-    "y = [2, 0.5, 4, 8, 6, 4, 1]\n",
-    "graph = Graph(\n",
-    "    node_data=node_data,\n",
-    "    link_matrix=link_matrix,\n",
-    "    link_type=\"line\",\n",
-    "    colors=[\"orange\"] * 7,\n",
-    "    scales={\n",
-    "        \"x\": xs,\n",
-    "        \"y\": ys,\n",
-    "    },\n",
-    "    x=x,\n",
-    "    y=y,\n",
-    "    directed=False,\n",
-    ")\n",
-    "Figure(marks=[graph], layout=fig_layout)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Color code nodes using 'color' data attribute"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "node_data = list(\"ABCDEFG\")\n",
-    "\n",
-    "# using link matrix to set links\n",
-    "link_matrix = np.zeros((7, 7))\n",
-    "xs = LinearScale(min=0, max=500)\n",
-    "ys = LinearScale(min=0, max=10)\n",
-    "cs = ColorScale(scheme=\"Reds\")\n",
-    "x = [100, 200, 200, 300, 300, 300, 300]\n",
-    "y = [2, 0.5, 4, 8, 6, 4, 1]\n",
-    "graph = Graph(\n",
-    "    node_data=node_data,\n",
-    "    link_matrix=link_matrix,\n",
-    "    link_type=\"line\",\n",
-    "    color=np.random.rand(7),\n",
-    "    scales={\"x\": xs, \"y\": ys, \"color\": cs},\n",
-    "    x=x,\n",
-    "    y=y,\n",
-    "    directed=False,\n",
-    ")\n",
-    "Figure(marks=[graph], layout=fig_layout)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Color code links using link_color scale"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "node_data = list(\"ABCDEFG\")\n",
-    "\n",
-    "link_data = [\n",
-    "    {\"source\": s, \"target\": t, \"value\": np.random.rand()}\n",
-    "    for s, t in np.random.randint(0, 7, (20, 2))\n",
-    "]\n",
-    "\n",
-    "xs = LinearScale()\n",
-    "ys = LinearScale()\n",
-    "lcs = ColorScale(scheme=\"Greens\")\n",
-    "x = [100, 200, 200, 300, 300, 300, 300]\n",
-    "y = [2, 0.5, 4, 8, 6, 4, 1]\n",
-    "graph = Graph(\n",
-    "    node_data=node_data,\n",
-    "    link_data=link_data,\n",
-    "    link_type=\"line\",\n",
-    "    colors=[\"orange\"],\n",
-    "    directed=False,\n",
-    "    scales={\"x\": xs, \"y\": ys, \"link_color\": lcs},\n",
-    "    x=x,\n",
-    "    y=y,\n",
-    "    color=np.random.rand(7),\n",
-    ")\n",
-    "Figure(marks=[graph], layout=fig_layout)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Custom node attributes"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {
-    "scrolled": false
-   },
-   "outputs": [],
-   "source": [
-    "node_data = [\n",
-    "    {\"label\": \"A\", \"shape\": \"circle\", \"shape_attrs\": {\"r\": 20}, \"foo\": 1},\n",
-    "    {\n",
-    "        \"label\": \"Node B\",\n",
-    "        \"shape\": \"rect\",\n",
-    "        \"shape_attrs\": {\"rx\": 10, \"ry\": 10, \"width\": 40},\n",
-    "        \"foo\": 2,\n",
-    "    },\n",
-    "    {\"label\": \"C\", \"shape\": \"ellipse\", \"foo\": 4},\n",
-    "    {\n",
-    "        \"label\": \"D\",\n",
-    "        \"shape\": \"rect\",\n",
-    "        \"shape_attrs\": {\"width\": 30, \"height\": 30},\n",
-    "        \"foo\": 100,\n",
-    "    },\n",
-    "]\n",
-    "\n",
-    "link_data = [\n",
-    "    {\"source\": s, \"target\": t, \"value\": np.random.rand()}\n",
-    "    for s, t in np.random.randint(0, 4, (8, 2))\n",
-    "]\n",
-    "\n",
-    "graph = Graph(node_data=node_data, link_data=link_data, link_distance=150)\n",
-    "Figure(marks=[graph], layout=fig_layout)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Add tooltips on nodes"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "tooltip = Tooltip(fields=[\"label\", \"foo\"], formats=[\"\", \"\", \"\"])\n",
-    "graph.tooltip = tooltip"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Add a line chart as a tooltip"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "import bqplot.pyplot as plt\n",
-    "\n",
-    "plt.clear()\n",
-    "line = plt.plot(np.cumsum(np.random.randn(20)))\n",
-    "# hover on nodes to see the plot\n",
-    "graph.tooltip = plt.current_figure()"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Custom styling of hovered and selected nodes"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "graph.hovered_style = {\"stroke\": \"red\"}\n",
-    "graph.unhovered_style = {\"opacity\": \"0.4\"}\n",
-    "\n",
-    "graph.selected_style = {\"opacity\": \"1\", \"stroke\": \"white\", \"stroke-width\": \"2.5\"}"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# click on any node to select it (selected attribute gets populated with the index of the selected node)\n",
-    "graph.selected"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "### Add element click and background click handlers"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "def print_event(self, target):\n",
-    "    print(target)\n",
-    "\n",
-    "\n",
-    "graph.on_background_click(print_event)\n",
-    "graph.on_element_click(print_event)"
-   ]
-  }
- ],
- "metadata": {
-  "input_collapsed": false,
-  "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.9.2"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 2
-}