{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# UpSet.js Jupyter Widget\n",
    "\n",
    "[UpSet.js](https://upset.js.org) is a JavaScript re-implementation of [UpSetR](https://www.rdocumentation.org/packages/UpSetR/) which itself is based on [UpSet](http://vcg.github.io/upset/about/). \n",
    "The core library is written in React but provides also bundle editions for plain JavaScript use and this Jupyter wrapper. \n",
    "\n",
    "In this tutorial the basic widget functionality is explained.\n",
    "\n",
    "Let's begin with importing the widget and some utilities"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import interact\n",
    "from upsetjs_jupyter_widget import UpSetJSWidget\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This wrapper is implemented in Python 3 with mypy typings and generics. The generic type `T` of the `UpSetJSWidget` is type of element that we wanna handle. In the following example we handle `str` elements."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "w = UpSetJSWidget[str]()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic User Interface\n",
    "\n",
    "**Note**: The input data will be described in more detail in the next section"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "59e86cd468b04c55a2e386bab5c60817",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'l'…"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dict_input = {'one': ['a', 'b', 'c', 'e', 'g', 'h', 'k', 'l', 'm'], 'two': ['a', 'b', 'd', 'e', 'j'], 'three': ['a', 'e', 'f', 'g', 'h', 'i', 'j', 'l', 'm']}\n",
    "w.from_dict(dict_input)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "An UpSet plot consists of three areas:\n",
    "\n",
    "- The bottom left area shows the list of sets as a vertical bar chart. The length of the bar corresponds to the cardinality of the set, i.e., the number of elements in this set. \n",
    "- The top right area shows the list of set intersections as a horiztonal bar chart. Again the length corresponds to the cardinality of the set\n",
    "- The bottom right area shows which intersection consists of which sets. A dark dot indicates that the set is part of this set intersection. The line connecting the dots is just to visually group the dots.\n",
    "\n",
    "Moving the mouse over a bar or a dot will automatically highlight the corresponding set or set intersection in orange. In addition, the number elements which are shared with the highlighted sets are also highlighted. This gives a quick overview how sets and set intersections are related to each other. More details, in the [Interaction](#intersection) section.\n",
    "\n",
    "In the bottom right corner there are two buttons for exporting the chart in either PNG or SVG image format."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Input Formats\n",
    "\n",
    "In the current version the UpSet.js wrapper supports three input data formats: `dictionary`, `expression` and through a Pandas `dataframe`.\n",
    "\n",
    "### Dictionary Input\n",
    "\n",
    "The first format is a dictionary of type `Dict[str, List[T]]`, `T` refers again to the elements type, in this case it is a list of `str`. The key of the dictionary entry is the set name while the value is the list of elements this set has."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df63a734a03b49a1a8af91640ab2987f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'h'…"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.from_dict({'one': ['a', 'b', 'c', 'e', 'g', 'h', 'k', 'l', 'm'], 'two': ['a', 'b', 'd', 'e', 'j'], 'three': ['a', 'e', 'f', 'g', 'h', 'i', 'j', 'l', 'm']})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Expression Input\n",
    "\n",
    "The second format is a mapping of type `Dict[str,number]`, i.e., it has to have an `.items() -> Iterator[Tuple[str, number]]` method. The key of the dictionary entry is the set combination name while the value is the number of elements in this sets. By default, the `&` is used to split a combination name in its individual sets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df63a734a03b49a1a8af91640ab2987f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems=set(…"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.from_expression({'one': 9, 'two': 5, 'three': 9, 'one&two': 3, 'one&three': 6, 'two&three': 3, 'one&two&three': 2})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Data Frame Input\n",
    "\n",
    "The last format is a a binary/boolean data frame. The index column contains the list of elements. Each regular color represents a sets with boolean values (e.g., 0 and 1) whether the row represented by the index value is part of the set or not.\n",
    "\n",
    "The following data frame defines the same set structure as the dictionary format before."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df63a734a03b49a1a8af91640ab2987f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'h'…"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df = pd.DataFrame(dict(\n",
    "    one=[1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1], \n",
    "    two=[1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0], \n",
    "    three=[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1]\n",
    "), index=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm'])\n",
    "w.from_dataframe(df)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic Attrributes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`.elems` returns the list of extracted elements"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm']"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.elems"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`.sets` returns the list of extracted sets as `UpSetSet` objects"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[UpSetSet(name=one, cardinality=9, elems={'h', 'a', 'm', 'b', 'k', 'c', 'g', 'l', 'e'}),\n",
       " UpSetSet(name=three, cardinality=9, elems={'i', 'h', 'f', 'a', 'm', 'j', 'g', 'l', 'e'}),\n",
       " UpSetSet(name=two, cardinality=5, elems={'b', 'j', 'd', 'a', 'e'})]"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.sets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Similariy, `.combinations` returns the list of set intersections that are visualized as `UpSetIntersection` objects. \n",
    "\n",
    "**Note**: the attribute is called `.combinations` instead of `.intersections` since one can customize the generation of the set combinations that are visualized. For example, one can also generate set unions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'h', 'a', 'm', 'b', 'k', 'c', 'g', 'l', 'e'}),\n",
       " UpSetSetIntersection(name=three, sets={'three'}, cardinality=9, elems={'i', 'h', 'f', 'a', 'm', 'j', 'g', 'l', 'e'}),\n",
       " UpSetSetIntersection(name=(one ∩ three), sets={'three', 'one'}, cardinality=6, elems={'m', 'h', 'g', 'a', 'l', 'e'}),\n",
       " UpSetSetIntersection(name=two, sets={'two'}, cardinality=5, elems={'b', 'j', 'd', 'a', 'e'}),\n",
       " UpSetSetIntersection(name=(one ∩ two), sets={'one', 'two'}, cardinality=3, elems={'b', 'a', 'e'}),\n",
       " UpSetSetIntersection(name=(two ∩ three), sets={'three', 'two'}, cardinality=3, elems={'a', 'j', 'e'}),\n",
       " UpSetSetIntersection(name=(one ∩ two ∩ three), sets={'three', 'one', 'two'}, cardinality=2, elems={'a', 'e'})]"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.combinations"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`.generate_intersections`, `.generate_distinct_intersections`, and `.generate_unions` let you customize the generation of the set combinations\n",
    "\n",
    " - `min_degree` ... minimum number of sets in a set combination\n",
    " - `max_degree` ... maximum number of sets in a set combination, `None` means no limit\n",
    " - `empty` ... include empty set combinations with no elements. By default they are not included\n",
    " - `order_by` ... sort set combinations either by `cardinality` (number of elements) or by `degree` (number of sets\n",
    " - `limit` ... show only the first `limit` set combinations"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "da867f70856d44b99e9b1c50e80440ce",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetDistinctIntersection(name=(one ∩ three), sets={'three', 'one'}…"
      ]
     },
     "execution_count": 17,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.copy().generate_distinct_intersections()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "837f8051b84e4db494c5c1121c0acc1f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=(one ∩ three), sets={'three', 'one'}, cardin…"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.copy().generate_intersections(min_degree=2, max_degree=None, empty=True, order_by=\"cardinality\", limit=None)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "85d69ac1d7734830ab71324854578c06",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetUnion(name=(), sets=set(), cardinality=13, elems={'i', 'h', 'd…"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.copy().generate_unions(min_degree=0, max_degree=2, empty=True, order_by=\"degree\", limit=None)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Interaction\n",
    "\n",
    "UpSet.js allows three intersection modes settable via `.mode`\n",
    "\n",
    "- `'hover'` (default) when the user hovers over a set or set intersection it will be highlighted. This is the default mode\n",
    "- `'click'` when the user clicks on a set or a set intersection, the selection will be updated\n",
    "- `'contextMenu'` when the user right clicks on a set or a set intersection, the selection will be updated\n",
    "- `'static'` disables interactivity"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df63a734a03b49a1a8af91640ab2987f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'h'…"
      ]
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.mode = 'click'\n",
    "w"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "with `.selection` one manually sets the selection that is currently highlighted. Manually setting the selection is only useful in `click` and `static` modes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "df63a734a03b49a1a8af91640ab2987f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value={'type': 'set', 'name': 'one'}, combinations=[UpSetSetIntersection(name=one, sets={'one'},…"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.selection = w.sets[0]\n",
    "w"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The current selection is synced with the server. It is designed to work with the `interact` of the `ipywidgets` package. In the following example the current selected set will be automatically written below the chart and updated interactivly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "25c1f9542f4747869dad2ede498fada9",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(UpSetJSWidget(value={'type': 'set', 'name': 'one'}, combinations=[UpSetSetIntersection(n…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<function __main__.selection_changed(s)>"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.mode = 'hover'\n",
    "def selection_changed(s):\n",
    "    return s # s[\"name\"] if s else None\n",
    "interact(selection_changed, s=w)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Queries\n",
    "\n",
    "besides the selection UpSet.js supports defining queries. A query can be a list of elements or a set that should be highlighted. A query consists of a name, a color, and either the list of elements or the set (combination) to highlight."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c6930196c86f45f7986a3a2f85d86a94",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'h'…"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "wq = w.copy()\n",
    "wq.mode = 'static'\n",
    "wq.selection = None\n",
    "wq.append_query('Q1', color='red', elems=['a', 'b', 'c'])\n",
    "wq.append_query('Q1', color='blue', upset=wq.sets[1])\n",
    "wq"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Attributes\n",
    "\n",
    "UpSet.js supports rendering boxplots as aggregations for numerical attributes and mosaic plots for categorical attributes of elements. The are given as part of the data frame. The attributes element can either have a list of column names or a data frame with the same index"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "875d119236be401dbbf74584586da706",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, attrs=[<upsetjs_jupyter_widget._model.UpSetAttribute object at 0x000001B561E077F0>],…"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_a = pd.DataFrame(dict(\n",
    "    one=[1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1], \n",
    "    two=[1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0], \n",
    "    three=[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1],\n",
    "    attr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]\n",
    "), index=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm'])\n",
    "wa = w.copy()\n",
    "wa.from_dataframe(df_a, attributes=['attr'])\n",
    "wa"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b7c5102cb09d4d6eb30e86aebceeb11a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, attrs=[<upsetjs_jupyter_widget._model.UpSetAttribute object at 0x00000187E06E3D68>, …"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_c = pd.DataFrame(dict(\n",
    "    one=[1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1], \n",
    "    two=[1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0], \n",
    "    three=[1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1],\n",
    "    attr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],\n",
    "    attr2=['a', 'a', 'b', 'b', 'b', 'a', 'b', 'a', 'a', 'b', 'b', 'b', 'a']\n",
    "), index=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm'])\n",
    "wa = w.copy()\n",
    "wa.from_dataframe(df_c, attributes=['attr', 'attr2'])\n",
    "wa"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Styling\n",
    "\n",
    "### Theme\n",
    "\n",
    "UpSet.js supports three themes: `light`, `dark`, and `vega`. The theme can be set by the `.theme` property. Besides themes one can customize various aspects of the style, see also https://upset.js.org/api/jupyter/ for the API doc"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ae63a648329645a196b4a84fc3adf5cb",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, cardinality=9, elems={'l'…"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w_dark = w.copy()\n",
    "w_dark.theme = 'dark'\n",
    "w_dark"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Labels"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "72eb513ca31e40d78eaf09a397bc90b7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combination_name='Combination Label', combinations=[UpSetSetIntersection(name=one, s…"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w_label = w.copy()\n",
    "w_label.title = 'Chart Title'\n",
    "w_label.description = 'a long chart description'\n",
    "w_label.set_name = 'Set Label'\n",
    "w_label.combination_name = 'Combination Label'\n",
    "w_label"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Log Scale\n",
    "\n",
    "setting `.numerical_scale = 'log'` switches to a log scale, similarly `'linear'` goes back to a linear scale"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "14dc69bde3b141d0bfa34c7f7614561a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, elems={'m', 'l', 'g', 'c'…"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w_log = w.copy()\n",
    "w_log.numeric_scale = 'log'\n",
    "w_log"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Size\n",
    "\n",
    "the `.width` and `.height` properties can be used to specify the width and height of the chart respectively. In general, the `.layout` of the Jupyter Widgets can be used to customize it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5736d3ead6e247b7bf2d2ecee81147c1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "UpSetJSWidget(value=None, combinations=[UpSetSetIntersection(name=one, sets={'one'}, elems={'m', 'l', 'g', 'c'…"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "w.height = 600\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.7.1 64-bit ('upsetjs_jupyter_widget': pipenv)",
   "language": "python",
   "name": "python37164bitupsetjsjupyterwidgetpipenvfee1645c874046dc9f0c363432ab7182"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.1"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "22717c74a91045a8a5e0991ae0843d96": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "40ce9b97b8d44d26ad099a1d108f97ee": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "59e86cd468b04c55a2e386bab5c60817": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": false,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "set_names": [
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "set_names": [
          "three"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 6,
         "color": null,
         "degree": 2,
         "elems": [
          11,
          12,
          0,
          6,
          4,
          7
         ],
         "name": "(one ∩ three)",
         "set_names": [
          "three",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 5,
         "color": null,
         "degree": 1,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "set_names": [
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          1
         ],
         "name": "(one ∩ two)",
         "set_names": [
          "two",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          9
         ],
         "name": "(two ∩ three)",
         "set_names": [
          "three",
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 2,
         "color": null,
         "degree": 3,
         "elems": [
          4,
          0
         ],
         "name": "(one ∩ two ∩ three)",
         "set_names": [
          "three",
          "two",
          "one"
         ],
         "type": "intersection"
        }
       ],
       "description": null,
       "dot_padding": null,
       "elems": [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m"
       ],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_90cf9fe26d284c2c9f688602647000f5",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "type": "set"
        },
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "type": "set"
        },
        {
         "cardinality": 5,
         "color": null,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "type": "set"
        }
       ],
       "text_color": null,
       "theme": "light",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "7b9adc9b03224128817bf2103a3c3559": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": null,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [],
       "description": null,
       "dot_padding": null,
       "elems": [],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_901ed7771196404bae70bf5fddf259b6",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [],
       "text_color": null,
       "theme": "light",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "82025d7e6b914502909e10f1c68e4062": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": null,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [],
       "description": null,
       "dot_padding": null,
       "elems": [],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_c01f270192cc41e9a104e8ccd82a0f99",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [],
       "text_color": null,
       "theme": "dark",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "901ed7771196404bae70bf5fddf259b6": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "90cf9fe26d284c2c9f688602647000f5": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "ae63a648329645a196b4a84fc3adf5cb": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": false,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "set_names": [
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "set_names": [
          "three"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 6,
         "color": null,
         "degree": 2,
         "elems": [
          11,
          12,
          0,
          6,
          4,
          7
         ],
         "name": "(one ∩ three)",
         "set_names": [
          "three",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 5,
         "color": null,
         "degree": 1,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "set_names": [
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          1
         ],
         "name": "(one ∩ two)",
         "set_names": [
          "two",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          9
         ],
         "name": "(two ∩ three)",
         "set_names": [
          "three",
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 2,
         "color": null,
         "degree": 3,
         "elems": [
          4,
          0
         ],
         "name": "(one ∩ two ∩ three)",
         "set_names": [
          "three",
          "two",
          "one"
         ],
         "type": "intersection"
        }
       ],
       "description": null,
       "dot_padding": null,
       "elems": [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m"
       ],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_eb501da0bdd544ef8b5e5d77deb2ae28",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "type": "set"
        },
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "type": "set"
        },
        {
         "cardinality": 5,
         "color": null,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "type": "set"
        }
       ],
       "text_color": null,
       "theme": "dark",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "b7c5102cb09d4d6eb30e86aebceeb11a": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": false,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [
        {
         "domain": [
          1,
          13
         ],
         "elems": null,
         "name": "attr",
         "type": "number",
         "values": [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13
         ]
        },
        {
         "categories": [
          "a",
          "b"
         ],
         "elems": null,
         "name": "attr2",
         "type": "categorical",
         "values": [
          "a",
          "a",
          "b",
          "b",
          "b",
          "a",
          "b",
          "a",
          "a",
          "b",
          "b",
          "b",
          "a"
         ]
        }
       ],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "set_names": [
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 9,
         "color": null,
         "degree": 1,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "set_names": [
          "three"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 6,
         "color": null,
         "degree": 2,
         "elems": [
          11,
          12,
          0,
          6,
          4,
          7
         ],
         "name": "(one ∩ three)",
         "set_names": [
          "three",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 5,
         "color": null,
         "degree": 1,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "set_names": [
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          1
         ],
         "name": "(one ∩ two)",
         "set_names": [
          "two",
          "one"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 3,
         "color": null,
         "degree": 2,
         "elems": [
          4,
          0,
          9
         ],
         "name": "(two ∩ three)",
         "set_names": [
          "three",
          "two"
         ],
         "type": "intersection"
        },
        {
         "cardinality": 2,
         "color": null,
         "degree": 3,
         "elems": [
          4,
          0
         ],
         "name": "(one ∩ two ∩ three)",
         "set_names": [
          "three",
          "two",
          "one"
         ],
         "type": "intersection"
        }
       ],
       "description": null,
       "dot_padding": null,
       "elems": [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m"
       ],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_22717c74a91045a8a5e0991ae0843d96",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          12,
          1,
          0,
          2,
          6,
          4,
          10,
          7
         ],
         "name": "one",
         "type": "set"
        },
        {
         "cardinality": 9,
         "color": null,
         "elems": [
          11,
          9,
          8,
          12,
          0,
          5,
          6,
          4,
          7
         ],
         "name": "three",
         "type": "set"
        },
        {
         "cardinality": 5,
         "color": null,
         "elems": [
          9,
          3,
          0,
          1,
          4
         ],
         "name": "two",
         "type": "set"
        }
       ],
       "text_color": null,
       "theme": "light",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "be107fc517d14c9db6fdc6c1d325df76": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": null,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [],
       "description": null,
       "dot_padding": null,
       "elems": [],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_fbaf0387f92248bbb4a34746f58934c8",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [],
       "text_color": null,
       "theme": "light",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "c01f270192cc41e9a104e8ccd82a0f99": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "eb501da0bdd544ef8b5e5d77deb2ae28": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "eb677f32e2c04a23bf1189d19718bb27": {
      "model_module": "@upsetjs/jupyter_widget",
      "model_module_version": "^1.6.0",
      "model_name": "UpSetModel",
      "state": {
       "_expression_data": null,
       "_model_module_version": "^1.6.0",
       "_render_mode": "upset",
       "_view_module_version": "^1.6.0",
       "alternating_background_color": null,
       "attrs": [],
       "band_scale": "band",
       "bar_label_offset": null,
       "bar_padding": null,
       "color": null,
       "combination_name": null,
       "combination_name_axis_offset": null,
       "combinations": [],
       "description": null,
       "dot_padding": null,
       "elems": [],
       "export_buttons": null,
       "font_family": null,
       "font_sizes": {},
       "has_selection_color": null,
       "has_selection_opacity": null,
       "height_ratios": [
        0.6,
        0.4
       ],
       "hover_hint_color": null,
       "layout": "IPY_MODEL_40ce9b97b8d44d26ad099a1d108f97ee",
       "mode": "hover",
       "not_member_color": null,
       "numeric_scale": "linear",
       "opacity": null,
       "padding": null,
       "queries": [],
       "query_legend": null,
       "selection_color": null,
       "set_name": null,
       "set_name_axis_offset": null,
       "sets": [],
       "text_color": null,
       "theme": "dark",
       "title": null,
       "value": null,
       "width_ratios": [
        0.25,
        0.1,
        0.65
       ]
      }
     },
     "fbaf0387f92248bbb4a34746f58934c8": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "2.0.0",
      "model_name": "LayoutModel",
      "state": {
       "align_self": "stretch",
       "height": "400px"
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}