{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Layouts\n",
"cuxfilter has both preset and custom layout options. See examples below on how to use both."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Download Dataset"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"from cuxfilter.sampledata import datasets_check"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"DATA_DIR = './data'\n",
"! curl https://data.rapids.ai/viz-data/146M_predictions_v2.arrow.gz --create-dirs -o $DATA_DIR/146M_predictions_v2.arrow.gz\n",
"datasets_check('mortgage', base_dir=DATA_DIR)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Import and Setup Charts"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from cuxfilter import charts\n",
"import cuxfilter\n",
"from bokeh import palettes\n",
"import panel as pn\n",
"\n",
"cux_df = cuxfilter.DataFrame.from_arrow('./data/146M_predictions_v2.arrow')\n",
"\n",
"chart0 = charts.choropleth(x='zip', color_column='delinquency_12_prediction', color_aggregate_fn='mean',\n",
" geo_color_palette=palettes.Purples9,\n",
" geoJSONSource = 'https://raw.githubusercontent.com/rapidsai/cuxfilter/GTC-2018-mortgage-visualization/javascript/demos/GTC%20demo/public/data/zip3-ms-rhs-lessprops.json',\n",
" nan_color='white')\n",
"chart1 = charts.bar('dti')\n",
"chart2 = charts.bar('delinquency_12_prediction',data_points=50)\n",
"chart3 = charts.bar('borrower_credit_score', step_size=1)\n",
"chart4 = charts.bar('seller_name')\n",
"chart5 = charts.scatter(x='loan_id',y='current_actual_upb')\n",
"chart6 = charts.scatter('zip', 'dti')\n",
"chart7 = charts.heatmap('dti','borrower_credit_score', aggregate_col='delinquency_12_prediction', aggregate_fn=\"mean\")\n",
"chart8 = charts.line('loan_id','borrower_credit_score')\n",
"\n",
"#create a list of charts\n",
"charts_list = [chart0, chart3, chart1, chart2, chart4, chart5, chart6, chart7, chart8]\n",
"\n",
"widgets = [charts.multi_select('dti'), charts.card(pn.pane.Markdown(\"\"\"\n",
"## Sample Palette Legend\n",
"\n",
"- ![#A932FF](https://via.placeholder.com/15/A932FF/000000?text=+) `#A932FF`: Purple 1\n",
"- ![#8E44AD](https://via.placeholder.com/15/8E44AD/000000?text=+) `#8E44AD`: Purple 2\n",
"- ![#6C3483](https://via.placeholder.com/15/6C3483/000000?text=+) `#6C3483`: Purple 3\n",
"- ![#512E5F](https://via.placeholder.com/15/512E5F/000000?text=+) `#512E5F`: Purple 4\n",
"- ![#341C4E](https://via.placeholder.com/15/341C4E/000000?text=+) `#341C4E`: Purple 5\n",
"\"\"\")) ]"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## User-defined Layouts"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### Layout_array\n",
"\n",
"Custom layouts are applied using an input parameter to the `.dashboard()` api, called `layout_array`.\n",
"\n",
"Layout array is a list-of-lists, representing a 2-dimensional layout page. Each list is mapped to an entire row of the layout. A list contains chart numbers (starting from 1 to n), representing their exact position on the page. The input array is automatically scaled to fit the entire screen.\n",
"\n",
"##### **Example 1:**\n",
"\n",
"```python\n",
"layout_array = [[1]]\n",
"```\n",
"will result in a single chart occupying the entire page.\n",
"\n",
"\n",
"\n",
"\n",
"##### **Example 2:**\n",
"```python\n",
"layout_array = [[1], [1], [2]]\n",
"```\n",
"will result chart 1 occupying the first two rows and chart 2 occupying the last row, roughly dividing the 2-chart layout to a 66%-33% ration.\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"##### **Example 3:**"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout_array=[\n",
" [1, 1, 2, 2],\n",
" [1, 1, 3, 4]\n",
"], theme=cuxfilter.themes.rapids_dark, title=\"Layout - Custom\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-custom](./layout_thumbnails/showcase-custom.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Preset Layouts"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"Preset layouts are applied using an input parameter to the `.dashboard()` api, called `layout`."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Single feature"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.single_feature, theme=cuxfilter.themes.rapids_dark, title=\"Layout - single feature\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-single-feature](./layout_thumbnails/showcase-single-feature.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Feature and base"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.feature_and_base, theme=cuxfilter.themes.rapids_dark, title=\"Layout - feature and base\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-feature-and-base](./layout_thumbnails/showcase-feature-and-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Double feature"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard([chart0, chart1], sidebar=widgets, layout=cuxfilter.layouts.double_feature, theme=cuxfilter.themes.rapids_dark, title=\"Layout - double feature\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-double-feature](./layout_thumbnails/showcase-double-feature.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Left feature right double"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list[:4], sidebar=widgets, layout=cuxfilter.layouts.left_feature_right_double, theme=cuxfilter.themes.rapids_dark, title=\"Layout - left feature right double\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-left-feature-right-double](./layout_thumbnails/showcase-left-feature-right-double.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Triple feature"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard([chart1, chart2, chart3], sidebar=widgets, layout=cuxfilter.layouts.triple_feature, theme=cuxfilter.themes.rapids_dark, title=\"Layout - triple feature\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-triple-feature](./layout_thumbnails/showcase-triple-feature.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Feature and double base"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard([chart0, chart2, chart3], sidebar=widgets, layout=cuxfilter.layouts.feature_and_double_base, theme=cuxfilter.themes.rapids_dark, title=\"Layout - feature and double base\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-feature-and-double-base](./layout_thumbnails/showcase-feature-and-double-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Two by two"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard([chart0, chart2, chart3, chart4], sidebar=widgets, layout=cuxfilter.layouts.two_by_two, theme=cuxfilter.themes.rapids_dark, title=\"Layout - two by two\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-two-by-two](./layout_thumbnails/showcase-two-by-two.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Feature and triple base"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.feature_and_triple_base, theme=cuxfilter.themes.rapids_dark, title=\"Layout - feature and triple base\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-feature-and-triple-base](./layout_thumbnails/showcase-feature-and-triple-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Feature and quad base"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.feature_and_quad_base, theme=cuxfilter.themes.rapids_dark, title=\"Layout - feature and quad base\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-feature-and-quad-base](./layout_thumbnails/showcase-feature-and-quad-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Feature and five edge"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.feature_and_five_edge, theme=cuxfilter.themes.rapids_dark, title=\"Layout - feature and five edge\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-feature-and-five-base](./layout_thumbnails/showcase-feature-and-five-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Two by three"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard([chart3, chart1, chart2, chart4, chart5, chart6], sidebar=widgets, layout=cuxfilter.layouts.two_by_three, theme=cuxfilter.themes.rapids_dark, title=\"Layout - two by three\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-two-by-three](./layout_thumbnails/showcase-two-by-three.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Double feature quad base"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.double_feature_quad_base, \n",
" theme=cuxfilter.themes.rapids_dark, title=\"Layout - double feature quad base\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-double-feature-quad-base](./layout_thumbnails/showcase-double-feature-quad-base.png)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Three by three"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"d = cux_df.dashboard(charts_list, sidebar=widgets, layout=cuxfilter.layouts.three_by_three, \n",
" theme=cuxfilter.themes.rapids_dark, title=\"Layout - three by three\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![showcase-three-by-three](./layout_thumbnails/showcase-three-by-three.png)"
]
},
{
"cell_type": "code",
"execution_count": null,
"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.12"
}
},
"nbformat": 4,
"nbformat_minor": 4
}