j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Applications/Logs Analytics/Logs Dashboard.ipynb

@@ -0,0 +1,378 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Logs Analytics Dashboard\n",
+    "This dashboard can be used for performing visual analytics on the server log files. You can interact with any chart in the dashboard, like so:\n",
+    "\n",
+    "1. Click on a bar in any bar chart to filter the whole dataset by that bar's value\n",
+    "2. Click on a slice of any pie chart to filter the whole dataset by that pie slices value\n",
+    "\n",
+    "Fun things to try:\n",
+    "1. Select any specific day in the `Daily Events` bar chart (for e.g. why do first and last days have fewer events?)\n",
+    "2. Find out which product queries resulted in server error (click on `Server Error` slice of `Events By Status` pie chart)\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "\n",
+    "import ipywidgets as widgets\n",
+    "import bqplot as bq\n",
+    "import bqplot.pyplot as plt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_status_code(x):\n",
+    "    \"\"\"\n",
+    "    map integer http status to  string status code\n",
+    "    \"\"\"\n",
+    "    if x >= 200 and x < 300:\n",
+    "        return \"SUCCESS\"\n",
+    "    elif x >= 300 and x < 400:\n",
+    "        return \"REDIRECT\"\n",
+    "    elif x >= 400 and x < 500:\n",
+    "        return \"CLIENT ERROR\"\n",
+    "    elif x >= 500:\n",
+    "        return \"SERVER ERROR\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_events_by_hour(log_data_slice):\n",
+    "    \"\"\"\n",
+    "    get event counts by hour\n",
+    "    \"\"\"\n",
+    "    return (\n",
+    "        log_data_slice[\"status_code\"]\n",
+    "        .groupby(lambda x: x.hour)\n",
+    "        .count()\n",
+    "        .reindex(np.arange(24))\n",
+    "        .fillna(0)\n",
+    "    )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# load data into pandas and do some munging\n",
+    "log_data = pd.read_csv(\"access.log\", sep=\" \", header=None)\n",
+    "log_data.drop([1, 2], axis=1, inplace=True)\n",
+    "log_data.columns = [\n",
+    "    \"ip_address\",\n",
+    "    \"timestamp\",\n",
+    "    \"request\",\n",
+    "    \"status\",\n",
+    "    \"col1\",\n",
+    "    \"url\",\n",
+    "    \"agent\",\n",
+    "    \"col2\",\n",
+    "]\n",
+    "\n",
+    "log_data.index = pd.to_datetime(\n",
+    "    log_data[\"timestamp\"].str.replace(\"[\\[\\]]\", \"\"), format=\"%d/%b/%Y:%H:%M:%S\"\n",
+    ")\n",
+    "log_data.drop(\"timestamp\", axis=1, inplace=True)\n",
+    "\n",
+    "# add extra columns for easy querying\n",
+    "log_data[\"status_code\"] = log_data[\"status\"].map(get_status_code)\n",
+    "log_data[\"category\"] = log_data[\"request\"].str.extract(\"categoryId=(.*)&\", expand=False)\n",
+    "log_data[\"product\"] = log_data[\"request\"].str.extract(\"productId=(.*)&\", expand=False)\n",
+    "log_data[\"hour\"] = log_data.index.map(lambda x: x.hour)\n",
+    "log_data[\"day\"] = log_data.index.strftime(\"%Y-%m-%d\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "all_days = log_data[\"day\"].value_counts().index\n",
+    "all_hours = np.arange(24)\n",
+    "all_categories = list(log_data[\"category\"].value_counts().index)\n",
+    "all_products = list(log_data[\"product\"].value_counts().index)\n",
+    "all_status_codes = list(log_data[\"status_code\"].value_counts().index)\n",
+    "\n",
+    "category_colors = dict(zip(all_categories, bq.CATEGORY10))\n",
+    "status_label_colors = dict(\n",
+    "    [(\"SUCCESS\", \"#006d2c\"), (\"CLIENT ERROR\", \"#fc8d59\"), (\"SERVER ERROR\", \"#a63603\")]\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [],
+   "source": [
+    "# daily events bar chart\n",
+    "daily_events_fig = plt.figure(\n",
+    "    title=\"Daily Events\",\n",
+    "    animation_duration=1000,\n",
+    "    layout=widgets.Layout(width=\"900px\", height=\"500px\"),\n",
+    ")\n",
+    "\n",
+    "plt.scales(scales={\"x\": bq.DateScale()})\n",
+    "\n",
+    "# intsel = BrushIntervalSelector(scale=, marks=[hist])\n",
+    "bar_axes_options = {\"x\": {\"grid_lines\": \"none\"}, \"y\": {\"tick_format\": \",\"}}\n",
+    "common_bar_options = dict(\n",
+    "    interactions={\"click\": \"select\"},\n",
+    "    selected_style={\"stroke\": \"Red\", \"stroke-width\": 4},\n",
+    "    axes_options=bar_axes_options,\n",
+    ")\n",
+    "daily_events_bar = plt.bar(\n",
+    "    pd.to_datetime(all_days),\n",
+    "    [],\n",
+    "    colors=[\"dodgerblue\"],\n",
+    "    opacities=[0.8] * len(all_days),\n",
+    "    **common_bar_options\n",
+    ")\n",
+    "\n",
+    "num_days = len(all_days)\n",
+    "filtered_daily_events_bar = plt.bar(\n",
+    "    pd.to_datetime(all_days),\n",
+    "    np.zeros(num_days),\n",
+    "    colors=[\"lightgreen\"],\n",
+    "    opacities=[0.8] * num_days,\n",
+    "    axes_options=bar_axes_options,\n",
+    ")\n",
+    "\n",
+    "# hourly events line chart\n",
+    "hourly_events_fig = plt.figure(\n",
+    "    title=\"Hourly Events\",\n",
+    "    animation_duration=1000,\n",
+    "    layout=widgets.Layout(width=\"600px\", height=\"500px\"),\n",
+    ")\n",
+    "\n",
+    "plt.scales(scales={\"x\": bq.OrdinalScale()})\n",
+    "hourly_events_bar = plt.bar(\n",
+    "    all_hours,\n",
+    "    [],\n",
+    "    colors=[\"goldenrod\"],\n",
+    "    opacities=[0.8] * 24,\n",
+    "    padding=0.2,\n",
+    "    **common_bar_options\n",
+    ")\n",
+    "\n",
+    "filtered_hourly_events_bar = plt.bar(\n",
+    "    all_hours,\n",
+    "    [],\n",
+    "    colors=[\"lightgreen\"],\n",
+    "    opacities=[0.8] * 24,\n",
+    "    padding=0.2,\n",
+    "    axes_options=bar_axes_options,\n",
+    ")\n",
+    "\n",
+    "products_fig = plt.figure(\n",
+    "    title=\"Events By Product\",\n",
+    "    animation_duration=1000,\n",
+    "    fig_margin=dict(top=60, bottom=20, left=100, right=40),\n",
+    "    layout=widgets.Layout(width=\"550px\", height=\"500px\"),\n",
+    ")\n",
+    "products_bar = plt.bar(\n",
+    "    all_products,\n",
+    "    [],\n",
+    "    colors=[\"salmon\"],\n",
+    "    orientation=\"horizontal\",\n",
+    "    opacities=[0.8] * len(all_products),\n",
+    "    padding=0.2,\n",
+    "    **common_bar_options\n",
+    ")\n",
+    "\n",
+    "common_pie_args = dict(\n",
+    "    display_labels=\"outside\",\n",
+    "    interactions={\"click\": \"select\"},\n",
+    "    selected_style={\"stroke\": \"white\", \"stroke-width\": 3},\n",
+    "    inner_radius=80,\n",
+    "    apply_clip=False,\n",
+    ")\n",
+    "# categories pie chart\n",
+    "categories_fig = plt.figure(\n",
+    "    title=\"Events By Category\",\n",
+    "    animation_duration=1000,\n",
+    "    layout=widgets.Layout(width=\"550px\", height=\"500px\"),\n",
+    ")\n",
+    "categories_pie = plt.pie([], labels=all_categories, **common_pie_args)\n",
+    "\n",
+    "# status codes pie chart\n",
+    "status_codes_fig = plt.figure(\n",
+    "    title=\"Events By Status\",\n",
+    "    animation_duration=1000,\n",
+    "    layout=widgets.Layout(width=\"550px\", height=\"500px\"),\n",
+    ")\n",
+    "status_codes_pie = plt.pie([], labels=all_status_codes, **common_pie_args)\n",
+    "\n",
+    "# buttons for updating and resetting filters\n",
+    "update_btn = widgets.Button(description=\"Update\", button_style=\"Success\")\n",
+    "reset_btn = widgets.Button(description=\"Reset\", button_style=\"Success\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fields = [\"day\", \"hour\", \"product\", \"category\", \"status_code\"]\n",
+    "field_vals = [all_days, all_hours, all_products, all_categories, all_status_codes]\n",
+    "plots = [\n",
+    "    daily_events_bar,\n",
+    "    hourly_events_bar,\n",
+    "    products_bar,\n",
+    "    categories_pie,\n",
+    "    status_codes_pie,\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def generate_filters():\n",
+    "    filters_dict = {}\n",
+    "    for field, field_val, plot in zip(fields, field_vals, plots):\n",
+    "        if plot.selected:\n",
+    "            selected_vals = [field_val[i] for i in plot.selected]\n",
+    "            filters_dict[field] = selected_vals\n",
+    "    return filters_dict"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def apply_filters(df, filters):\n",
+    "    filtered_df = df\n",
+    "\n",
+    "    for k, v in filters.items():\n",
+    "        if v and len(v) > 0:\n",
+    "            filtered_df = filtered_df[filtered_df[k].isin(v)]\n",
+    "    return filtered_df"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def update_plots(*args):\n",
+    "    global filters, filtered_log_data\n",
+    "    filters = generate_filters()\n",
+    "    filtered_log_data = apply_filters(log_data, filters)\n",
+    "\n",
+    "    daily_events = (\n",
+    "        filtered_log_data.resample(\"D\")\n",
+    "        .count()[\"status_code\"]\n",
+    "        .reindex(pd.to_datetime(all_days))\n",
+    "        .fillna(0)\n",
+    "    )\n",
+    "    daily_events_bar.y = daily_events\n",
+    "\n",
+    "    hourly_events_bar.y = get_events_by_hour(filtered_log_data)\n",
+    "\n",
+    "    products_bar.y = (\n",
+    "        filtered_log_data[\"product\"].value_counts().reindex(all_products).fillna(0)\n",
+    "    )\n",
+    "\n",
+    "    events_by_category = filtered_log_data[\"category\"].value_counts()\n",
+    "\n",
+    "    with categories_pie.hold_sync():\n",
+    "        categories_pie.labels = list(events_by_category.index)\n",
+    "        categories_pie.sizes = events_by_category\n",
+    "        categories_pie.colors = [category_colors[d] for d in categories_pie.labels]\n",
+    "\n",
+    "    events_by_status_code = filtered_log_data[\"status_code\"].value_counts()\n",
+    "\n",
+    "    with status_codes_pie.hold_sync():\n",
+    "        status_codes_pie.labels = list(events_by_status_code.index)\n",
+    "        status_codes_pie.sizes = events_by_status_code.values\n",
+    "        status_codes_pie.colors = [\n",
+    "            status_label_colors[d] for d in status_codes_pie.labels\n",
+    "        ]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def reset_filters(*args):\n",
+    "    for plot in plots:\n",
+    "        plot.selected = None\n",
+    "    update_plots(None)\n",
+    "\n",
+    "\n",
+    "update_btn.on_click(lambda btn: update_plots(None))\n",
+    "reset_btn.on_click(lambda btn: reset_filters())\n",
+    "btns_layout = widgets.VBox(\n",
+    "    [update_btn, reset_btn], layout=widgets.Layout(overflow_x=\"hidden\")\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [],
+   "source": [
+    "update_plots(None)\n",
+    "\n",
+    "parent_plots = widgets.HBox([daily_events_fig, hourly_events_fig])\n",
+    "child_plots = widgets.HBox([products_fig, categories_fig, status_codes_fig])\n",
+    "widgets.VBox([widgets.HBox([parent_plots, btns_layout]), child_plots])"
+   ]
+  }
+ ],
+ "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": 1
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Applications/Mobile Patent Suits.ipynb

@@ -0,0 +1,123 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from itertools import chain\n",
+    "\n",
+    "from bqplot import OrdinalColorScale, Figure, Graph\n",
+    "from ipywidgets import Layout"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# mobile patent suits - http://bl.ocks.org/mbostock/1153292\n",
+    "suits = [\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"Amazon\", \"type\": \"licensing\"},\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"HTC\", \"type\": \"licensing\"},\n",
+    "    {\"source\": \"Samsung\", \"target\": \"Apple\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Motorola\", \"target\": \"Apple\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Nokia\", \"target\": \"Apple\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"HTC\", \"target\": \"Apple\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Kodak\", \"target\": \"Apple\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"Barnes & Noble\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"Foxconn\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Oracle\", \"target\": \"Google\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Apple\", \"target\": \"HTC\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"Inventec\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Samsung\", \"target\": \"Kodak\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"LG\", \"target\": \"Kodak\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"RIM\", \"target\": \"Kodak\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Sony\", \"target\": \"LG\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Kodak\", \"target\": \"LG\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"Apple\", \"target\": \"Nokia\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"Qualcomm\", \"target\": \"Nokia\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"Apple\", \"target\": \"Motorola\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Microsoft\", \"target\": \"Motorola\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Motorola\", \"target\": \"Microsoft\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Huawei\", \"target\": \"ZTE\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Ericsson\", \"target\": \"ZTE\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Kodak\", \"target\": \"Samsung\", \"type\": \"resolved\"},\n",
+    "    {\"source\": \"Apple\", \"target\": \"Samsung\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Kodak\", \"target\": \"RIM\", \"type\": \"suit\"},\n",
+    "    {\"source\": \"Nokia\", \"target\": \"Qualcomm\", \"type\": \"suit\"},\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# transform data into nodes and links\n",
+    "nodes = list(set(chain(*((suit[\"source\"], suit[\"target\"]) for suit in suits))))\n",
+    "\n",
+    "# set custom node attrs\n",
+    "node_data = [\n",
+    "    {\"label\": node, \"shape_attrs\": {\"r\": 6}, \"label_display\": \"outside\"}\n",
+    "    for node in nodes\n",
+    "]\n",
+    "# for links, source and target should be indices into the nodes list\n",
+    "nodes_index_map = {node: i for i, node in enumerate(nodes)}\n",
+    "link_data = [\n",
+    "    {\n",
+    "        \"source\": nodes_index_map[s[\"source\"]],\n",
+    "        \"target\": nodes_index_map[s[\"target\"]],\n",
+    "        \"value\": s[\"type\"],\n",
+    "    }\n",
+    "    for s in suits\n",
+    "]\n",
+    "\n",
+    "# encode suit type with link color\n",
+    "link_color_scale = OrdinalColorScale(\n",
+    "    domain=[\"licensing\", \"suit\", \"resolved\"],\n",
+    "    colors=[\"limegreen\", \"dodgerblue\", \"orangered\"],\n",
+    ")\n",
+    "graph = Graph(\n",
+    "    node_data=node_data,\n",
+    "    link_data=link_data,\n",
+    "    link_type=\"arc\",\n",
+    "    scales={\"link_color\": link_color_scale},\n",
+    "    colors=[\"gray\"],\n",
+    "    directed=True,\n",
+    "    link_distance=100,\n",
+    "    charge=-600,\n",
+    ")\n",
+    "Figure(\n",
+    "    marks=[graph],\n",
+    "    layout=Layout(height=\"900px\", width=\"1000px\"),\n",
+    "    title=\"Mobile Patent Suits\",\n",
+    ")"
+   ]
+  }
+ ],
+ "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": 2
+}

data/lib/starter_web/pages/public/_jupyter/notebooks/martin_renou_bqplot/Applications/Neural Network.ipynb

@@ -0,0 +1,177 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This application demonstrates how to build a simple neural network using the Graph mark.\n",
+    "Interactions can be enabled by adding event handlers (click, hover etc) on the nodes of the network.\n",
+    "See the [Mark Interactions notebook](../Interactions/Mark%20Interactions.ipynb) and the [Scatter Notebook](../Marks/Object%20Model/Scatter.ipynb) for details."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from itertools import chain, product\n",
+    "\n",
+    "import numpy as np\n",
+    "from bqplot import LinearScale, Graph, Figure"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class NeuralNet(Figure):\n",
+    "    def __init__(self, **kwargs):\n",
+    "        self.height = kwargs.get(\"height\", 600)\n",
+    "        self.width = kwargs.get(\"width\", 960)\n",
+    "        self.directed_links = kwargs.get(\"directed_links\", False)\n",
+    "\n",
+    "        self.num_inputs = kwargs[\"num_inputs\"]\n",
+    "        self.num_hidden_layers = kwargs[\"num_hidden_layers\"]\n",
+    "        self.nodes_output_layer = kwargs[\"num_outputs\"]\n",
+    "        self.layer_colors = kwargs.get(\n",
+    "            \"layer_colors\", [\"Orange\"] * (len(self.num_hidden_layers) + 2)\n",
+    "        )\n",
+    "\n",
+    "        self.build_net()\n",
+    "        super(NeuralNet, self).__init__(**kwargs)\n",
+    "\n",
+    "    def build_net(self):\n",
+    "        # create nodes\n",
+    "        self.layer_nodes = []\n",
+    "        self.layer_nodes.append([\"x\" + str(i + 1) for i in range(self.num_inputs)])\n",
+    "\n",
+    "        for i, h in enumerate(self.num_hidden_layers):\n",
+    "            self.layer_nodes.append(\n",
+    "                [\"h\" + str(i + 1) + \",\" + str(j + 1) for j in range(h)]\n",
+    "            )\n",
+    "        self.layer_nodes.append(\n",
+    "            [\"y\" + str(i + 1) for i in range(self.nodes_output_layer)]\n",
+    "        )\n",
+    "\n",
+    "        self.flattened_layer_nodes = list(chain(*self.layer_nodes))\n",
+    "\n",
+    "        # build link matrix\n",
+    "        i = 0\n",
+    "        node_indices = {}\n",
+    "        for layer in self.layer_nodes:\n",
+    "            for node in layer:\n",
+    "                node_indices[node] = i\n",
+    "                i += 1\n",
+    "\n",
+    "        n = len(self.flattened_layer_nodes)\n",
+    "        self.link_matrix = np.empty((n, n))\n",
+    "        self.link_matrix[:] = np.nan\n",
+    "\n",
+    "        for i in range(len(self.layer_nodes) - 1):\n",
+    "            curr_layer_nodes_indices = [node_indices[d] for d in self.layer_nodes[i]]\n",
+    "            next_layer_nodes = [node_indices[d] for d in self.layer_nodes[i + 1]]\n",
+    "            for s, t in product(curr_layer_nodes_indices, next_layer_nodes):\n",
+    "                self.link_matrix[s, t] = 1\n",
+    "\n",
+    "        # set node x locations\n",
+    "        self.nodes_x = np.repeat(\n",
+    "            np.linspace(0, 100, len(self.layer_nodes) + 1, endpoint=False)[1:],\n",
+    "            [len(n) for n in self.layer_nodes],\n",
+    "        )\n",
+    "\n",
+    "        # set node y locations\n",
+    "        self.nodes_y = np.array([])\n",
+    "        for layer in self.layer_nodes:\n",
+    "            n = len(layer)\n",
+    "            ys = np.linspace(0, 100, n + 1, endpoint=False)[1:]\n",
+    "            self.nodes_y = np.append(self.nodes_y, ys[::-1])\n",
+    "\n",
+    "        # set node colors\n",
+    "        n_layers = len(self.layer_nodes)\n",
+    "        self.node_colors = np.repeat(\n",
+    "            np.array(self.layer_colors[:n_layers]),\n",
+    "            [len(layer) for layer in self.layer_nodes],\n",
+    "        ).tolist()\n",
+    "\n",
+    "        xs = LinearScale(min=0, max=100)\n",
+    "        ys = LinearScale(min=0, max=100)\n",
+    "\n",
+    "        self.graph = Graph(\n",
+    "            node_data=[\n",
+    "                {\"label\": d, \"label_display\": \"none\"}\n",
+    "                for d in self.flattened_layer_nodes\n",
+    "            ],\n",
+    "            link_matrix=self.link_matrix,\n",
+    "            link_type=\"line\",\n",
+    "            colors=self.node_colors,\n",
+    "            directed=self.directed_links,\n",
+    "            scales={\"x\": xs, \"y\": ys},\n",
+    "            x=self.nodes_x,\n",
+    "            y=self.nodes_y,\n",
+    "            # color=2 * np.random.rand(len(self.flattened_layer_nodes)) - 1\n",
+    "        )\n",
+    "        self.graph.hovered_style = {\"stroke\": \"1.5\"}\n",
+    "        self.graph.unhovered_style = {\"opacity\": \"0.4\"}\n",
+    "\n",
+    "        self.graph.selected_style = {\n",
+    "            \"opacity\": \"1\",\n",
+    "            \"stroke\": \"red\",\n",
+    "            \"stroke-width\": \"2.5\",\n",
+    "        }\n",
+    "        self.marks = [self.graph]\n",
+    "        self.title = \"Neural Network\"\n",
+    "        self.layout.width = str(self.width) + \"px\"\n",
+    "        self.layout.height = str(self.height) + \"px\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "b2d75468c39d4bcf896561f72febb74d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "NeuralNet(fig_margin={'top': 60, 'bottom': 60, 'left': 60, 'right': 60}, layout=Layout(height='600px', width='…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "NeuralNet(num_inputs=3, num_hidden_layers=[10, 10, 8, 5], num_outputs=1)"
+   ]
+  }
+ ],
+ "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.7.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}