Layouts

Load cuxfilter and data

[ ]:
from cuxfilter import charts
import cuxfilter
from bokeh import palettes
cux_df = cuxfilter.DataFrame.from_arrow('./data/146M_predictions_v2.arrow')

Declare charts

[ ]:
#tile provider for choropleth map
MAPBOX_API_KEY= "pk.eyJ1IjoiYXRob3J2ZSIsImEiOiJjazBmcmlhYzAwYXc2M25wMnE3bGttbzczIn0.JCDQliLc-XTU52iKa8L8-Q"

chart0 = charts.choropleth(x='zip', y='delinquency_12_prediction', color_column='delinquency_12_prediction', color_aggregate_fn='mean',
                                  geo_color_palette=palettes.Purples9, mapbox_api_key=MAPBOX_API_KEY,
                                  geoJSONSource = 'https://raw.githubusercontent.com/rapidsai/cuxfilter/GTC-2018-mortgage-visualization/javascript/demos/GTC%20demo/public/data/zip3-ms-rhs-lessprops.json',
                                  data_points=1000, nan_color='white')
chart1 = charts.bar('dti')
chart2 = charts.bar('delinquency_12_prediction',data_points=50)
chart3 = charts.line('borrower_credit_score', step_size=1)
chart4 = charts.bar('seller_name')
chart5 = charts.scatter(x='loan_id',y='current_actual_upb')
chart6 = charts.line('dti')
chart7 = charts.line('delinquency_12_prediction', data_points=50)
chart8 = charts.bar('borrower_credit_score', step_size=1)
chart_widget = charts.multi_select('dti')

#create a list of charts
charts_list = [chart_widget, chart0, chart3, chart1, chart2, chart4, chart5, chart6, chart7, chart8]

User-defined Layout Types

Cuxfilter 0.18 introduced custom user-defined layouts, which can be applied using an input parameter to the ``.dashboard()`` api, called ``layout_array``.

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.

Example 1:

layout_array = [[1]]

will result in a single chart occupying the entire page.

9cb7070a10334c15a816ca244d07655b

Example 2:

layout_array = [[1], [1], [2]]

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.

ad5ce8ee60b74bdc8dfe398f61277e86

Example 3:

[ ]:
d = cux_df.dashboard(charts_list, layout_array=[
    [1, 1, 2, 2],
    [1, 1, 3, 4]
], theme=cuxfilter.themes.rapids, title="Layout - Custom")
[39]:
await d.preview()
../_images/layouts_Layouts_8_0.png

Predefined Layout Types

b9de1f6916fb4baf91e3de31c77befb6

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.single_feature, theme=cuxfilter.themes.rapids, title="Layout - single feature")
[13]:
await d.preview()
../_images/layouts_Layouts_13_0.png

165a4beefa764c63839f911f7c6b9f92

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_base, theme=cuxfilter.themes.rapids, title="Layout - feature and base")
[16]:
await d.preview()
../_images/layouts_Layouts_17_0.png

01e06d2545124431b250afff8d1404a5

[ ]:
d = cux_df.dashboard([chart_widget, chart0, chart1], layout=cuxfilter.layouts.double_feature, theme=cuxfilter.themes.rapids, title="Layout - double feature")
[7]:
await d.preview()
../_images/layouts_Layouts_21_0.png

d67e5e7321a34a3ca448cd54d495d31e

[ ]:
d = cux_df.dashboard(charts_list[:4], layout=cuxfilter.layouts.left_feature_right_double, theme=cuxfilter.themes.rapids, title="Layout - left feature right double")
[10]:
await d.preview()
../_images/layouts_Layouts_25_0.png

c9b38507428743708aaaedffcd4ce641

[ ]:
d = cux_df.dashboard([chart_widget, chart1, chart2, chart3], layout=cuxfilter.layouts.triple_feature, theme=cuxfilter.themes.rapids, title="Layout - triple feature")
[22]:
await d.preview()
../_images/layouts_Layouts_29_0.png

cc4be835088041848b70c1a1da7c3a73

[ ]:
d = cux_df.dashboard([chart_widget, chart0, chart2, chart3], layout=cuxfilter.layouts.feature_and_double_base, theme=cuxfilter.themes.rapids, title="Layout - feature and double base")
[13]:
await d.preview()
../_images/layouts_Layouts_33_0.png

5b346ffbf9c94b36af4c3ca4c8982201

[ ]:
d = cux_df.dashboard([chart_widget, chart0, chart2, chart3, chart4], layout=cuxfilter.layouts.two_by_two, theme=cuxfilter.themes.rapids, title="Layout - two by two")
[16]:
await d.preview()
../_images/layouts_Layouts_37_0.png

c8ac3cf8d20446a69d3568d68ba1b99d

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_triple_base, theme=cuxfilter.themes.rapids, title="Layout - feature and triple base")
[19]:
await d.preview()
../_images/layouts_Layouts_41_0.png

c8a63c303f0649428e57007a2056f1e0

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_quad_base, theme=cuxfilter.themes.rapids, title="Layout - feature and quad base")
[22]:
await d.preview()
../_images/layouts_Layouts_45_0.png

d663928c7f44433c81edd8b0abe1ad24

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.feature_and_five_edge, theme=cuxfilter.themes.rapids, title="Layout - feature and five edge")
[25]:
await d.preview()
../_images/layouts_Layouts_49_0.png

1eefed79a70f4e53824018e2db4b467b

[ ]:
d = cux_df.dashboard([chart_widget, chart3, chart1, chart2, chart4, chart5, chart6], layout=cuxfilter.layouts.two_by_three, theme=cuxfilter.themes.rapids, title="Layout - two by three")
[34]:
await d.preview()
../_images/layouts_Layouts_53_0.png

f004562615024d328c643fa3a54885a3

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.double_feature_quad_base,
                     theme=cuxfilter.themes.rapids, title="Layout - double feature quad base")
[28]:
await d.preview()
../_images/layouts_Layouts_57_0.png

2db8ca656f73494a9d3a2753f1e20785

[ ]:
d = cux_df.dashboard(charts_list, layout=cuxfilter.layouts.three_by_three,
                     theme=cuxfilter.themes.rapids, title="Layout - three by three")
[31]:
await d.preview()
../_images/layouts_Layouts_61_0.png
[ ]: