From c259a92b3390d8c7e85ea4f23218d679a6408434 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Nov 2024 13:53:42 -0500
Subject: [PATCH 1/5] Rename doc -> docs and move images and GIFs into assets
 folder.

---
 README.rst                                    |   8 +-
 .../PlotlyViewerExample-checkpoint.ipynb      | 404 ++++++++++++++++++
 .../assets/img}/BqplotToolbarHighlighted.png  | Bin
 .../assets/img}/PlotlyViewerExample.ipynb     | 168 +++++++-
 .../assets/img}/QtChartStudioExport.gif       | Bin
 {doc => docs/assets/img}/QtToolbarExport.gif  | Bin
 6 files changed, 556 insertions(+), 24 deletions(-)
 create mode 100644 docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb
 rename {doc => docs/assets/img}/BqplotToolbarHighlighted.png (100%)
 rename {doc => docs/assets/img}/PlotlyViewerExample.ipynb (59%)
 rename {doc => docs/assets/img}/QtChartStudioExport.gif (100%)
 rename {doc => docs/assets/img}/QtToolbarExport.gif (100%)

diff --git a/README.rst b/README.rst
index f605c8f..acca1d0 100644
--- a/README.rst
+++ b/README.rst
@@ -61,7 +61,7 @@ Viewers
 This package contains two experimental Plotly-powered viewers which can be used with glue-jupyter - a
 scatter viewer and a histogram viewer. More viewers to come in the future!
 
-`This notebook <https://github.com/glue-viz/glue-plotly/blob/main/doc/PlotlyViewerExample.ipynb>`_ demonstrates
+`This notebook <https://github.com/glue-viz/glue-plotly/blob/main/docs/PlotlyViewerExample.ipynb>`_ demonstrates
 basic usage of the these viewers, such as importing and viewer creation.
 
 
@@ -81,9 +81,9 @@ Package Structure
 .. |Coverage Status| image:: https://codecov.io/gh/glue-viz/glue-plotly/branch/master/graph/badge.svg
     :target: https://codecov.io/gh/glue-viz/glue-plotly
     :alt: Glue-plotly's Coverage Status
-.. |Qt toolbar demo| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/doc/QtToolbarExport.gif
+.. |Qt toolbar demo| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/docs/assets/img/QtToolbarExport.gif
     :alt: Qt Plotly export demo
-.. |bqplot toolbar| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/doc/BqplotToolbarHighlighted.png
+.. |bqplot toolbar| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/docs/assets/img/BqplotToolbarHighlighted.png
     :alt: bqplot Plotly export tool
-.. |Chart Studio demo| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/doc/QtChartStudioExport.gif
+.. |Chart Studio demo| image:: https://raw.githubusercontent.com/glue-viz/glue-plotly/main/docs/assets/img/QtChartStudioExport.gif
     :alt: Qt Chart Studio export demo
diff --git a/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb b/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb
new file mode 100644
index 0000000..c6620a1
--- /dev/null
+++ b/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb
@@ -0,0 +1,404 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "d5103242-a264-4f98-a168-ab40087f8c0c",
+   "metadata": {},
+   "source": [
+    "# Plotly Viewer Examples\n",
+    "This notebook contains examples of how to use the viewers provided by the `glue-plotly` package"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9101e7af-1a3a-4152-b43f-829c52a3d166",
+   "metadata": {},
+   "source": [
+    "### Imports"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from glue.core import Data\n",
+    "from glue_jupyter import jglue\n",
+    "from glue_plotly.viewers.histogram.viewer import PlotlyHistogramView\n",
+    "from glue_plotly.viewers.scatter.viewer import PlotlyScatterView"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c015dc70-746f-415b-853f-c31ea92cff67",
+   "metadata": {},
+   "source": [
+    "Create a glue-jupyter application and session"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "app = jglue()\n",
+    "session = app.session\n",
+    "dc = app.session.data_collection"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "7d6adbc6-93b8-4a0e-8505-83ef23fb2f6b",
+   "metadata": {},
+   "source": [
+    "Create some random data to use, and do a bit of styling"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from random import randint\n",
+    "x = [randint(0, 100) for _ in range(100)]\n",
+    "y = [randint(300, 400) for _ in range(100)]\n",
+    "data = Data(label='data', x=x, y=y)\n",
+    "dc.append(data)\n",
+    "data.style.color = \"#0000ff\"\n",
+    "data.style.markersize = 6"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "92745ee0-25bf-455a-b022-045059fa8e19",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x2 = [randint(0, 100) for _ in range(100)]\n",
+    "y2 = [randint(300, 400) for _ in range(100)]\n",
+    "data2 = Data(label='data2', x=x2, y=y2)\n",
+    "dc.append(data2)\n",
+    "app.add_link(data, 'x', data2, 'x')\n",
+    "app.add_link(data, 'y', data2, 'y')\n",
+    "data.style.color = \"#0000ff\"\n",
+    "data.style.markersize = 6"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2c520488-472c-4c43-8f29-3ae91fe41c13",
+   "metadata": {},
+   "source": [
+    "### Create a Plotly Scatter Viewer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "29dfa73fb7554c97a66b58cd2cafee9d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
+    "# Alternatively, you can use the viewer class:\n",
+    "# viewer = app.new_data_viewer(PlotlyScatterView, data=data)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "cbeeb763-daf0-4828-8535-f05f97ec856f",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "True"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "scatter_viewer.add_data(data2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "(PlotlyScatterLayerArtist for data, PlotlyScatterLayerArtist for data2)"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "scatter_viewer.layers"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "143236d3-446b-4286-b24c-a9511204b970",
+   "metadata": {},
+   "source": [
+    "### Create a Plotly Histogram Viewer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "2"
+      ]
+     },
+     "execution_count": 8,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "scatter_viewer.layers[1].state.zorder"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "7ea50b1df9e445f9a1411deb973b0a2d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
+    "# Alternatively, you can use the viewer class:\n",
+    "# viewer = app.new_data_viewer(PlotlyHistogramView, data=data)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "26be6106-c61a-4d84-82e3-136ccfcee588",
+   "metadata": {},
+   "source": [
+    "You can adjust whether there are gaps between the bars and, if so, what fraction of the plot they occupy"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "histogram_viewer.state.gaps = True\n",
+    "histogram_viewer.state.gap_fraction = 0.15"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "588347a7-8f4d-4f47-9838-a4a2e4106b02",
+   "metadata": {},
+   "source": [
+    "### Dotplot Viewer\n",
+    "`glue-plotly` provides an alternate layer artist for the histogram viewer that displays data as a dotplot. While we don't offer a built-in viewer that uses this functionality, you can use the simple implementation below as a starting point if you're interested in using dotplots."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9e25e894-bab1-4b21-a744-dcc5f9bc435d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from echo import delay_callback\n",
+    "from glue.config import viewer_tool\n",
+    "from glue_plotly.tools import PlotlyHZoomMode\n",
+    "\n",
+    "@viewer_tool\n",
+    "class BinningHZoom(PlotlyHZoomMode):\n",
+    "    tool_id = \"plotly:binhzoom\"\n",
+    "\n",
+    "    def _on_selection(self, trace, points, selector):\n",
+    "        xmin, xmax = selector.xrange\n",
+    "        viewer_state = self.viewer.state\n",
+    "        with self.viewer.figure.batch_update(), delay_callback(viewer_state, 'x_min', 'x_max'):\n",
+    "            viewer_state.x_min = xmin\n",
+    "            viewer_state.x_max = xmax\n",
+    "        self.viewer.state.update_bins_to_view()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from glue_plotly.viewers.histogram.dotplot_layer_artist import PlotlyDotplotLayerArtist\n",
+    "\n",
+    "class DotplotViewer(PlotlyHistogramView):\n",
+    "\n",
+    "    tools = [\"plotly:binhzoom\"]\n",
+    "    _data_artist_cls = PlotlyDotplotLayerArtist\n",
+    "    _subset_artist_cls = PlotlyDotplotLayerArtist"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 90,
+   "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "27676accc4b5461a97107c505ad28d2b",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 91,
+   "id": "26492697-440b-4df0-9624-a6cd3637f1cb",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 69,
+   "id": "11a75918-ed42-410a-8581-7a311ef9718c",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 86,
+   "id": "261850e6-1463-4f09-a451-b484f2551fc9",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class DummySelector:\n",
+    "    xrange = []\n",
+    "\n",
+    "selector = DummySelector()\n",
+    "selector.xrange = [20, 30]\n",
+    "tool._on_selection(tool, None, None, selector)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 100,
+   "id": "ed78d034-9ec2-4e56-a481-f7578f0f7e3a",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "20.648957158962798 32.37387260428411\n",
+      "[22 26 24 25 30 31 29 31 30 23 22 23 26]\n"
+     ]
+    }
+   ],
+   "source": [
+    "# Check that the dotplot is displaying the correct values\n",
+    "values = dotplot_viewer.layers[0].layer[dotplot_viewer.state.x_att]\n",
+    "mask = (values >= dotplot_viewer.state.hist_x_min) & (values <= dotplot_viewer.state.hist_x_max)\n",
+    "print(dotplot_viewer.state.hist_x_min, dotplot_viewer.state.hist_x_max)\n",
+    "print(values[mask])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5abe0321-b28a-4ff7-a19a-9093eb8efa93",
+   "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.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/doc/BqplotToolbarHighlighted.png b/docs/assets/img/BqplotToolbarHighlighted.png
similarity index 100%
rename from doc/BqplotToolbarHighlighted.png
rename to docs/assets/img/BqplotToolbarHighlighted.png
diff --git a/doc/PlotlyViewerExample.ipynb b/docs/assets/img/PlotlyViewerExample.ipynb
similarity index 59%
rename from doc/PlotlyViewerExample.ipynb
rename to docs/assets/img/PlotlyViewerExample.ipynb
index c0fe49c..d231199 100644
--- a/doc/PlotlyViewerExample.ipynb
+++ b/docs/assets/img/PlotlyViewerExample.ipynb
@@ -19,7 +19,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
    "metadata": {},
    "outputs": [],
@@ -40,7 +40,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
    "metadata": {},
    "outputs": [],
@@ -60,7 +60,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
    "metadata": {},
    "outputs": [],
@@ -76,7 +76,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "id": "92745ee0-25bf-455a-b022-045059fa8e19",
    "metadata": {},
    "outputs": [],
@@ -101,10 +101,25 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "29dfa73fb7554c97a66b58cd2cafee9d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
     "# Alternatively, you can use the viewer class:\n",
@@ -113,20 +128,42 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 6,
    "id": "cbeeb763-daf0-4828-8535-f05f97ec856f",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "True"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
     "scatter_viewer.add_data(data2)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 7,
    "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "(PlotlyScatterLayerArtist for data, PlotlyScatterLayerArtist for data2)"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
     "scatter_viewer.layers"
    ]
@@ -141,20 +178,46 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 8,
    "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "2"
+      ]
+     },
+     "execution_count": 8,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
     "scatter_viewer.layers[1].state.zorder"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 9,
    "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "7ea50b1df9e445f9a1411deb973b0a2d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
     "# Alternatively, you can use the viewer class:\n",
@@ -171,7 +234,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 10,
    "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
    "metadata": {},
    "outputs": [],
@@ -191,7 +254,31 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 103,
+   "id": "9e25e894-bab1-4b21-a744-dcc5f9bc435d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from echo import delay_callback\n",
+    "from glue.config import viewer_tool\n",
+    "from glue_plotly.viewers.common.tools import PlotlyHZoomMode\n",
+    "\n",
+    "@viewer_tool\n",
+    "class BinningHZoom(PlotlyHZoomMode):\n",
+    "    tool_id = \"plotly:binhzoom\"\n",
+    "\n",
+    "    def _on_selection(self, trace, points, selector):\n",
+    "        xmin, xmax = selector.xrange\n",
+    "        viewer_state = self.viewer.state\n",
+    "        with self.viewer.figure.batch_update(), delay_callback(viewer_state, 'x_min', 'x_max'):\n",
+    "            viewer_state.x_min = xmin\n",
+    "            viewer_state.x_max = xmax\n",
+    "        self.viewer.state.update_bins_to_view()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 104,
    "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
    "metadata": {},
    "outputs": [],
@@ -200,24 +287,65 @@
     "\n",
     "class DotplotViewer(PlotlyHistogramView):\n",
     "\n",
+    "    tools = [\"plotly:binhzoom\"]\n",
     "    _data_artist_cls = PlotlyDotplotLayerArtist\n",
     "    _subset_artist_cls = PlotlyDotplotLayerArtist"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 105,
    "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "7c795aca0ca3468fabb86f8d090f4edf",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 108,
+   "id": "ed78d034-9ec2-4e56-a481-f7578f0f7e3a",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "27.638810597519733 33.05031003382187\n",
+      "[30 31 29 31 30 33]\n",
+      "6\n"
+     ]
+    }
+   ],
+   "source": [
+    "# Check that the dotplot is displaying the correct values\n",
+    "values = dotplot_viewer.layers[0].layer[dotplot_viewer.state.x_att]\n",
+    "mask = (values >= dotplot_viewer.state.hist_x_min) & (values <= dotplot_viewer.state.hist_x_max)\n",
+    "print(dotplot_viewer.state.hist_x_min, dotplot_viewer.state.hist_x_max)\n",
+    "print(values[mask])\n",
+    "print(len(values[mask]))"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "26492697-440b-4df0-9624-a6cd3637f1cb",
+   "id": "5abe0321-b28a-4ff7-a19a-9093eb8efa93",
    "metadata": {},
    "outputs": [],
    "source": []
@@ -239,7 +367,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.1"
+   "version": "3.11.8"
   }
  },
  "nbformat": 4,
diff --git a/doc/QtChartStudioExport.gif b/docs/assets/img/QtChartStudioExport.gif
similarity index 100%
rename from doc/QtChartStudioExport.gif
rename to docs/assets/img/QtChartStudioExport.gif
diff --git a/doc/QtToolbarExport.gif b/docs/assets/img/QtToolbarExport.gif
similarity index 100%
rename from doc/QtToolbarExport.gif
rename to docs/assets/img/QtToolbarExport.gif

From ee73eff09edf9ce64b6d04767fd745c7407ab843 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Nov 2024 15:48:39 -0500
Subject: [PATCH 2/5] Update supported Chart Studio viewers in README.

---
 README.rst | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.rst b/README.rst
index acca1d0..db110e5 100644
--- a/README.rst
+++ b/README.rst
@@ -46,8 +46,7 @@ Chart Studio
 ============
 
 The Chart Studio exporter allows exporting a Qt glue session to Chart Studio, provided that all of the
-viewers in the session are supported. Currently supported viewers are the matplotlib scatter, histogram,
-and profile viewers.
+viewers in the session are supported. Currently supported viewers are the matplotlib scatter, histogram, profile, and dendrogram viewers.
 
 To access the exporter inside Qt glue, navigate to File > Advanced Exporters > Plotly.
 

From ad939a482a37459df5611d3ba47ed0b11b6d5de8 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Nov 2024 15:49:39 -0500
Subject: [PATCH 3/5] Create documentation page.

---
 docs/PlotlyViewerExample.ipynb |  336 ++++
 docs/assets/css/main.css       | 3223 ++++++++++++++++++++++++++++++++
 docs/assets/img/logo.png       |  Bin 0 -> 1004 bytes
 docs/assets/img/plotly.png     |  Bin 0 -> 7002 bytes
 docs/favicon.ico               |  Bin 0 -> 7358 bytes
 docs/index.html                |  112 ++
 6 files changed, 3671 insertions(+)
 create mode 100644 docs/PlotlyViewerExample.ipynb
 create mode 100644 docs/assets/css/main.css
 create mode 100644 docs/assets/img/logo.png
 create mode 100644 docs/assets/img/plotly.png
 create mode 100644 docs/favicon.ico
 create mode 100644 docs/index.html

diff --git a/docs/PlotlyViewerExample.ipynb b/docs/PlotlyViewerExample.ipynb
new file mode 100644
index 0000000..1bc281c
--- /dev/null
+++ b/docs/PlotlyViewerExample.ipynb
@@ -0,0 +1,336 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "d5103242-a264-4f98-a168-ab40087f8c0c",
+   "metadata": {},
+   "source": [
+    "# Plotly Viewer Examples\n",
+    "This notebook contains examples of how to use the viewers provided by the `glue-plotly` package"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9101e7af-1a3a-4152-b43f-829c52a3d166",
+   "metadata": {},
+   "source": [
+    "### Imports"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from glue.core import Data\n",
+    "from glue_jupyter import jglue\n",
+    "from glue_plotly.viewers.histogram.viewer import PlotlyHistogramView\n",
+    "from glue_plotly.viewers.scatter.viewer import PlotlyScatterView"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c015dc70-746f-415b-853f-c31ea92cff67",
+   "metadata": {},
+   "source": [
+    "Create a glue-jupyter application and session"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "['ipyvolume:lasso', 'ipyvolume:circle', 'ipyvolume:rectangle']\n"
+     ]
+    },
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "/home/jon/opt/mambaforge/envs/glue-plotly/lib/python3.11/site-packages/glue_qt/viewers/common/tool.py:5: UserWarning:\n",
+      "\n",
+      "glue.viewers.common.tool is deprecated, use glue.viewers.common.tool instead\n",
+      "\n"
+     ]
+    }
+   ],
+   "source": [
+    "app = jglue()\n",
+    "session = app.session\n",
+    "dc = app.session.data_collection"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "7d6adbc6-93b8-4a0e-8505-83ef23fb2f6b",
+   "metadata": {},
+   "source": [
+    "Create some random data to use, and do a bit of styling"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 23,
+   "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from random import randint\n",
+    "x = [randint(0, 100) for _ in range(100)]\n",
+    "y = [randint(300, 400) for _ in range(100)]\n",
+    "data = app.load_data(\"~/dev/glue/data/airplane/planes_truncated.csv\")\n",
+    "dc.append(data)\n",
+    "data.style.color = \"#0000ff\"\n",
+    "data.style.markersize = 6"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "92745ee0-25bf-455a-b022-045059fa8e19",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "x2 = [randint(0, 100) for _ in range(100)]\n",
+    "y2 = [randint(300, 400) for _ in range(100)]\n",
+    "data2 = Data(label='data2', x=x2, y=y2)\n",
+    "dc.append(data2)\n",
+    "app.add_link(data, 'x', data2, 'x')\n",
+    "app.add_link(data, 'y', data2, 'y')\n",
+    "data.style.color = \"#0000ff\"\n",
+    "data.style.markersize = 6"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2c520488-472c-4c43-8f29-3ae91fe41c13",
+   "metadata": {},
+   "source": [
+    "### Create a Plotly Scatter Viewer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 27,
+   "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "a086592611844e8d94a1c6623d35cb5a",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
+    "# Alternatively, you can use the viewer class:\n",
+    "# viewer = app.new_data_viewer(PlotlyScatterView, data=data)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 28,
+   "id": "d94774d4-3a68-4b7a-b7f2-7e79afead2b5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "scatter_viewer.state.x_axislabel = \"Longitude\"\n",
+    "scatter_viewer.state.y_axislabel = \"Latitude\"\n",
+    "scatter_viewer.figure.layout.width = 900"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "(PlotlyScatterLayerArtist for My Data, PlotlyScatterLayerArtist for data2)"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "scatter_viewer.layers"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "143236d3-446b-4286-b24c-a9511204b970",
+   "metadata": {},
+   "source": [
+    "### Create a Plotly Histogram Viewer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "2"
+      ]
+     },
+     "execution_count": 8,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "scatter_viewer.layers[1].state.zorder"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "e72117c63af0431a91224959cfdbf10b",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
+    "# Alternatively, you can use the viewer class:\n",
+    "# viewer = app.new_data_viewer(PlotlyHistogramView, data=data)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "26be6106-c61a-4d84-82e3-136ccfcee588",
+   "metadata": {},
+   "source": [
+    "You can adjust whether there are gaps between the bars and, if so, what fraction of the plot they occupy"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 16,
+   "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "histogram_viewer.state.gaps = True\n",
+    "histogram_viewer.state.gap_fraction = 0.13\n",
+    "histogram_viewer.state.x_axislabel = \"Value\"\n",
+    "histogram_viewer.figure.layout.width = 900"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "588347a7-8f4d-4f47-9838-a4a2e4106b02",
+   "metadata": {},
+   "source": [
+    "### Dotplot Viewer\n",
+    "`glue-plotly` provides an alternate layer artist for the histogram viewer that displays data as a dotplot. While we don't offer a built-in viewer that uses this functionality, you can use the simple implementation below as a starting point if you're interested in using dotplots."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 11,
+   "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from glue_plotly.viewers.histogram.dotplot_layer_artist import PlotlyDotplotLayerArtist\n",
+    "\n",
+    "class DotplotViewer(PlotlyHistogramView):\n",
+    "\n",
+    "    _data_artist_cls = PlotlyDotplotLayerArtist\n",
+    "    _subset_artist_cls = PlotlyDotplotLayerArtist"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "4aef2c287aca4be08ac525f96db1510e",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "26492697-440b-4df0-9624-a6cd3637f1cb",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "glue-plotly",
+   "language": "python",
+   "name": "glue-plotly"
+  },
+  "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.11.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
new file mode 100644
index 0000000..7b0a34a
--- /dev/null
+++ b/docs/assets/css/main.css
@@ -0,0 +1,3223 @@
+/* @import url("font-awesome.min.css"); */
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");
+
+/*
+	Arcana by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Reset */
+
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+
+    html {
+        scroll-padding-top: 6em;
+    }
+
+	code {
+		font-family: monospace;
+		padding-left: 30px;
+		font-size: 0.9em;
+	}
+    
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
+
+	body {
+		line-height: 1;
+	}
+
+	ul {
+		list-style: none;
+	}
+
+	blockquote, q {
+		quotes: none;
+	}
+
+	blockquote:before, blockquote:after, q:before, q:after {
+		content: '';
+		content: none;
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	body {
+		-webkit-text-size-adjust: none;
+	}
+
+/* Box Model */
+
+	*, *:before, *:after {
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+/* Containers */
+
+	.container {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.container.\31 25\25 {
+		width: 100%;
+		max-width: 1750px;
+		min-width: 1400px;
+	}
+
+	.container.\37 5\25 {
+		width: 1050px;
+	}
+
+	.container.\35 0\25 {
+		width: 700px;
+	}
+
+	.container.\32 5\25 {
+		width: 350px;
+	}
+
+	.container {
+		width: 1400px;
+	}
+
+	@media screen and (max-width: 1680px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 1500px;
+			min-width: 1200px;
+		}
+
+		.container.\37 5\25 {
+			width: 900px;
+		}
+
+		.container.\35 0\25 {
+			width: 600px;
+		}
+
+		.container.\32 5\25 {
+			width: 300px;
+		}
+
+		.container {
+			width: 1200px;
+		}
+
+	}
+
+	@media screen and (max-width: 1280px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 1200px;
+			min-width: 960px;
+		}
+
+		.container.\37 5\25 {
+			width: 720px;
+		}
+
+		.container.\35 0\25 {
+			width: 480px;
+		}
+
+		.container.\32 5\25 {
+			width: 240px;
+		}
+
+		.container {
+			width: 960px;
+		}
+
+	}
+
+	@media screen and (max-width: 980px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 118.75%;
+			min-width: 95%;
+		}
+
+		.container.\37 5\25 {
+			width: 71.25%;
+		}
+
+		.container.\35 0\25 {
+			width: 47.5%;
+		}
+
+		.container.\32 5\25 {
+			width: 23.75%;
+		}
+
+		.container {
+			width: 95%;
+		}
+
+	}
+
+	@media screen and (max-width: 840px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 118.75%;
+			min-width: 95%;
+		}
+
+		.container.\37 5\25 {
+			width: 71.25%;
+		}
+
+		.container.\35 0\25 {
+			width: 47.5%;
+		}
+
+		.container.\32 5\25 {
+			width: 23.75%;
+		}
+
+		.container {
+			width: 95% !important;
+		}
+
+	}
+
+	@media screen and (max-width: 736px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 112.5%;
+			min-width: 90%;
+		}
+
+		.container.\37 5\25 {
+			width: 67.5%;
+		}
+
+		.container.\35 0\25 {
+			width: 45%;
+		}
+
+		.container.\32 5\25 {
+			width: 22.5%;
+		}
+
+		.container {
+			width: 90% !important;
+		}
+
+	}
+
+	@media screen and (max-width: 480px) {
+
+		.container.\31 25\25 {
+			width: 100%;
+			max-width: 125%;
+			min-width: 100%;
+		}
+
+		.container.\37 5\25 {
+			width: 75%;
+		}
+
+		.container.\35 0\25 {
+			width: 50%;
+		}
+
+		.container.\32 5\25 {
+			width: 25%;
+		}
+
+		.container {
+			width: 90% !important;
+		}
+
+	}
+
+/* Grid */
+
+	.row {
+		border-bottom: solid 1px transparent;
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.row > * {
+		float: left;
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.row:after, .row:before {
+		content: '';
+		display: block;
+		clear: both;
+		height: 0;
+	}
+
+	.row.uniform > * > :first-child {
+		margin-top: 0;
+	}
+
+	.row.uniform > * > :last-child {
+		margin-bottom: 0;
+	}
+
+	.row.\30 \25 > * {
+		padding: 0px 0 0 0px;
+	}
+
+	.row.\30 \25 {
+		margin: 0px 0 -1px 0px;
+	}
+
+	.row.uniform.\30 \25 > * {
+		padding: 0px 0 0 0px;
+	}
+
+	.row.uniform.\30 \25 {
+		margin: 0px 0 -1px 0px;
+	}
+
+	.row > * {
+		padding: 50px 0 0 50px;
+	}
+
+	.row {
+		margin: -50px 0 -1px -50px;
+	}
+
+	.row.uniform > * {
+		padding: 50px 0 0 50px;
+	}
+
+	.row.uniform {
+		margin: -50px 0 -1px -50px;
+	}
+
+	.row.\32 00\25 > * {
+		padding: 100px 0 0 100px;
+	}
+
+	.row.\32 00\25 {
+		margin: -100px 0 -1px -100px;
+	}
+
+	.row.uniform.\32 00\25 > * {
+		padding: 100px 0 0 100px;
+	}
+
+	.row.uniform.\32 00\25 {
+		margin: -100px 0 -1px -100px;
+	}
+
+	.row.\31 50\25 > * {
+		padding: 75px 0 0 75px;
+	}
+
+	.row.\31 50\25 {
+		margin: -75px 0 -1px -75px;
+	}
+
+	.row.uniform.\31 50\25 > * {
+		padding: 75px 0 0 75px;
+	}
+
+	.row.uniform.\31 50\25 {
+		margin: -75px 0 -1px -75px;
+	}
+
+	.row.\35 0\25 > * {
+		padding: 25px 0 0 25px;
+	}
+
+	.row.\35 0\25 {
+		margin: -25px 0 -1px -25px;
+	}
+
+	.row.uniform.\35 0\25 > * {
+		padding: 25px 0 0 25px;
+	}
+
+	.row.uniform.\35 0\25 {
+		margin: -25px 0 -1px -25px;
+	}
+
+	.row.\32 5\25 > * {
+		padding: 12.5px 0 0 12.5px;
+	}
+
+	.row.\32 5\25 {
+		margin: -12.5px 0 -1px -12.5px;
+	}
+
+	.row.uniform.\32 5\25 > * {
+		padding: 12.5px 0 0 12.5px;
+	}
+
+	.row.uniform.\32 5\25 {
+		margin: -12.5px 0 -1px -12.5px;
+	}
+
+	.\31 2u, .\31 2u\24 {
+		width: 100%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\31 1u, .\31 1u\24 {
+		width: 91.6666666667%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\31 0u, .\31 0u\24 {
+		width: 83.3333333333%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\39 u, .\39 u\24 {
+		width: 75%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\38 u, .\38 u\24 {
+		width: 66.6666666667%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\37 u, .\37 u\24 {
+		width: 58.3333333333%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\36 u, .\36 u\24 {
+		width: 50%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\35 u, .\35 u\24 {
+		width: 41.6666666667%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\34 u, .\34 u\24 {
+		width: 33.3333333333%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\33 u, .\33 u\24 {
+		width: 25%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\32 u, .\32 u\24 {
+		width: 16.6666666667%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\31 u, .\31 u\24 {
+		width: 8.3333333333%;
+		clear: none;
+		margin-left: 0;
+	}
+
+	.\31 2u\24 + *,
+	.\31 1u\24 + *,
+	.\31 0u\24 + *,
+	.\39 u\24 + *,
+	.\38 u\24 + *,
+	.\37 u\24 + *,
+	.\36 u\24 + *,
+	.\35 u\24 + *,
+	.\34 u\24 + *,
+	.\33 u\24 + *,
+	.\32 u\24 + *,
+	.\31 u\24 + * {
+		clear: left;
+	}
+
+	.\-11u {
+		margin-left: 91.66667%;
+	}
+
+	.\-10u {
+		margin-left: 83.33333%;
+	}
+
+	.\-9u {
+		margin-left: 75%;
+	}
+
+	.\-8u {
+		margin-left: 66.66667%;
+	}
+
+	.\-7u {
+		margin-left: 58.33333%;
+	}
+
+	.\-6u {
+		margin-left: 50%;
+	}
+
+	.\-5u {
+		margin-left: 41.66667%;
+	}
+
+	.\-4u {
+		margin-left: 33.33333%;
+	}
+
+	.\-3u {
+		margin-left: 25%;
+	}
+
+	.\-2u {
+		margin-left: 16.66667%;
+	}
+
+	.\-1u {
+		margin-left: 8.33333%;
+	}
+
+	@media screen and (max-width: 1680px) {
+
+		.row > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.uniform > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row.uniform {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 80px 0 0 80px;
+		}
+
+		.row.\32 00\25 {
+			margin: -80px 0 -1px -80px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 80px 0 0 80px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -80px 0 -1px -80px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.\31 50\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row.\35 0\25 {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.\32 5\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.\31 2u\28wide\29, .\31 2u\24\28wide\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28wide\29, .\31 1u\24\28wide\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28wide\29, .\31 0u\24\28wide\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28wide\29, .\39 u\24\28wide\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28wide\29, .\38 u\24\28wide\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28wide\29, .\37 u\24\28wide\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28wide\29, .\36 u\24\28wide\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28wide\29, .\35 u\24\28wide\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28wide\29, .\34 u\24\28wide\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28wide\29, .\33 u\24\28wide\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28wide\29, .\32 u\24\28wide\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28wide\29, .\31 u\24\28wide\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28wide\29 + *,
+		.\31 1u\24\28wide\29 + *,
+		.\31 0u\24\28wide\29 + *,
+		.\39 u\24\28wide\29 + *,
+		.\38 u\24\28wide\29 + *,
+		.\37 u\24\28wide\29 + *,
+		.\36 u\24\28wide\29 + *,
+		.\35 u\24\28wide\29 + *,
+		.\34 u\24\28wide\29 + *,
+		.\33 u\24\28wide\29 + *,
+		.\32 u\24\28wide\29 + *,
+		.\31 u\24\28wide\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28wide\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28wide\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28wide\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28wide\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28wide\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28wide\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28wide\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28wide\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28wide\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28wide\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28wide\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+	@media screen and (max-width: 1280px) {
+
+		.row > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.uniform > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.uniform {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.\31 2u\28normal\29, .\31 2u\24\28normal\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28normal\29, .\31 1u\24\28normal\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28normal\29, .\31 0u\24\28normal\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28normal\29, .\39 u\24\28normal\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28normal\29, .\38 u\24\28normal\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28normal\29, .\37 u\24\28normal\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28normal\29, .\36 u\24\28normal\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28normal\29, .\35 u\24\28normal\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28normal\29, .\34 u\24\28normal\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28normal\29, .\33 u\24\28normal\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28normal\29, .\32 u\24\28normal\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28normal\29, .\31 u\24\28normal\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28normal\29 + *,
+		.\31 1u\24\28normal\29 + *,
+		.\31 0u\24\28normal\29 + *,
+		.\39 u\24\28normal\29 + *,
+		.\38 u\24\28normal\29 + *,
+		.\37 u\24\28normal\29 + *,
+		.\36 u\24\28normal\29 + *,
+		.\35 u\24\28normal\29 + *,
+		.\34 u\24\28normal\29 + *,
+		.\33 u\24\28normal\29 + *,
+		.\32 u\24\28normal\29 + *,
+		.\31 u\24\28normal\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28normal\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28normal\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28normal\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28normal\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28normal\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28normal\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28normal\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28normal\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28normal\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28normal\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28normal\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+	@media screen and (max-width: 980px) {
+
+		.row > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.uniform > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.uniform {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.\31 2u\28narrow\29, .\31 2u\24\28narrow\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28narrow\29, .\31 1u\24\28narrow\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28narrow\29, .\31 0u\24\28narrow\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28narrow\29, .\39 u\24\28narrow\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28narrow\29, .\38 u\24\28narrow\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28narrow\29, .\37 u\24\28narrow\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28narrow\29, .\36 u\24\28narrow\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28narrow\29, .\35 u\24\28narrow\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28narrow\29, .\34 u\24\28narrow\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28narrow\29, .\33 u\24\28narrow\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28narrow\29, .\32 u\24\28narrow\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28narrow\29, .\31 u\24\28narrow\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28narrow\29 + *,
+		.\31 1u\24\28narrow\29 + *,
+		.\31 0u\24\28narrow\29 + *,
+		.\39 u\24\28narrow\29 + *,
+		.\38 u\24\28narrow\29 + *,
+		.\37 u\24\28narrow\29 + *,
+		.\36 u\24\28narrow\29 + *,
+		.\35 u\24\28narrow\29 + *,
+		.\34 u\24\28narrow\29 + *,
+		.\33 u\24\28narrow\29 + *,
+		.\32 u\24\28narrow\29 + *,
+		.\31 u\24\28narrow\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28narrow\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28narrow\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28narrow\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28narrow\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28narrow\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28narrow\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28narrow\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28narrow\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28narrow\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28narrow\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28narrow\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+	@media screen and (max-width: 840px) {
+
+		.row > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.uniform > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.uniform {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 60px 0 0 60px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -60px 0 -1px -60px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 45px 0 0 45px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -45px 0 -1px -45px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 15px 0 0 15px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -15px 0 -1px -15px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 7.5px 0 0 7.5px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -7.5px 0 -1px -7.5px;
+		}
+
+		.\31 2u\28narrower\29, .\31 2u\24\28narrower\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28narrower\29, .\31 1u\24\28narrower\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28narrower\29, .\31 0u\24\28narrower\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28narrower\29, .\39 u\24\28narrower\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28narrower\29, .\38 u\24\28narrower\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28narrower\29, .\37 u\24\28narrower\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28narrower\29, .\36 u\24\28narrower\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28narrower\29, .\35 u\24\28narrower\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28narrower\29, .\34 u\24\28narrower\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28narrower\29, .\33 u\24\28narrower\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28narrower\29, .\32 u\24\28narrower\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28narrower\29, .\31 u\24\28narrower\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28narrower\29 + *,
+		.\31 1u\24\28narrower\29 + *,
+		.\31 0u\24\28narrower\29 + *,
+		.\39 u\24\28narrower\29 + *,
+		.\38 u\24\28narrower\29 + *,
+		.\37 u\24\28narrower\29 + *,
+		.\36 u\24\28narrower\29 + *,
+		.\35 u\24\28narrower\29 + *,
+		.\34 u\24\28narrower\29 + *,
+		.\33 u\24\28narrower\29 + *,
+		.\32 u\24\28narrower\29 + *,
+		.\31 u\24\28narrower\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28narrower\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28narrower\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28narrower\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28narrower\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28narrower\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28narrower\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28narrower\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28narrower\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28narrower\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28narrower\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28narrower\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+	@media screen and (max-width: 736px) {
+
+		.row > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.uniform > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row.uniform {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row.\32 00\25 {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.\31 50\25 {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.\35 0\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 5px 0 0 5px;
+		}
+
+		.row.\32 5\25 {
+			margin: -5px 0 -1px -5px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 5px 0 0 5px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -5px 0 -1px -5px;
+		}
+
+		.\31 2u\28mobile\29, .\31 2u\24\28mobile\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28mobile\29, .\31 1u\24\28mobile\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28mobile\29, .\31 0u\24\28mobile\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28mobile\29, .\39 u\24\28mobile\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28mobile\29, .\38 u\24\28mobile\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28mobile\29, .\37 u\24\28mobile\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28mobile\29, .\36 u\24\28mobile\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28mobile\29, .\35 u\24\28mobile\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28mobile\29, .\34 u\24\28mobile\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28mobile\29, .\33 u\24\28mobile\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28mobile\29, .\32 u\24\28mobile\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28mobile\29, .\31 u\24\28mobile\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28mobile\29 + *,
+		.\31 1u\24\28mobile\29 + *,
+		.\31 0u\24\28mobile\29 + *,
+		.\39 u\24\28mobile\29 + *,
+		.\38 u\24\28mobile\29 + *,
+		.\37 u\24\28mobile\29 + *,
+		.\36 u\24\28mobile\29 + *,
+		.\35 u\24\28mobile\29 + *,
+		.\34 u\24\28mobile\29 + *,
+		.\33 u\24\28mobile\29 + *,
+		.\32 u\24\28mobile\29 + *,
+		.\31 u\24\28mobile\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28mobile\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28mobile\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28mobile\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28mobile\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28mobile\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28mobile\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28mobile\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28mobile\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28mobile\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28mobile\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28mobile\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+	@media screen and (max-width: 480px) {
+
+		.row > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.uniform > * {
+			padding: 20px 0 0 20px;
+		}
+
+		.row.uniform {
+			margin: -20px 0 -1px -20px;
+		}
+
+		.row.\32 00\25 > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row.\32 00\25 {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.uniform.\32 00\25 > * {
+			padding: 40px 0 0 40px;
+		}
+
+		.row.uniform.\32 00\25 {
+			margin: -40px 0 -1px -40px;
+		}
+
+		.row.\31 50\25 > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.\31 50\25 {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.uniform.\31 50\25 > * {
+			padding: 30px 0 0 30px;
+		}
+
+		.row.uniform.\31 50\25 {
+			margin: -30px 0 -1px -30px;
+		}
+
+		.row.\35 0\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.\35 0\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.row.uniform.\35 0\25 > * {
+			padding: 10px 0 0 10px;
+		}
+
+		.row.uniform.\35 0\25 {
+			margin: -10px 0 -1px -10px;
+		}
+
+		.row.\32 5\25 > * {
+			padding: 5px 0 0 5px;
+		}
+
+		.row.\32 5\25 {
+			margin: -5px 0 -1px -5px;
+		}
+
+		.row.uniform.\32 5\25 > * {
+			padding: 5px 0 0 5px;
+		}
+
+		.row.uniform.\32 5\25 {
+			margin: -5px 0 -1px -5px;
+		}
+
+		.\31 2u\28mobilep\29, .\31 2u\24\28mobilep\29 {
+			width: 100%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 1u\28mobilep\29, .\31 1u\24\28mobilep\29 {
+			width: 91.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 0u\28mobilep\29, .\31 0u\24\28mobilep\29 {
+			width: 83.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\39 u\28mobilep\29, .\39 u\24\28mobilep\29 {
+			width: 75%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\38 u\28mobilep\29, .\38 u\24\28mobilep\29 {
+			width: 66.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\37 u\28mobilep\29, .\37 u\24\28mobilep\29 {
+			width: 58.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\36 u\28mobilep\29, .\36 u\24\28mobilep\29 {
+			width: 50%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\35 u\28mobilep\29, .\35 u\24\28mobilep\29 {
+			width: 41.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\34 u\28mobilep\29, .\34 u\24\28mobilep\29 {
+			width: 33.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\33 u\28mobilep\29, .\33 u\24\28mobilep\29 {
+			width: 25%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\32 u\28mobilep\29, .\32 u\24\28mobilep\29 {
+			width: 16.6666666667%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 u\28mobilep\29, .\31 u\24\28mobilep\29 {
+			width: 8.3333333333%;
+			clear: none;
+			margin-left: 0;
+		}
+
+		.\31 2u\24\28mobilep\29 + *,
+		.\31 1u\24\28mobilep\29 + *,
+		.\31 0u\24\28mobilep\29 + *,
+		.\39 u\24\28mobilep\29 + *,
+		.\38 u\24\28mobilep\29 + *,
+		.\37 u\24\28mobilep\29 + *,
+		.\36 u\24\28mobilep\29 + *,
+		.\35 u\24\28mobilep\29 + *,
+		.\34 u\24\28mobilep\29 + *,
+		.\33 u\24\28mobilep\29 + *,
+		.\32 u\24\28mobilep\29 + *,
+		.\31 u\24\28mobilep\29 + * {
+			clear: left;
+		}
+
+		.\-11u\28mobilep\29 {
+			margin-left: 91.66667%;
+		}
+
+		.\-10u\28mobilep\29 {
+			margin-left: 83.33333%;
+		}
+
+		.\-9u\28mobilep\29 {
+			margin-left: 75%;
+		}
+
+		.\-8u\28mobilep\29 {
+			margin-left: 66.66667%;
+		}
+
+		.\-7u\28mobilep\29 {
+			margin-left: 58.33333%;
+		}
+
+		.\-6u\28mobilep\29 {
+			margin-left: 50%;
+		}
+
+		.\-5u\28mobilep\29 {
+			margin-left: 41.66667%;
+		}
+
+		.\-4u\28mobilep\29 {
+			margin-left: 33.33333%;
+		}
+
+		.\-3u\28mobilep\29 {
+			margin-left: 25%;
+		}
+
+		.\-2u\28mobilep\29 {
+			margin-left: 16.66667%;
+		}
+
+		.\-1u\28mobilep\29 {
+			margin-left: 8.33333%;
+		}
+
+	}
+
+/* Basic */
+
+	body {
+		background: #f7f7f7;
+	}
+
+		body.is-loading * {
+			-moz-transition: none !important;
+			-webkit-transition: none !important;
+			-ms-transition: none !important;
+			transition: none !important;
+			-moz-animation: none !important;
+			-webkit-animation: none !important;
+			-ms-animation: none !important;
+			animation: none !important;
+		}
+
+	body, input, select, textarea {
+		color: #474747;
+		font-family: 'Source Sans Pro', sans-serif;
+		font-size: 16pt;
+		font-weight: 300;
+		line-height: 1.65em;
+	}
+
+	a {
+		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+		color: #37c0fb;
+		text-decoration: none;
+		border-bottom: dotted 1px;
+	}
+
+		a:hover {
+			color: #37c0fb;
+			border-bottom-color: transparent;
+		}
+
+	strong, b {
+		font-weight: 600;
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p, ul, ol, dl, table, blockquote {
+		margin: 0 0 2em 0;
+	}
+
+    ul ul,
+    ul ol,
+    ol ul,
+    ol ol {
+        margin: 0;
+    }
+
+	p.nomargin {
+		margin: 0 0 0 0;
+	}
+
+	ul.team {
+		margin: -1em 0 1em 2em;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: inherit;
+		font-weight: 600;
+		line-height: 1.75em;
+		margin-bottom: 1em;
+	}
+
+		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+			color: inherit;
+			text-decoration: none;
+		}
+
+		h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
+			font-style: normal;
+			font-weight: 300;
+		}
+
+	h2 {
+		font-size: 1.75em;
+		letter-spacing: -0.025em;
+	}
+
+	h3 {
+		font-size: 1.2em;
+		letter-spacing: -0.025em;
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	hr {
+		border-top: solid 1px #e0e0e0;
+		margin-bottom: 1.5em;
+	}
+
+	blockquote {
+		border-left: solid 0.5em #e0e0e0;
+		font-style: italic;
+		padding: 1em 0 1em 2em;
+	}
+
+	section.special, article.special {
+		text-align: center;
+	}
+
+	header p {
+		color: #999;
+		font-size: 1.25em;
+		position: relative;
+		margin-top: -1.25em;
+		margin-bottom: 2.25em;
+	}
+
+	header.major {
+		text-align: center;
+		margin: 0 0 2em 0;
+	}
+
+		header.major h2 {
+			font-size: 2.25em;
+		}
+
+		header.major p {
+			position: relative;
+			border-top: solid 1px #e0e0e0;
+			padding: 1em 0 0 0;
+			margin: 0;
+			top: -1em;
+			letter-spacing: -0.025em;
+		}
+
+	footer {
+		margin: 0 0 3em 0;
+	}
+
+		footer > :last-child {
+			margin-bottom: 0;
+		}
+
+		footer.major {
+			padding-top: 3em;
+		}
+
+/* Form */
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		-moz-transition: border-color 0.2s ease-in-out;
+		-webkit-transition: border-color 0.2s ease-in-out;
+		-ms-transition: border-color 0.2s ease-in-out;
+		transition: border-color 0.2s ease-in-out;
+		background: #fff;
+		border: solid 1px #e0e0e0;
+		border-radius: 5px;
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0.75em;
+		text-decoration: none;
+		width: 100%;
+	}
+
+		input[type="text"]:focus,
+		input[type="password"]:focus,
+		input[type="email"]:focus,
+		textarea:focus {
+			border-color: #37c0fb;
+		}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"] {
+		line-height: 1em;
+	}
+
+	label {
+		display: block;
+		color: inherit;
+		font-weight: 600;
+		line-height: 1.75em;
+		margin-bottom: 0.5em;
+	}
+
+	::-webkit-input-placeholder {
+		color: #999;
+		position: relative;
+		top: 3px;
+	}
+
+	:-moz-placeholder {
+		color: #999;
+	}
+
+	::-moz-placeholder {
+		color: #999;
+	}
+
+	:-ms-input-placeholder {
+		color: #999;
+	}
+
+	.formerize-placeholder {
+		color: #999;
+	}
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+		border-radius: 5px;
+	}
+
+		.image img {
+			display: block;
+			border-radius: 5px;
+		}
+
+		.image.left {
+			display: block;
+			float: left;
+			margin: 0 2em 2em 0;
+			position: relative;
+			top: 0.25em;
+		}
+
+			.image.left img {
+				display: block;
+				width: 100%;
+			}
+
+		.image.fit {
+			display: block;
+		}
+
+			.image.fit img {
+				display: block;
+				width: 100%;
+			}
+
+		.image.featured {
+			display: block;
+			margin: 0 0 2em 0;
+		}
+
+			.image.featured img {
+				display: block;
+				width: 100%;
+			}
+
+/* Icon */
+
+	.icon {
+		text-decoration: none;
+		position: relative;
+		text-decoration: none;
+	}
+
+		.icon:before {
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+		}
+
+		.icon > .label {
+			display: none;
+		}
+
+		.icon.major {
+			text-align: center;
+			cursor: default;
+			background-color: #37c0fb;
+			background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			color: #fff;
+			border-radius: 100%;
+			display: inline-block;
+			width: 5em;
+			height: 5em;
+			line-height: 5em;
+			box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
+			margin: 0 0 2em 0;
+		}
+
+			.icon.major:before {
+				font-size: 36px;
+			}
+
+/* Lists */
+
+	ol.default {
+		list-style: decimal;
+		padding-left: 1.25em;
+	}
+
+		ol.default li {
+			padding-left: 0.25em;
+		}
+
+	ul.default {
+		list-style: disc;
+		padding-left: 1em;
+	}
+
+		ul.default li {
+			padding-left: 0.5em;
+		}
+
+	ul.links li {
+		line-height: 2.5em;
+	}
+
+	ul.icons {
+		cursor: default;
+	}
+
+		ul.icons li {
+			display: inline-block;
+			line-height: 1em;
+			padding-left: 1.5em;
+		}
+
+			ul.icons li:first-child {
+				padding-left: 0;
+			}
+
+			ul.icons li a, ul.icons li span {
+				font-size: 2em;
+				border: 0;
+			}
+
+	ul.actions {
+		cursor: default;
+	}
+
+		ul.actions:last-child {
+			margin-bottom: 0;
+		}
+
+		ul.actions li {
+			display: inline-block;
+			padding: 0 0 0 1.5em;
+		}
+
+			ul.actions li:first-child {
+				padding: 0;
+			}
+
+		ul.actions.vertical li {
+			display: block;
+			padding: 1.5em 0 0 0;
+		}
+
+			ul.actions.vertical li:first-child {
+				padding: 0;
+			}
+
+	ul.menu li {
+		border-left: solid 1px #e0e0e0;
+		display: inline-block;
+		padding: 0 0 0 1em;
+		margin: 0 0 0 1em;
+	}
+
+		ul.menu li:first-child {
+			border-left: 0;
+			margin-left: 0;
+			padding-left: 0;
+		}
+
+/* Tables */
+
+	table {
+		width: 100%;
+	}
+
+		table.default {
+			width: 100%;
+		}
+
+			table.default tbody tr {
+				border-bottom: solid 1px #e0e0e0;
+			}
+
+			table.default td {
+				padding: 0.5em 1em 0.5em 1em;
+			}
+
+			table.default th {
+				font-weight: 600;
+				padding: 0.5em 1em 0.5em 1em;
+				text-align: left;
+			}
+
+			table.default thead {
+				background-color: #555555;
+				background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+				color: #fff;
+			}
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	.button {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+		background-color: #37c0fb;
+		border-radius: 5px;
+		border: 0;
+		color: #fff;
+		cursor: pointer;
+		display: inline-block;
+		padding: 0 1.5em;
+		line-height: 2.75em;
+		min-width: 9em;
+		text-align: center;
+		text-decoration: none;
+		font-weight: 600;
+		letter-spacing: -0.025em;
+	}
+
+		input[type="submit"]:hover,
+		input[type="reset"]:hover,
+		input[type="button"]:hover,
+		.button:hover {
+			background-color: #50c8fb;
+			color: #fff !important;
+		}
+
+		input[type="submit"]:active,
+		input[type="reset"]:active,
+		input[type="button"]:active,
+		.button:active {
+			background-color: #1eb8fb;
+			color: #fff;
+		}
+
+		input[type="submit"].alt,
+		input[type="reset"].alt,
+		input[type="button"].alt,
+		.button.alt {
+			background-color: #555555;
+			color: #fff;
+		}
+
+			input[type="submit"].alt:hover,
+			input[type="reset"].alt:hover,
+			input[type="button"].alt:hover,
+			.button.alt:hover {
+				background-color: #626262;
+			}
+
+			input[type="submit"].alt:active,
+			input[type="reset"].alt:active,
+			input[type="button"].alt:active,
+			.button.alt:active {
+				background-color: #484848;
+			}
+
+		input[type="submit"].icon:before,
+		input[type="reset"].icon:before,
+		input[type="button"].icon:before,
+		.button.icon:before {
+			margin-right: 0.5em;
+		}
+
+		input[type="submit"].fit,
+		input[type="reset"].fit,
+		input[type="button"].fit,
+		.button.fit {
+			width: 100%;
+		}
+
+		input[type="submit"].small,
+		input[type="reset"].small,
+		input[type="button"].small,
+		.button.small {
+			font-size: 0.8em;
+		}
+
+/* Box */
+
+	.box.highlight {
+		text-align: center;
+	}
+
+	.box.post {
+		position: relative;
+		margin: 0 0 2em 0;
+	}
+
+		.box.post:after {
+			content: '';
+			display: block;
+			clear: both;
+		}
+
+		.box.post .inner {
+			margin-left: calc(30% + 2em);
+		}
+
+			.box.post .inner > :last-child {
+				margin-bottom: 0;
+			}
+
+		.box.post .image {
+			width: 30%;
+			margin: 0;
+		}
+
+/* Header */
+
+	#header {
+		text-align: center;
+		background-color: #fff;
+		/*background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");*/
+		background-position: top left,					top left,					top left;
+		background-size: 100% 6em,					100% 6em,					auto;
+		background-repeat: no-repeat,					no-repeat,					repeat;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+	}
+
+		#header h1 {
+			margin: 0;
+      padding: 0px 10px;
+      font-size: 3em;
+		}
+
+    #header hr {
+      height: 2px;
+    }
+
+			#header h1 a {
+				letter-spacing: -0.025em;
+				border: 0;
+			}
+
+	#nav {
+        position: sticky;
+        top: 0;
+		    cursor: default;
+        margin: 0;
+		    padding: 0;
+        width: 100%;
+        display: block;
+        background-color: #EB1C24;
+        margin-bottom: 1.5em;
+        z-index: 10000;
+    }
+
+		#nav > ul {
+		    margin: 0;
+        display: flex;
+        justify-content: space-around;
+		}
+
+			#nav > ul > li {
+				position: relative;
+				display: inline-block;
+				margin-left: 1em;
+			}
+
+				#nav > ul > li a {
+					color: #F7F7F7;
+					text-decoration: none;
+					border: 0;
+					display: block;
+					padding: 1.5em 0.5em 1.35em 0.5em;
+				}
+
+				#nav > ul > li:first-child {
+					margin-left: 0;
+				}
+
+				#nav > ul > li:hover a {
+                    color: black;
+				}
+
+				#nav > ul > li.current {
+					font-weight: 600;
+				}
+
+					#nav > ul > li.current:before {
+						-moz-transform: rotateZ(45deg);
+						-webkit-transform: rotateZ(45deg);
+						-ms-transform: rotateZ(45deg);
+						transform: rotateZ(45deg);
+						width: 0.75em;
+						height: 0.75em;
+						content: '';
+						display: block;
+						position: absolute;
+						bottom: -0.5em;
+						left: 50%;
+						margin-left: -0.375em;
+						background-color: #D1413E;
+						/* background-image: url("images/bg01.png"); */
+					}
+
+					#nav > ul > li.current a {
+						color: #fff;
+					}
+
+				#nav > ul > li.active a {
+					color: #fff;
+				}
+
+				#nav > ul > li.active.current:before {
+					opacity: 0;
+				}
+
+				#nav > ul > li > ul {
+					display: none;
+				}
+
+/* Dropotron */
+
+	.dropotron {
+		background-color: #333;
+		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
+		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
+		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
+		background-image: linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), url("images/bg01.png");
+		border-radius: 5px;
+		color: #fff;
+		min-width: 10em;
+		padding: 1em 0;
+		text-align: center;
+		box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.5);
+	}
+
+		.dropotron > li {
+			line-height: 2em;
+			padding: 0 1.1em 0 1em;
+		}
+
+			.dropotron > li > a {
+				color: #c0c0c0;
+				text-decoration: none;
+				border: 0;
+			}
+
+			.dropotron > li.active > a, .dropotron > li:hover > a {
+				color: #fff;
+			}
+
+		.dropotron.level-0 {
+			border-radius: 0 0 5px 5px;
+			font-size: 0.9em;
+			padding-top: 0;
+			margin-top: -1px;
+		}
+
+/* Banner */
+
+	#banner {
+		background-image: url("../../images/banner.jpg");
+		background-position: center center;
+		background-size: cover;
+		height: 28em;
+		text-align: center;
+		position: relative;
+	}
+
+		#banner header {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			background: #212121;
+			background: rgba(27, 27, 27, 0.75);
+			color: #fff;
+			padding: 1.5em 0;
+		}
+
+			#banner header h2 {
+				display: inline-block;
+				margin: 0;
+				font-size: 1.25em;
+				vertical-align: middle;
+			}
+
+				#banner header h2 em {
+					opacity: 0.75;
+				}
+
+				#banner header h2 a {
+					border-bottom-color: rgba(255, 255, 255, 0.5);
+				}
+
+					#banner header h2 a:hover {
+						border-bottom-color: transparent;
+					}
+
+			#banner header .button {
+				vertical-align: middle;
+				margin-left: 1em;
+			}
+
+/* Wrapper */
+
+	.wrapper {
+		padding: 5em 0 3em 0;
+	}
+
+		.wrapper.style1 {
+			background: #fff;
+		}
+
+		.wrapper.style2 {
+			background-color: #fff;
+			background-image: url("images/bg02.png"), url("images/bg03.png"), url("images/bg01.png");
+			background-position: top left,						bottom left,					top left;
+			background-size: 100% 6em,						100% 6em,						auto;
+			background-repeat: no-repeat,						no-repeat,						repeat;
+		}
+
+		.wrapper.style3 {
+			background-color: #37c0fb;
+			background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), url("images/bg01.png");
+			color: #fff;
+		}
+
+			.wrapper.style3 .button {
+				background: #fff;
+				color: #474747;
+			}
+
+				.wrapper.style3 .button:hover {
+					color: #37c0fb !important;
+				}
+
+/* CTA */
+
+	#cta {
+		text-align: center;
+		padding: 3.5em 0;
+	}
+
+		#cta header h2 {
+			display: inline-block;
+			vertical-align: middle;
+			margin: 0;
+		}
+
+		#cta header .button {
+			vertical-align: middle;
+			margin-left: 1em;
+		}
+
+/* Footer */
+
+	#footer {
+		padding: 2em 0 1em 0;
+	}
+
+	#footer img{
+				max-height: 80px;
+			}
+
+		#footer a {
+			color: inherit;
+			border-bottom-color: rgba(71, 71, 71, 0.25);
+		}
+
+			#footer a:hover {
+				color: #37c0fb;
+				border-bottom-color: transparent;
+			}
+
+		#footer .container {
+			margin-bottom: 4em;
+		}
+
+		#footer .icons {
+			text-align: center;
+			margin: 0;
+		}
+
+			#footer .icons a {
+				color: #999;
+			}
+
+				#footer .icons a:hover {
+					color: #474747;
+				}
+
+		#footer .copyright {
+			color: #999;
+			margin-top: 0.2em;
+			text-align: center;
+			font-size: 0.9em;
+		}
+
+/* Wide */
+
+	@media screen and (max-width: 1680px) {
+
+		/* Basic */
+
+			body, input, select, textarea {
+				font-size: 14pt;
+				line-height: 1.5em;
+			}
+
+		/* Banner */
+
+			#banner {
+				height: 24em;
+			}
+
+	}
+
+/* Normal */
+
+	@media screen and (max-width: 1280px) {
+
+		/* Basic */
+
+			body, input, select, textarea {
+				font-size: 13pt;
+				line-height: 1.5em;
+			}
+
+		/* Lists */
+
+			ol.default {
+				list-style: decimal;
+				padding-left: 1.25em;
+			}
+
+				ol.default li {
+					padding-left: 0.25em;
+				}
+
+			ul.icons li a, ul.icons li span {
+				font-size: 1.5em;
+			}
+
+		/* Banner */
+
+			#banner {
+				height: 20em;
+			}
+
+		/* Wrapper */
+
+			.wrapper {
+				padding: 3em 0 1em 0;
+			}
+
+		/* CTA */
+
+			#cta {
+				padding: 2em 0;
+			}
+
+		/* Footer */
+
+			#footer {
+				padding: 1em 0 1em 0;
+			}
+
+				#footer .container {
+					margin-bottom: 1em;
+				}
+
+			#footer img{
+				height: 80px;
+			}
+
+	}
+
+/* Narrow */
+
+	@media screen and (max-width: 980px) {
+
+		/* Basic */
+
+			body, input, select, textarea {
+				font-size: 12pt;
+				line-height: 1.5em;
+			}
+
+	}
+
+/* Narrower */
+
+	#navPanel, #titleBar {
+		display: none;
+	}
+
+	@media screen and (max-width: 840px) {
+
+		/* Basic */
+
+			html, body {
+				overflow-x: hidden;
+			}
+
+			body, input, select, textarea {
+				font-size: 13pt;
+			}
+
+			h1, h2, h3, h4, h5, h6 {
+				margin-bottom: 0.5em;
+			}
+
+			header p {
+				margin-top: -0.75em;
+			}
+
+			header.major {
+				text-align: center;
+				margin: 0 0 2em 0;
+			}
+
+				header.major h2 {
+					font-size: 1.75em;
+				}
+
+				header.major p {
+					top: -0.25em;
+					font-size: 1.25em;
+				}
+
+		/* Box */
+
+			.box.highlight {
+				position: relative;
+			}
+
+				.box.highlight i {
+					position: absolute;
+					margin: 0;
+					left: 0;
+					top: 0.25em;
+				}
+
+			.box.post .inner {
+				margin-left: calc(20% + 2em);
+			}
+
+			.box.post .image {
+				width: 20%;
+			}
+
+		/* Banner */
+
+			#banner {
+				height: 20em;
+			}
+
+				#banner header h2 {
+					display: block;
+				}
+
+				#banner header .button {
+					margin: 1em 0 0 0;
+				}
+
+		/* CTA */
+
+			#cta {
+				padding: 1.5em 0;
+			}
+
+				#cta header h2 {
+					display: block;
+				}
+
+				#cta header .button {
+					margin: 1em 0 0 0;
+				}
+
+		/* Footer */
+
+			#footer {
+				text-align: center;
+			}
+
+				#footer .container {
+					margin-bottom: 4em;
+				}
+
+			#footer img{
+				height: 60px;
+			}
+
+		/* Off-Canvas Navigation */
+
+			#page-wrapper {
+				-moz-backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+				-ms-backface-visibility: hidden;
+				backface-visibility: hidden;
+				-moz-transition: -moz-transform 0.5s ease;
+				-webkit-transition: -webkit-transform 0.5s ease;
+				-ms-transition: -ms-transform 0.5s ease;
+				transition: transform 0.5s ease;
+				padding-bottom: 1px;
+				padding-top: 44px;
+			}
+
+			#titleBar {
+				-moz-backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+				-ms-backface-visibility: hidden;
+				backface-visibility: hidden;
+				-moz-transition: -moz-transform 0.5s ease;
+				-webkit-transition: -webkit-transform 0.5s ease;
+				-ms-transition: -ms-transform 0.5s ease;
+				transition: transform 0.5s ease;
+				display: block;
+				height: 44px;
+				left: 0;
+				position: fixed;
+				top: 0;
+				width: 100%;
+				z-index: 10001;
+				background-color: #333;
+				background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
+				background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
+				background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
+				background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
+				height: 44px;
+				line-height: 44px;
+				box-shadow: 0 4px 0 0 #D1413E;
+			}
+
+				#titleBar .title {
+					display: block;
+					position: relative;
+					font-weight: 600;
+					text-align: center;
+					color: #fff;
+					z-index: 1;
+				}
+
+					#titleBar .title em {
+						font-style: normal;
+						font-weight: 300;
+					}
+
+				#titleBar .toggle {
+					text-decoration: none;
+					border: 0;
+					height: 60px;
+					left: 0;
+					position: absolute;
+					top: 0;
+					width: 80px;
+					z-index: 2;
+				}
+
+					#titleBar .toggle:before {
+						-moz-osx-font-smoothing: grayscale;
+						-webkit-font-smoothing: antialiased;
+						font-family: FontAwesome;
+						font-style: normal;
+						font-weight: normal;
+						text-transform: none !important;
+					}
+
+					#titleBar .toggle:before {
+						content: '\f0c9';
+						display: block;
+						height: 44px;
+						text-align: center;
+						width: 44px;
+						color: #fff;
+						opacity: 0.5;
+					}
+
+					#titleBar .toggle:active:before {
+						opacity: 0.75;
+					}
+
+			#navPanel {
+				background-color: #1f1f1f;
+				box-shadow: inset -1px 0 3px 0 rgba(0, 0, 0, 0.5);
+				background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png");
+				background-image: linear-gradient(left, rgba(0,0,0,0) 75%, rgba(0,0,0,0.15)), url("images/bg01.png");
+				-moz-backface-visibility: hidden;
+				-webkit-backface-visibility: hidden;
+				-ms-backface-visibility: hidden;
+				backface-visibility: hidden;
+				-moz-transform: translateX(-275px);
+				-webkit-transform: translateX(-275px);
+				-ms-transform: translateX(-275px);
+				transform: translateX(-275px);
+				-moz-transition: -moz-transform 0.5s ease;
+				-webkit-transition: -webkit-transform 0.5s ease;
+				-ms-transition: -ms-transform 0.5s ease;
+				transition: transform 0.5s ease;
+				display: block;
+				height: 100%;
+				left: 0;
+				overflow-y: auto;
+				position: fixed;
+				top: 0;
+				width: 275px;
+				z-index: 10002;
+			}
+
+				#navPanel .link {
+					border-bottom: 0;
+					border-top: solid 1px rgba(255, 255, 255, 0.05);
+					color: #888;
+					display: block;
+					height: 48px;
+					line-height: 48px;
+					padding: 0 1em 0 1em;
+					text-decoration: none;
+				}
+
+					#navPanel .link:first-child {
+						border-top: 0;
+					}
+
+					#navPanel .link.depth-0 {
+						color: #fff;
+					}
+
+					#navPanel .link .indent-1 {
+						display: inline-block;
+						width: 1em;
+					}
+
+					#navPanel .link .indent-2 {
+						display: inline-block;
+						width: 2em;
+					}
+
+					#navPanel .link .indent-3 {
+						display: inline-block;
+						width: 3em;
+					}
+
+					#navPanel .link .indent-4 {
+						display: inline-block;
+						width: 4em;
+					}
+
+					#navPanel .link .indent-5 {
+						display: inline-block;
+						width: 5em;
+					}
+
+			body.navPanel-visible #page-wrapper {
+				-moz-transform: translateX(275px);
+				-webkit-transform: translateX(275px);
+				-ms-transform: translateX(275px);
+				transform: translateX(275px);
+			}
+
+			body.navPanel-visible #titleBar {
+				-moz-transform: translateX(275px);
+				-webkit-transform: translateX(275px);
+				-ms-transform: translateX(275px);
+				transform: translateX(275px);
+			}
+
+			body.navPanel-visible #navPanel {
+				-moz-transform: translateX(0);
+				-webkit-transform: translateX(0);
+				-ms-transform: translateX(0);
+				transform: translateX(0);
+			}
+
+	}
+
+/* Mobile */
+
+	@media screen and (max-width: 736px) {
+
+		/* Basic */
+
+			body, input, select, textarea {
+				font-size: 11pt;
+				line-height: 1.35em;
+			}
+
+			h2 {
+				font-size: 1.25em;
+				letter-spacing: 0;
+				line-height: 1.35em;
+			}
+
+			h3 {
+				font-size: 1em;
+				letter-spacing: 0;
+				line-height: 1.35em;
+			}
+
+			header p {
+				margin-top: -0.5em;
+				font-size: 1em;
+			}
+
+			header.major {
+				padding: 0 20px;
+			}
+
+				header.major h2 {
+					font-size: 1.25em;
+				}
+
+				header.major p {
+					top: 0;
+					margin-top: 1.25em;
+					font-size: 1em;
+				}
+
+		/* Lists */
+
+			ul.menu li {
+				border: 0;
+				padding: 0;
+				margin: 0;
+				display: block;
+				line-height: 2em;
+			}
+
+		/* Banner */
+
+			#banner {
+				height: 18em;
+			}
+
+		/* Wrapper */
+
+			.wrapper {
+				padding: 2em 0 1px 0;
+			}
+
+	}
+
+/* Mobile (Portrait) */
+
+	@media screen and (max-width: 480px) {
+
+		/* Lists */
+
+			ul.actions li {
+				display: block;
+				padding: 1.5em 0 0 0;
+			}
+
+				ul.actions li:first-child {
+					padding: 0;
+				}
+
+		/* Icon */
+
+			.icon.major {
+				width: 4em;
+				height: 4em;
+				line-height: 4em;
+				box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
+			}
+
+				.icon.major:before {
+					font-size: 24px;
+				}
+
+		/* Button */
+
+			input[type="submit"],
+			input[type="reset"],
+			input[type="button"],
+			.button {
+				width: 100%;
+				display: block;
+			}
+
+		/* Box */
+
+			.box.highlight {
+				/*padding-left: calc(4em + 30px);*/
+                padding-left: 0;
+			}
+
+			.box.post .inner {
+				margin-left: calc(30% + 20px);
+			}
+
+			.box.post .image {
+				width: 30%;
+			}
+
+		/* Banner */
+
+			#banner {
+				height: 20em;
+			}
+
+				#banner header {
+					padding: 20px;
+				}
+
+		/* Wrapper */
+
+			.wrapper {
+				padding: 2em 20px 1px 20px;
+			}
+
+		/* CTA */
+
+			#cta {
+				padding: 20px;
+			}
+
+		/* Footer */
+
+			#footer {
+				padding: 10px;
+				text-align: left;
+			}
+
+			#footer img{
+				height: 40px;
+			}
+
+	}
+
+.img-link {
+  border-bottom: none;
+  width: fit-content;
+}
+
+.inline {
+  display: inline-block;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.divider {
+  width: 80%;
+}
+
+.example-img {
+    width: 75%;
+    min-width: 200px;
+}
+
+@media screen and (max-width: 840px) {
+    #nav {
+        display: none;
+    }
+
+    .flex-row {
+        display: block;
+    }
+}
+
+/*
+.img-link img {
+  transition: height 0.25s;
+  height: 200px;
+}
+
+.img-link img:hover {
+  height: 225px;
+  box-shadow: 0px 0px 7px 7px #37c0fb;
+}
+*/
diff --git a/docs/assets/img/logo.png b/docs/assets/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..7da3b10f29df6464d334f4241022f94e0d8824da
GIT binary patch
literal 1004
zcmV<I0~7pGNk&HG0{{S5MM6+kP&iE30{{RoV!#&=H-ffp+t6D*W-U7P|1)z0+eVTU
z_3@tfZ@&5Y2gb}Sv~AmlV?3r~*Y^Jx%_g#KC#Su)`cjaDBsz3ZX2c*M=a|6j{tv^3
z5eC@cf&m7Y;e`P%*bL%Km6dG-1t&L49pqv+=dRrBB}!!1`PfT7c1SeMpmiF2@Cz|8
zLQ!DYFv74a=}!!mp%NxNOtMtM%`QKGfV!>iO=IViGsJNjAN%y)NzaQBScVUnK6C%~
zqz^1U<dwe>{ht7fGk7K(1?Aq3PG(rr%_HDeyy6j7!(YEyt)A(75^q(!|MDYE)2My;
zk%|#}{XOlC*N30!6j~=M`H;$AKfZaRiU0d1>UfiipI)v+MSmJm#mgVw_gAalD1A=T
zH2wZ^6|+}qnx@}huA=t)zyJRG*V|`9pGPPM;7H-5IsoV*#{de7L+L~gPy=w0xV!gn
zT>uAwLv+ln?(xaL4^aha%M5;g?Bc)xszH^t1qNny5C>UL2cR5M!Y`Sbk2wI8LGGXY
z$517U?GP#ebbSno#5x1u)Lq~D*KQC4DEgdaCF*hjjkfzI|9%)10Lq@@DbxV4G3ast
zISZ}i`se_li2!vu0OZa&R|u8{HUL}<h+Kw#=Uh#L0Tgkd?r1Y$Z;vgV48TTW%yZD5
zg9^YQb~%75atr`%+`2sgOK~d!po&`w0G49b=J1<{H6_G~B2~F^54oaPS@c&Fy}Y47
zcaQ$VKkr05iZ>6B{@vZ9f2Sm`Xz-xQs;tJd#j&9i2k9Lr?Ei{0cqSbA-J$GACBu?#
z9&!ZSR5lmJ{IXWzf?O`P8g@q9O=M?GqG2H|)$O+4M%SgboiUe+wli-|+7`wv6wz*;
z{JJJ0+HAH$!yKL7?aUaHyr9kk*f(*S8Gk_~{Jn<xX0uu9+88mROn`=7O<QSBdm$Tb
zJqfz-W?OPXHQI}Lk|Z-@E|RUL7mFnMZAV0vwI$PNVq(mOLXHqzSy$L5dPl%%stQ}w
z`kbx<{5onKM5~2eI|WvjVLt`R1b5or4*&blZvucx)ESUDIxXNIQzBv}e^4DF>n6g5
zwH5UbqK3sIkh9#<G-~)ROfLhLhU?3PEN+nFmJ2o}wR4TMSuA&6lL5$^cyu`cR7CXR
z!Wd)L<TE!kaC#16M>IG7OgM3RR$`(=FdH?Q9X?JWb$v6^(IDV{geLPUBD(ZumrBS6
zs7IjIIoFcETP&6@NDHxC0wwzmjiE76uLB$nKSLdJ^bP<rj+=v@#mx%f2n0N>of?l*
a3kRAS9Rlo|KB@~_GEFaZkK*%j2G0VOx75}E

literal 0
HcmV?d00001

diff --git a/docs/assets/img/plotly.png b/docs/assets/img/plotly.png
new file mode 100644
index 0000000000000000000000000000000000000000..574e4eeeaf22a32b77e7a302f41b2bccc8e562ff
GIT binary patch
literal 7002
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
HHj)1YfQ5(|

literal 0
HcmV?d00001

diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..86ce72642b4bfa48a96923b80802b8e73c5218aa
GIT binary patch
literal 7358
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
D2k{}*

literal 0
HcmV?d00001

diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..39ec9af
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+	Arcana by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+
+<html>
+  <head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-76450307-1"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag(){dataLayer.push(arguments);}
+			gtag('js', new Date());
+
+			gtag('config', 'UA-76450307-1');
+		</script>
+
+		<title>glue-plotly: Plot.ly Plugin For glue</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" href="favicon.ico">
+		<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
+		<link rel="stylesheet" href="assets/css/main.css" />
+  </head>
+
+  <body>
+    <div id="header">
+      <img height=50 src="assets/img/logo.png">
+      <h1 id="logo">glue-plotly</h1>
+      <img height=50 src="assets/img/plotly.png">
+    </div>
+
+    <nav id="nav">
+      <ul>
+        <li><a href="#overview">Overview</a></li>
+        <li><a href="#quickstart">Quickstart</a></li>
+        <li><a href="#html-exporters">HTML Exporters</a></li>
+        <li><a href="#chart-studio">Chart Studio</a></li>
+        <li><a href="#viewers">Viewers</a></li>
+      </ul>
+    </nav>
+
+    <section id="overview" class="nav-item container">
+      <h2>Overview</h2>
+      <p>glue-plotly is a plugin for the <a href="https://glueviz.org">glue</a> visualization software which connections glue to <a href="https://plotly.com/">Plotly</a>. This consists of three main pieces of functionality:
+      <div class="row 200%">
+        <section class="4u (12u narrower)">
+          <div class="box highlight">
+            <h3>Standalone HTML Exporters</h3>
+            <p>Export glue viewers directly to interactive Plotly HTML pages. Exported HTML is completely standalone and can be used with any static file hosting service, to allow easily sharing interactive figures with your audience.</p>
+
+          </div>
+        </section>
+
+        <section class="4u 12u(narrower)">
+          <div class="box highlight">
+            <h3>Chart Studio Exporter</h3>
+            <p>Export a Qt glue session to Plotly's <a href="https://chart-studio.plotly.com">Chart Studio</a></p>
+          </div>
+        </section>
+
+        <section class="4u 12u(narrower)">
+          <div class="box highlight">
+            <h3>Viewers</h3>
+            <p>Two experimental Plotly-powered viewers which can be used with glue-jupyter: a scatter viewer and a histogram viewer. See the examples below for guidance on how to use these in your project.</p>
+          </div>
+        </section>
+      </div>
+    </section>
+
+    <hr class="divider">
+
+    <section id="quickstart" class="nav-item container">
+      <h2>Quickstart</h2>
+      <p>glue-plotly is installable via pip via the command below. Once installed, see the following sections for information on how to access the exporters and viewers.</p>
+      <p><code>pip install glue-plotly</code><span class="icon fa-copy"></p>
+      <p>For developers, you can find the source code on our <a href="https://github.com/glue-viz/glue-plotly">GitHub repository</a>.</p>
+    </section>
+
+    <hr class="divider">
+
+    <section id="html-exporters" class="nav-item container">
+      <h2>HTML Exporters</h2>
+      <p>The HTML exporters are exposed as viewer tools in both the Qt and Jupyter versions of glue.</p>
+      <p>For Qt glue, the exporters are located in the "save" tool menu:</p>
+      <img src="assets/img/QtToolbarExport.gif">
+      <p>The Jupyter glue viewers don't yet support subtools, so the Plotly exporters are top-level tools in the toolbar:</p>
+      <img src="assets/img/BqplotToolbarHighlighted.png">
+      <p>HTML export is supported for a variety of glue viewers:</p>
+      <ul>
+        <li>All built-in viewers in Qt glue: scatter, histogram, profile, image, dendrogram, and table</li>
+        <li>The 3D scatter and volume viewers from <a href="https://docs.glueviz.org/en/stable/gui_guide/3d_viewers.html">glue-vispy-viewers</a></li>
+        <li>Several of the glue-jupyter bqplot viewers: scatter, image, profile, and histogram</li>
+      </ul>
+    </section>
+
+    <section id="chart-studio" class="nav-item container">
+      <h2>Chart Studio Exporter</h2>
+      <p>The Chart Studio exporter allows exporting a Qt glue session to Chart Studio, provided that all of the viewers in the session are supported. Currently, we support the following Qt viewers: scatter, histogram, profile, and dendrogram.</p>
+      <p>To access the exporter in Qt glue, navigate to File &gt; Advanced Exporters &gt; Plotly</p>
+      <img src="assets/img/QtChartStudioExport.gif">
+    </section>
+
+    <section id="viewers" class="nav-item container">
+      <h2>Viewers</h2>
+      <p>glue-plotly contains two experimental Plotly-powered viewers for use with glue-jupyter: a scatter viewer and a histogram viewer. If you're working with integral data, we also provide the ability to visualize histograms as dotplots.</p>
+      <p>For examples of using these, see <a href="PlotlyViewerExample.ipynb">this notebook</a>, which demonstrates necessary imports, viewer creation, and manipulating viewer options.</p>
+    </section>
+  </body>
+
+</html>

From 716dbbd024e7fbf196ab94f9d13cbc5e87108781 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Nov 2024 15:51:31 -0500
Subject: [PATCH 4/5] Remove checkpoint file.

---
 .../PlotlyViewerExample-checkpoint.ipynb      | 404 ------------------
 1 file changed, 404 deletions(-)
 delete mode 100644 docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb

diff --git a/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb b/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb
deleted file mode 100644
index c6620a1..0000000
--- a/docs/.ipynb_checkpoints/PlotlyViewerExample-checkpoint.ipynb
+++ /dev/null
@@ -1,404 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "id": "d5103242-a264-4f98-a168-ab40087f8c0c",
-   "metadata": {},
-   "source": [
-    "# Plotly Viewer Examples\n",
-    "This notebook contains examples of how to use the viewers provided by the `glue-plotly` package"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "9101e7af-1a3a-4152-b43f-829c52a3d166",
-   "metadata": {},
-   "source": [
-    "### Imports"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from glue.core import Data\n",
-    "from glue_jupyter import jglue\n",
-    "from glue_plotly.viewers.histogram.viewer import PlotlyHistogramView\n",
-    "from glue_plotly.viewers.scatter.viewer import PlotlyScatterView"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "c015dc70-746f-415b-853f-c31ea92cff67",
-   "metadata": {},
-   "source": [
-    "Create a glue-jupyter application and session"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 2,
-   "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "app = jglue()\n",
-    "session = app.session\n",
-    "dc = app.session.data_collection"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "7d6adbc6-93b8-4a0e-8505-83ef23fb2f6b",
-   "metadata": {},
-   "source": [
-    "Create some random data to use, and do a bit of styling"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 3,
-   "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from random import randint\n",
-    "x = [randint(0, 100) for _ in range(100)]\n",
-    "y = [randint(300, 400) for _ in range(100)]\n",
-    "data = Data(label='data', x=x, y=y)\n",
-    "dc.append(data)\n",
-    "data.style.color = \"#0000ff\"\n",
-    "data.style.markersize = 6"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 4,
-   "id": "92745ee0-25bf-455a-b022-045059fa8e19",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "x2 = [randint(0, 100) for _ in range(100)]\n",
-    "y2 = [randint(300, 400) for _ in range(100)]\n",
-    "data2 = Data(label='data2', x=x2, y=y2)\n",
-    "dc.append(data2)\n",
-    "app.add_link(data, 'x', data2, 'x')\n",
-    "app.add_link(data, 'y', data2, 'y')\n",
-    "data.style.color = \"#0000ff\"\n",
-    "data.style.markersize = 6"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "2c520488-472c-4c43-8f29-3ae91fe41c13",
-   "metadata": {},
-   "source": [
-    "### Create a Plotly Scatter Viewer"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "29dfa73fb7554c97a66b58cd2cafee9d",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
-    "# Alternatively, you can use the viewer class:\n",
-    "# viewer = app.new_data_viewer(PlotlyScatterView, data=data)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 6,
-   "id": "cbeeb763-daf0-4828-8535-f05f97ec856f",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "True"
-      ]
-     },
-     "execution_count": 6,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.add_data(data2)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 7,
-   "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "(PlotlyScatterLayerArtist for data, PlotlyScatterLayerArtist for data2)"
-      ]
-     },
-     "execution_count": 7,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.layers"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "143236d3-446b-4286-b24c-a9511204b970",
-   "metadata": {},
-   "source": [
-    "### Create a Plotly Histogram Viewer"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 8,
-   "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "2"
-      ]
-     },
-     "execution_count": 8,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.layers[1].state.zorder"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 9,
-   "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7ea50b1df9e445f9a1411deb973b0a2d",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
-    "# Alternatively, you can use the viewer class:\n",
-    "# viewer = app.new_data_viewer(PlotlyHistogramView, data=data)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "26be6106-c61a-4d84-82e3-136ccfcee588",
-   "metadata": {},
-   "source": [
-    "You can adjust whether there are gaps between the bars and, if so, what fraction of the plot they occupy"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 10,
-   "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "histogram_viewer.state.gaps = True\n",
-    "histogram_viewer.state.gap_fraction = 0.15"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "588347a7-8f4d-4f47-9838-a4a2e4106b02",
-   "metadata": {},
-   "source": [
-    "### Dotplot Viewer\n",
-    "`glue-plotly` provides an alternate layer artist for the histogram viewer that displays data as a dotplot. While we don't offer a built-in viewer that uses this functionality, you can use the simple implementation below as a starting point if you're interested in using dotplots."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "9e25e894-bab1-4b21-a744-dcc5f9bc435d",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from echo import delay_callback\n",
-    "from glue.config import viewer_tool\n",
-    "from glue_plotly.tools import PlotlyHZoomMode\n",
-    "\n",
-    "@viewer_tool\n",
-    "class BinningHZoom(PlotlyHZoomMode):\n",
-    "    tool_id = \"plotly:binhzoom\"\n",
-    "\n",
-    "    def _on_selection(self, trace, points, selector):\n",
-    "        xmin, xmax = selector.xrange\n",
-    "        viewer_state = self.viewer.state\n",
-    "        with self.viewer.figure.batch_update(), delay_callback(viewer_state, 'x_min', 'x_max'):\n",
-    "            viewer_state.x_min = xmin\n",
-    "            viewer_state.x_max = xmax\n",
-    "        self.viewer.state.update_bins_to_view()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 13,
-   "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from glue_plotly.viewers.histogram.dotplot_layer_artist import PlotlyDotplotLayerArtist\n",
-    "\n",
-    "class DotplotViewer(PlotlyHistogramView):\n",
-    "\n",
-    "    tools = [\"plotly:binhzoom\"]\n",
-    "    _data_artist_cls = PlotlyDotplotLayerArtist\n",
-    "    _subset_artist_cls = PlotlyDotplotLayerArtist"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 90,
-   "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "27676accc4b5461a97107c505ad28d2b",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 91,
-   "id": "26492697-440b-4df0-9624-a6cd3637f1cb",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 69,
-   "id": "11a75918-ed42-410a-8581-7a311ef9718c",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 86,
-   "id": "261850e6-1463-4f09-a451-b484f2551fc9",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "class DummySelector:\n",
-    "    xrange = []\n",
-    "\n",
-    "selector = DummySelector()\n",
-    "selector.xrange = [20, 30]\n",
-    "tool._on_selection(tool, None, None, selector)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 100,
-   "id": "ed78d034-9ec2-4e56-a481-f7578f0f7e3a",
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "20.648957158962798 32.37387260428411\n",
-      "[22 26 24 25 30 31 29 31 30 23 22 23 26]\n"
-     ]
-    }
-   ],
-   "source": [
-    "# Check that the dotplot is displaying the correct values\n",
-    "values = dotplot_viewer.layers[0].layer[dotplot_viewer.state.x_att]\n",
-    "mask = (values >= dotplot_viewer.state.hist_x_min) & (values <= dotplot_viewer.state.hist_x_max)\n",
-    "print(dotplot_viewer.state.hist_x_min, dotplot_viewer.state.hist_x_max)\n",
-    "print(values[mask])"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "5abe0321-b28a-4ff7-a19a-9093eb8efa93",
-   "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.11.8"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}

From 01d828d470e69372a89b9265219e908a9df30ce9 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 12 Nov 2024 15:52:52 -0500
Subject: [PATCH 5/5] Update example notebook.

---
 docs/PlotlyViewerExample.ipynb            | 139 ++------
 docs/assets/img/PlotlyViewerExample.ipynb | 375 ----------------------
 2 files changed, 25 insertions(+), 489 deletions(-)
 delete mode 100644 docs/assets/img/PlotlyViewerExample.ipynb

diff --git a/docs/PlotlyViewerExample.ipynb b/docs/PlotlyViewerExample.ipynb
index 1bc281c..c0fe49c 100644
--- a/docs/PlotlyViewerExample.ipynb
+++ b/docs/PlotlyViewerExample.ipynb
@@ -19,7 +19,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
    "metadata": {},
    "outputs": [],
@@ -40,28 +40,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "['ipyvolume:lasso', 'ipyvolume:circle', 'ipyvolume:rectangle']\n"
-     ]
-    },
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "/home/jon/opt/mambaforge/envs/glue-plotly/lib/python3.11/site-packages/glue_qt/viewers/common/tool.py:5: UserWarning:\n",
-      "\n",
-      "glue.viewers.common.tool is deprecated, use glue.viewers.common.tool instead\n",
-      "\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "app = jglue()\n",
     "session = app.session\n",
@@ -78,7 +60,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 23,
+   "execution_count": null,
    "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
    "metadata": {},
    "outputs": [],
@@ -86,7 +68,7 @@
     "from random import randint\n",
     "x = [randint(0, 100) for _ in range(100)]\n",
     "y = [randint(300, 400) for _ in range(100)]\n",
-    "data = app.load_data(\"~/dev/glue/data/airplane/planes_truncated.csv\")\n",
+    "data = Data(label='data', x=x, y=y)\n",
     "dc.append(data)\n",
     "data.style.color = \"#0000ff\"\n",
     "data.style.markersize = 6"
@@ -94,7 +76,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": null,
    "id": "92745ee0-25bf-455a-b022-045059fa8e19",
    "metadata": {},
    "outputs": [],
@@ -119,25 +101,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": null,
    "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a086592611844e8d94a1c6623d35cb5a",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
     "# Alternatively, you can use the viewer class:\n",
@@ -146,33 +113,20 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 28,
-   "id": "d94774d4-3a68-4b7a-b7f2-7e79afead2b5",
+   "execution_count": null,
+   "id": "cbeeb763-daf0-4828-8535-f05f97ec856f",
    "metadata": {},
    "outputs": [],
    "source": [
-    "scatter_viewer.state.x_axislabel = \"Longitude\"\n",
-    "scatter_viewer.state.y_axislabel = \"Latitude\"\n",
-    "scatter_viewer.figure.layout.width = 900"
+    "scatter_viewer.add_data(data2)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": null,
    "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "(PlotlyScatterLayerArtist for My Data, PlotlyScatterLayerArtist for data2)"
-      ]
-     },
-     "execution_count": 7,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "scatter_viewer.layers"
    ]
@@ -187,46 +141,20 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": null,
    "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "2"
-      ]
-     },
-     "execution_count": 8,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "scatter_viewer.layers[1].state.zorder"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": null,
    "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e72117c63af0431a91224959cfdbf10b",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
     "# Alternatively, you can use the viewer class:\n",
@@ -243,15 +171,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 16,
+   "execution_count": null,
    "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
    "metadata": {},
    "outputs": [],
    "source": [
     "histogram_viewer.state.gaps = True\n",
-    "histogram_viewer.state.gap_fraction = 0.13\n",
-    "histogram_viewer.state.x_axislabel = \"Value\"\n",
-    "histogram_viewer.figure.layout.width = 900"
+    "histogram_viewer.state.gap_fraction = 0.15"
    ]
   },
   {
@@ -265,7 +191,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": null,
    "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
    "metadata": {},
    "outputs": [],
@@ -280,25 +206,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": null,
    "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "4aef2c287aca4be08ac525f96db1510e",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
    ]
@@ -314,9 +225,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "glue-plotly",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
-   "name": "glue-plotly"
+   "name": "python3"
   },
   "language_info": {
    "codemirror_mode": {
@@ -328,7 +239,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.4"
+   "version": "3.12.1"
   }
  },
  "nbformat": 4,
diff --git a/docs/assets/img/PlotlyViewerExample.ipynb b/docs/assets/img/PlotlyViewerExample.ipynb
deleted file mode 100644
index d231199..0000000
--- a/docs/assets/img/PlotlyViewerExample.ipynb
+++ /dev/null
@@ -1,375 +0,0 @@
-{
- "cells": [
-  {
-   "cell_type": "markdown",
-   "id": "d5103242-a264-4f98-a168-ab40087f8c0c",
-   "metadata": {},
-   "source": [
-    "# Plotly Viewer Examples\n",
-    "This notebook contains examples of how to use the viewers provided by the `glue-plotly` package"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "9101e7af-1a3a-4152-b43f-829c52a3d166",
-   "metadata": {},
-   "source": [
-    "### Imports"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "id": "75a31f1b-a32a-42ba-a016-f324faa9f3a7",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from glue.core import Data\n",
-    "from glue_jupyter import jglue\n",
-    "from glue_plotly.viewers.histogram.viewer import PlotlyHistogramView\n",
-    "from glue_plotly.viewers.scatter.viewer import PlotlyScatterView"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "c015dc70-746f-415b-853f-c31ea92cff67",
-   "metadata": {},
-   "source": [
-    "Create a glue-jupyter application and session"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 2,
-   "id": "0746adc6-dbe1-4f85-8690-da24458667c0",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "app = jglue()\n",
-    "session = app.session\n",
-    "dc = app.session.data_collection"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "7d6adbc6-93b8-4a0e-8505-83ef23fb2f6b",
-   "metadata": {},
-   "source": [
-    "Create some random data to use, and do a bit of styling"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 3,
-   "id": "95d749da-73c8-432a-9a23-85d37e1b6fb5",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from random import randint\n",
-    "x = [randint(0, 100) for _ in range(100)]\n",
-    "y = [randint(300, 400) for _ in range(100)]\n",
-    "data = Data(label='data', x=x, y=y)\n",
-    "dc.append(data)\n",
-    "data.style.color = \"#0000ff\"\n",
-    "data.style.markersize = 6"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 4,
-   "id": "92745ee0-25bf-455a-b022-045059fa8e19",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "x2 = [randint(0, 100) for _ in range(100)]\n",
-    "y2 = [randint(300, 400) for _ in range(100)]\n",
-    "data2 = Data(label='data2', x=x2, y=y2)\n",
-    "dc.append(data2)\n",
-    "app.add_link(data, 'x', data2, 'x')\n",
-    "app.add_link(data, 'y', data2, 'y')\n",
-    "data.style.color = \"#0000ff\"\n",
-    "data.style.markersize = 6"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "2c520488-472c-4c43-8f29-3ae91fe41c13",
-   "metadata": {},
-   "source": [
-    "### Create a Plotly Scatter Viewer"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "id": "cf42768e-6d31-4375-90ee-facd8d19800a",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "29dfa73fb7554c97a66b58cd2cafee9d",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "scatter_viewer = app.new_data_viewer(\"plotly_scatter\", data=data)\n",
-    "# Alternatively, you can use the viewer class:\n",
-    "# viewer = app.new_data_viewer(PlotlyScatterView, data=data)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 6,
-   "id": "cbeeb763-daf0-4828-8535-f05f97ec856f",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "True"
-      ]
-     },
-     "execution_count": 6,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.add_data(data2)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 7,
-   "id": "1355c76d-ad3d-4202-a08f-ee17b1facbd4",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "(PlotlyScatterLayerArtist for data, PlotlyScatterLayerArtist for data2)"
-      ]
-     },
-     "execution_count": 7,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.layers"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "143236d3-446b-4286-b24c-a9511204b970",
-   "metadata": {},
-   "source": [
-    "### Create a Plotly Histogram Viewer"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 8,
-   "id": "da0a70ee-f299-47cd-9eb0-9a634d983c02",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "2"
-      ]
-     },
-     "execution_count": 8,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "scatter_viewer.layers[1].state.zorder"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 9,
-   "id": "3e66be74-929f-4cfa-910c-9d3b65b4ac91",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7ea50b1df9e445f9a1411deb973b0a2d",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "histogram_viewer = app.new_data_viewer(\"plotly_histogram\", data=data)\n",
-    "# Alternatively, you can use the viewer class:\n",
-    "# viewer = app.new_data_viewer(PlotlyHistogramView, data=data)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "26be6106-c61a-4d84-82e3-136ccfcee588",
-   "metadata": {},
-   "source": [
-    "You can adjust whether there are gaps between the bars and, if so, what fraction of the plot they occupy"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 10,
-   "id": "821b6397-80e2-443c-b6c3-50bf954abbf2",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "histogram_viewer.state.gaps = True\n",
-    "histogram_viewer.state.gap_fraction = 0.15"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "588347a7-8f4d-4f47-9838-a4a2e4106b02",
-   "metadata": {},
-   "source": [
-    "### Dotplot Viewer\n",
-    "`glue-plotly` provides an alternate layer artist for the histogram viewer that displays data as a dotplot. While we don't offer a built-in viewer that uses this functionality, you can use the simple implementation below as a starting point if you're interested in using dotplots."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 103,
-   "id": "9e25e894-bab1-4b21-a744-dcc5f9bc435d",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from echo import delay_callback\n",
-    "from glue.config import viewer_tool\n",
-    "from glue_plotly.viewers.common.tools import PlotlyHZoomMode\n",
-    "\n",
-    "@viewer_tool\n",
-    "class BinningHZoom(PlotlyHZoomMode):\n",
-    "    tool_id = \"plotly:binhzoom\"\n",
-    "\n",
-    "    def _on_selection(self, trace, points, selector):\n",
-    "        xmin, xmax = selector.xrange\n",
-    "        viewer_state = self.viewer.state\n",
-    "        with self.viewer.figure.batch_update(), delay_callback(viewer_state, 'x_min', 'x_max'):\n",
-    "            viewer_state.x_min = xmin\n",
-    "            viewer_state.x_max = xmax\n",
-    "        self.viewer.state.update_bins_to_view()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 104,
-   "id": "4f9d9ffe-ec2e-4d7f-aa8b-8b2a7524b9c2",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from glue_plotly.viewers.histogram.dotplot_layer_artist import PlotlyDotplotLayerArtist\n",
-    "\n",
-    "class DotplotViewer(PlotlyHistogramView):\n",
-    "\n",
-    "    tools = [\"plotly:binhzoom\"]\n",
-    "    _data_artist_cls = PlotlyDotplotLayerArtist\n",
-    "    _subset_artist_cls = PlotlyDotplotLayerArtist"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 105,
-   "id": "174cd945-0744-43dc-b23e-bcef244a0bff",
-   "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7c795aca0ca3468fabb86f8d090f4edf",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "LayoutWidget(controls={'toolbar_selection_tools': BasicJupyterToolbar(template=Template(template='<template>\\n…"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "dotplot_viewer = app.new_data_viewer(DotplotViewer, data=data)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 108,
-   "id": "ed78d034-9ec2-4e56-a481-f7578f0f7e3a",
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "27.638810597519733 33.05031003382187\n",
-      "[30 31 29 31 30 33]\n",
-      "6\n"
-     ]
-    }
-   ],
-   "source": [
-    "# Check that the dotplot is displaying the correct values\n",
-    "values = dotplot_viewer.layers[0].layer[dotplot_viewer.state.x_att]\n",
-    "mask = (values >= dotplot_viewer.state.hist_x_min) & (values <= dotplot_viewer.state.hist_x_max)\n",
-    "print(dotplot_viewer.state.hist_x_min, dotplot_viewer.state.hist_x_max)\n",
-    "print(values[mask])\n",
-    "print(len(values[mask]))"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "5abe0321-b28a-4ff7-a19a-9093eb8efa93",
-   "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.11.8"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
-}