Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save fomightez/5a9b96d5d9a50e96a3ab35e8e9ef1c1b to your computer and use it in GitHub Desktop.
Save fomightez/5a9b96d5d9a50e96a3ab35e8e9ef1c1b to your computer and use it in GitHub Desktop.
For SO question about viewing tabs in HTML embedded using ipywidgets, see [here](https://stackoverflow.com/q/78256901/8508004)
{
"cells": [
{
"cell_type": "markdown",
"id": "feac3b84-d568-4687-a09d-8e3d8a74342f",
"metadata": {},
"source": [
"### For SO question about viewing tabs in HTML embedded using ipywidgets\n",
"\n",
"See [here](https://stackoverflow.com/q/78256901/8508004)"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "a3821054-aafe-439c-b464-147314cc8dc3",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "2ee5d76526c3452281d18018017d421d",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Tab(children=(HTML(value='\\n<H4>Statistical Description</H4>\\n<style type=\"text/css\">\\n#T_bf458_row0_col0, #T_…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import ipywidgets as widgets\n",
"from ipywidgets.embed import embed_minimal_html\n",
"\n",
"# ----------- EXTRA TO MAKE MRE-------------------------------------------\n",
"# OP didn't supply MRE so make two dataframes \n",
"from random import choices \n",
"import pandas as pd\n",
"from datetime import date, timedelta\n",
"books = [\"Book_1\",\"Book_2\",\"Book_3\",\"Book_4\",\"Book_5\"]\n",
"counterparties = [\"Counterparty_1\",\"Counterparty_2\",\"Counterparty_3\",\"Counterparty_4\",\"Counterparty_5\"]\n",
"\n",
"book = choices(books, k = 100)\n",
"counterparty = choices(counterparties, k = 100)\n",
"\n",
"date1, date2 = date(2018, 8, 1), date(2023, 8, 3)\n",
"res_dates = [date1]\n",
" \n",
"while date1 != date2:\n",
" date1 += timedelta(days=1)\n",
" res_dates.append(date1)\n",
" \n",
"ldd = choices(res_dates, k=100)\n",
"dict = {'book': book, 'counterparty': counterparty, 'last_trading_date': ldd} \n",
"\n",
"data = pd.DataFrame(dict)\n",
"data['last_trading_date'] = pd.to_datetime(data['last_trading_date'], format = '%Y-%m-%d').dt.date\n",
"\n",
"import pandas as pd\n",
"import numpy as np\n",
"data2 = pd.DataFrame(np.random.randn(10, 4)) # from http://pandas.pydata.org/pandas-docs/stable/10min.html\n",
"# -----------END OF EXTRA TO MAKE MRE---------------------------------------\n",
"\n",
"def make_summary_display_html(df):\n",
" #return df.describe().to_html() # based on https://stackoverflow.com/q/43976830/8508004\n",
" return df.describe().style.background_gradient().to_html() # based on https://stackoverflow.com/q/43976830/8508004 and https://github.com/dexplo/dataframe_image\n",
"\n",
"\n",
"tab_nest = widgets.Tab()\n",
"#tab_nest.children = [summary_display(data), summary_display(data2)]\n",
"a = widgets.HTML(\n",
" value='\\n<H4>Statistical Description</H4>\\n' + make_summary_display_html(data),\n",
")\n",
"b = widgets.HTML(\n",
" value='\\n<H4>Statistical Description</H4>\\n' + make_summary_display_html(data2),\n",
")\n",
"tab_nest.children = [b, a]\n",
"\n",
"tab_nest.set_title(0, 'x')\n",
"tab_nest.set_title(1, 'list_of_numeric')\n",
"\n",
"display(tab_nest) #uncomment this line to see how it looks in Jupyter\n",
"#embed_minimal_html('export.html', views=[tab_nest], title='Data Summary Export')"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "105c1839-ced9-4817-84a2-072a7af76630",
"metadata": {},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"id": "e4f061d9-f75b-430f-954e-1ce20c1476e1",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.6"
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"state": {
"16de2744df134fe9b062cca9ab425fd6": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "2.0.0",
"model_name": "LayoutModel",
"state": {}
},
"1b09e80ae8c0482f86e47fe4f8673d1f": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "2.0.0",
"model_name": "HTMLModel",
"state": {
"layout": "IPY_MODEL_e19aeb6c61cb42488930af9e12f3ef1b",
"style": "IPY_MODEL_ddfd60c2caf844d280038707d3be2fe4",
"value": "\n<H4>Statistical Description</H4>\n<style type=\"text/css\">\n#T_bf458_row0_col0, #T_bf458_row0_col1, #T_bf458_row0_col2, #T_bf458_row0_col3 {\n background-color: #023858;\n color: #f1f1f1;\n}\n#T_bf458_row1_col0, #T_bf458_row1_col3 {\n background-color: #e8e4f0;\n color: #000000;\n}\n#T_bf458_row1_col1 {\n background-color: #d6d6e9;\n color: #000000;\n}\n#T_bf458_row1_col2 {\n background-color: #f0eaf4;\n color: #000000;\n}\n#T_bf458_row2_col0 {\n background-color: #d5d5e8;\n color: #000000;\n}\n#T_bf458_row2_col1 {\n background-color: #b9c6e0;\n color: #000000;\n}\n#T_bf458_row2_col2 {\n background-color: #d7d6e9;\n color: #000000;\n}\n#T_bf458_row2_col3, #T_bf458_row7_col2 {\n background-color: #ced0e6;\n color: #000000;\n}\n#T_bf458_row3_col0, #T_bf458_row3_col1, #T_bf458_row3_col2, #T_bf458_row3_col3 {\n background-color: #fff7fb;\n color: #000000;\n}\n#T_bf458_row4_col0 {\n background-color: #ede8f3;\n color: #000000;\n}\n#T_bf458_row4_col1 {\n background-color: #e9e5f1;\n color: #000000;\n}\n#T_bf458_row4_col2 {\n background-color: #fbf4f9;\n color: #000000;\n}\n#T_bf458_row4_col3 {\n background-color: #f1ebf4;\n color: #000000;\n}\n#T_bf458_row5_col0 {\n background-color: #e6e2ef;\n color: #000000;\n}\n#T_bf458_row5_col1 {\n background-color: #d1d2e6;\n color: #000000;\n}\n#T_bf458_row5_col2 {\n background-color: #f1ebf5;\n color: #000000;\n}\n#T_bf458_row5_col3 {\n background-color: #efe9f3;\n color: #000000;\n}\n#T_bf458_row6_col0 {\n background-color: #dedcec;\n color: #000000;\n}\n#T_bf458_row6_col1 {\n background-color: #c0c9e2;\n color: #000000;\n}\n#T_bf458_row6_col2 {\n background-color: #e5e1ef;\n color: #000000;\n}\n#T_bf458_row6_col3 {\n background-color: #dfddec;\n color: #000000;\n}\n#T_bf458_row7_col0 {\n background-color: #d8d7e9;\n color: #000000;\n}\n#T_bf458_row7_col1 {\n background-color: #a4bcda;\n color: #000000;\n}\n#T_bf458_row7_col3 {\n background-color: #bbc7e0;\n color: #000000;\n}\n</style>\n<table id=\"T_bf458\">\n <thead>\n <tr>\n <th class=\"blank level0\" >&nbsp;</th>\n <th id=\"T_bf458_level0_col0\" class=\"col_heading level0 col0\" >0</th>\n <th id=\"T_bf458_level0_col1\" class=\"col_heading level0 col1\" >1</th>\n <th id=\"T_bf458_level0_col2\" class=\"col_heading level0 col2\" >2</th>\n <th id=\"T_bf458_level0_col3\" class=\"col_heading level0 col3\" >3</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th id=\"T_bf458_level0_row0\" class=\"row_heading level0 row0\" >count</th>\n <td id=\"T_bf458_row0_col0\" class=\"data row0 col0\" >10.000000</td>\n <td id=\"T_bf458_row0_col1\" class=\"data row0 col1\" >10.000000</td>\n <td id=\"T_bf458_row0_col2\" class=\"data row0 col2\" >10.000000</td>\n <td id=\"T_bf458_row0_col3\" class=\"data row0 col3\" >10.000000</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row1\" class=\"row_heading level0 row1\" >mean</th>\n <td id=\"T_bf458_row1_col0\" class=\"data row1 col0\" >-0.218411</td>\n <td id=\"T_bf458_row1_col1\" class=\"data row1 col1\" >0.404524</td>\n <td id=\"T_bf458_row1_col2\" class=\"data row1 col2\" >-0.444400</td>\n <td id=\"T_bf458_row1_col3\" class=\"data row1 col3\" >-0.222767</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row2\" class=\"row_heading level0 row2\" >std</th>\n <td id=\"T_bf458_row2_col0\" class=\"data row2 col0\" >0.846937</td>\n <td id=\"T_bf458_row2_col1\" class=\"data row2 col1\" >1.566995</td>\n <td id=\"T_bf458_row2_col2\" class=\"data row2 col2\" >0.973454</td>\n <td id=\"T_bf458_row2_col3\" class=\"data row2 col3\" >1.154504</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row3\" class=\"row_heading level0 row3\" >min</th>\n <td id=\"T_bf458_row3_col0\" class=\"data row3 col0\" >-1.890653</td>\n <td id=\"T_bf458_row3_col1\" class=\"data row3 col1\" >-2.351647</td>\n <td id=\"T_bf458_row3_col2\" class=\"data row3 col2\" >-1.588000</td>\n <td id=\"T_bf458_row3_col3\" class=\"data row3 col3\" >-1.901702</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row4\" class=\"row_heading level0 row4\" >25%</th>\n <td id=\"T_bf458_row4_col0\" class=\"data row4 col0\" >-0.488421</td>\n <td id=\"T_bf458_row4_col1\" class=\"data row4 col1\" >-0.619802</td>\n <td id=\"T_bf458_row4_col2\" class=\"data row4 col2\" >-1.295769</td>\n <td id=\"T_bf458_row4_col3\" class=\"data row4 col3\" >-0.772723</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row5\" class=\"row_heading level0 row5\" >50%</th>\n <td id=\"T_bf458_row5_col0\" class=\"data row5 col0\" >-0.039523</td>\n <td id=\"T_bf458_row5_col1\" class=\"data row5 col1\" >0.714296</td>\n <td id=\"T_bf458_row5_col2\" class=\"data row5 col2\" >-0.540430</td>\n <td id=\"T_bf458_row5_col3\" class=\"data row5 col3\" >-0.607761</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row6\" class=\"row_heading level0 row6\" >75%</th>\n <td id=\"T_bf458_row6_col0\" class=\"data row6 col0\" >0.347383</td>\n <td id=\"T_bf458_row6_col1\" class=\"data row6 col1\" >1.315973</td>\n <td id=\"T_bf458_row6_col2\" class=\"data row6 col2\" >0.261770</td>\n <td id=\"T_bf458_row6_col3\" class=\"data row6 col3\" >0.309489</td>\n </tr>\n <tr>\n <th id=\"T_bf458_level0_row7\" class=\"row_heading level0 row7\" >max</th>\n <td id=\"T_bf458_row7_col0\" class=\"data row7 col0\" >0.699700</td>\n <td id=\"T_bf458_row7_col1\" class=\"data row7 col1\" >2.335299</td>\n <td id=\"T_bf458_row7_col2\" class=\"data row7 col2\" >1.362016</td>\n <td id=\"T_bf458_row7_col3\" class=\"data row7 col3\" >1.828474</td>\n </tr>\n </tbody>\n</table>\n"
}
},
"2ee5d76526c3452281d18018017d421d": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "2.0.0",
"model_name": "TabModel",
"state": {
"children": [
"IPY_MODEL_1b09e80ae8c0482f86e47fe4f8673d1f",
"IPY_MODEL_c59dacf830ab46c8a7cce819c59d699d"
],
"layout": "IPY_MODEL_4b64db295a134715a256f4c2fea1d89f",
"selected_index": 0,
"titles": [
"x",
"list_of_numeric"
]
}
},
"4b64db295a134715a256f4c2fea1d89f": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "2.0.0",
"model_name": "LayoutModel",
"state": {}
},
"60209257c0bf4213a93c88c0ca81e774": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "2.0.0",
"model_name": "HTMLStyleModel",
"state": {
"description_width": "",
"font_size": null,
"text_color": null
}
},
"c59dacf830ab46c8a7cce819c59d699d": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "2.0.0",
"model_name": "HTMLModel",
"state": {
"layout": "IPY_MODEL_16de2744df134fe9b062cca9ab425fd6",
"style": "IPY_MODEL_60209257c0bf4213a93c88c0ca81e774",
"value": "\n<H4>Statistical Description</H4>\n<style type=\"text/css\">\n</style>\n<table id=\"T_ea964\">\n <thead>\n <tr>\n <th class=\"blank level0\" >&nbsp;</th>\n <th id=\"T_ea964_level0_col0\" class=\"col_heading level0 col0\" >book</th>\n <th id=\"T_ea964_level0_col1\" class=\"col_heading level0 col1\" >counterparty</th>\n <th id=\"T_ea964_level0_col2\" class=\"col_heading level0 col2\" >last_trading_date</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th id=\"T_ea964_level0_row0\" class=\"row_heading level0 row0\" >count</th>\n <td id=\"T_ea964_row0_col0\" class=\"data row0 col0\" >100</td>\n <td id=\"T_ea964_row0_col1\" class=\"data row0 col1\" >100</td>\n <td id=\"T_ea964_row0_col2\" class=\"data row0 col2\" >100</td>\n </tr>\n <tr>\n <th id=\"T_ea964_level0_row1\" class=\"row_heading level0 row1\" >unique</th>\n <td id=\"T_ea964_row1_col0\" class=\"data row1 col0\" >5</td>\n <td id=\"T_ea964_row1_col1\" class=\"data row1 col1\" >5</td>\n <td id=\"T_ea964_row1_col2\" class=\"data row1 col2\" >98</td>\n </tr>\n <tr>\n <th id=\"T_ea964_level0_row2\" class=\"row_heading level0 row2\" >top</th>\n <td id=\"T_ea964_row2_col0\" class=\"data row2 col0\" >Book_3</td>\n <td id=\"T_ea964_row2_col1\" class=\"data row2 col1\" >Counterparty_3</td>\n <td id=\"T_ea964_row2_col2\" class=\"data row2 col2\" >2022-12-06</td>\n </tr>\n <tr>\n <th id=\"T_ea964_level0_row3\" class=\"row_heading level0 row3\" >freq</th>\n <td id=\"T_ea964_row3_col0\" class=\"data row3 col0\" >27</td>\n <td id=\"T_ea964_row3_col1\" class=\"data row3 col1\" >27</td>\n <td id=\"T_ea964_row3_col2\" class=\"data row3 col2\" >2</td>\n </tr>\n </tbody>\n</table>\n"
}
},
"ddfd60c2caf844d280038707d3be2fe4": {
"model_module": "@jupyter-widgets/controls",
"model_module_version": "2.0.0",
"model_name": "HTMLStyleModel",
"state": {
"description_width": "",
"font_size": null,
"text_color": null
}
},
"e19aeb6c61cb42488930af9e12f3ef1b": {
"model_module": "@jupyter-widgets/base",
"model_module_version": "2.0.0",
"model_name": "LayoutModel",
"state": {}
}
},
"version_major": 2,
"version_minor": 0
}
}
},
"nbformat": 4,
"nbformat_minor": 5
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment