Learn Plotly and Dash to build interactive visualizations and dashboards with Python. Explore customization, interactivity, and complex datasets to create dynamic, data-driven applications.

Plotly and Dash in Python Cover Art Iteration 02.png

plotlydash.tar.gz

ch1_01-the-plotly-layout

codingExercises

Ch3_04-hover-types

ch1_l1_all.ipynb

CH1_02-categorical-univariate-analysis-lab_Q

CH1_02-categorical-univariate-analysis-lab_A

CH1_03-numeric_univariate_analysis-lab_Q

CH1_03-numeric_univariate_analysis-lab_A

CH2_01-continuous-vs-categorical-lab_Q

CH2_01-continuous-vs-categorical-lab_A

CH3_01-title-axes-lab_Q

CH3_01-title-axes-lab_A

CH3_03-sizing-color-lab_Q.ipynb

CH3_03-sizing-color-lab_A

CH4_01_subplots_lab_Q

CH4_01_subplots_lab_A

CH4_03_date_buttons_line_charts_lab_Q

CH4_03_date_buttons_line_charts_lab_A

CH5_01_Adding_custom_sliders_lab_Q

CH5_01_Adding_custom_sliders_lab_A

CH5_02_custom_buttons_and_dropdowns_lab_Q

CH5_02_custom_buttons_and_dropdowns_lab_A

CH6_01_scatterplot_smoothers_and_regression_lab_Q

CH6_01_scatterplot_smoothers_and_regression_lab_A

CH6_02_Visualising_Classification_Model_Outputs_lab_Q

CH6_02_Visualising_Classification_Model_Outputs_lab_A

CH6_03_dimensionality_reduction_lab_Q

CH7_01-simple-example

CH6_03_dimensionality_reduction_lab_A

CH7_01-dash-and-plotly_CODE

CH7_02-the-dash-architecture_CODE1_layout

CH7_02-the-dash-architecture_CODE2_callback

CH7_02-the-dash-architecture_LAB

CH7_03-simple-dash-app_CODE

CH8_01_html_in_dash_CODE

CH8_01_html_in_dash_LAB

CH8_02_dash_graph_components_LAB

CH8_02-dash_graph_components_CODE

CH8_03_using_and_reusing_dash_components_LAB

CH8_03-using-and-reusing-dash-components_CODE

CH8_04_dash_inputs_CODE1_dropdown

CH8_04_dash_inputs_CODE2_radio

CH9_01_intro_to_css_and_css_in_dash_CODE1_inline

CH9_01_intro_to_css_and_css_in_dash_CODE2_stylesheets

CH9_02_css_as_stylesheets_CODE

CH9_03_css_with_functions_CODE

CH10_01_callback_functions_CODE1_callbackHTML

CH10_01_callback_functions_CODE2_textarea

CH10_01_callback_functions_CODE3_date

CH10_01_callback_functions_CODE4_image

CH10_01_callback_functions_LAB

CH10_02_Multiple_in_out_callbacks_CODE1_date

CH10_02_Multiple_in_out_callbacks_CODE2_plot.ipynb

CH10_02_Multiple_in_out_callbacks_CODE3_complex_plt.ipynb

CH10_02_Multiple_in_out_callbacks_LAB

CH10_03_chained_callbacks_CODE

CH10_03_chained_callbacks_LAB

CH11_01_interactivity_attributes_CODE1_simple

CH11_01_interactivity_attributes_CODE2_hover_cb

CH11_01_interactivity_attributes_CODE3_hover_harder

CH11_01_interactivity_attributes_CODE4_click_interact

CH11_02_updating_plots_from_user_interactivity_LAB

CH11_03_updating_layouts_styles_userint_CODE1_titlefont

CH11_03_updating_layouts_styles_userint_CODE2_axes

CH11_03_updating_layouts_styles_userint_CODE3_theme

CH11_03_updating_layouts_styles_userint_CODE4_theme_col

CH11_02_updating_plots_from_user_interactivity_CODE1_markers

CH11_02_updating_plots_from_user_interactivity_CODE2_color

CH11_02_updating_plots_from_user_interactivity_CODE3_marker_size

CH11_02_updating_plots_from_user_interactivity_CODE4_symbol

CH12_01_Properties_of_the_DataTable_CODE1_id_data

CH12_01_Properties_of_the_DataTable_CODE2_column

CH12_01_Properties_of_the_DataTable_CODE3_column2

CH12_01_Properties_of_the_DataTable_CODE4_row

CH12_01_Properties_of_the_DataTable_CODE5_style

CH12_01_Properties_of_the_DataTable_CODE6_page

CH12_02_DataTable-Layout_CODE1_nopag

CH12_02_DataTable-Layout_CODE2_autopag

CH12_02_DataTable-Layout_CODE3_limit_r

CH12_02_DataTable-Layout_CODE4_format

CH12_02_DataTable-Layout_CODE5_in_dash

CH12_03_Configuring-columns-and-scroll_CODE1_default

CH12_03_Configuring-columns-and-scroll_CODE2_scrollb

CH12_03_Configuring-columns-and-scroll_CODE3_elipses

CH12_03_Configuring-columns-and-scroll_CODE4_newlines

CH12_03_Configuring-columns-and-scroll_CODE5_freeze

CH12_03_Configuring-columns-and-scroll_CODE6_same_size_c

CH12_04_DataTable_style_and_formatting_CODE1_Default

CH12_04_DataTable_style_and_formatting_CODE2_headers

CH12_04_DataTable_style_and_formatting_CODE3_data_cells

CH12_04_DataTable_style_and_formatting_CODE4_user_int

CH12_04_DataTable_style_and_formatting_CODE5_formatting

CH12_05_data_manipulation_CODE1_sort

CH12_05_data_manipulation_CODE2_select

CH12_05_data_manipulation_CODE3_delete

CH12_05_data_manipulation_CODE4_filter

CH12_05_data_manipulation_CODE5_edit

CH9_01_intro_to_css_and_css_in_dash_CODE3_both

CH9_02_css_as_stylesheets_CODE1_YETI

CH9_02_css_as_stylesheets_CODE2_MORPH

Discover the compelling universe of Plotly and Dash, versatile Python libraries that enable interactive data visualization and web dashboard applications. These tools are essential for anyone seeking to effectively communicate data narratives and build interactive data visualizations.

You'll explore Plotly’s robust data visualization capabilities. You’ll create plots for univariate, bivariate and multivariate analysis before customizing and adding interactivity, using real world datasets. Then, you’ll build upon and use these skills when learning Dash as you build and customize analytical dashboard apps. You’ll journey through Dash's structure, from understanding layouts and HTML components to mastering Dash styling using CSS. You’ll learn the significance of callback functions, enhancing user interactivity, and experience the power of Dash's DataTable component.

By the end of this course, you'll be able to create engaging visualizations with Plotly and develop interactive web applications using Dash.

Mastering Plotly and Dash Data Visualization with Python

# Exercise

Using the Hang Seng Index dataset, create either a dropdown menu option or a set of buttons to alternate between the `Close` and the `Volume` series. Decide whether we should `update`, `relayout`, `restyle`, etc.

## Solution

+ An empty figure is created using the `go.Figure()` function on **line 2**.

+ A scatter trace is added to the figure using the `fig.add_trace()` function on **line 5**. The `x` parameter is set to `Date` to specify the x-axis data, and the `y` parameter is set to `Volume` to specify the y-axis data. The `name` parameter is set to `Volume` to specify the name of the trace for the legend.

+ A list of dictionaries is created on **line 8** with two items representing the buttons. The `label` parameter specifies the label of each button and the `method` and `args` parameters are used to specify the action to be taken when the button is clicked. In this case, the buttons switch the visibility of the trace between `Close` and `Volume`.

+ The `update_layout()` function on **line 14** is used to set the title of the figure to 'HSI Data' and add a dropdown menu with the buttons created in the previous step. The `updatemenus` parameter is used to specify the dropdown menu with a list of dictionaries representing each button. The `direction` parameter is set to `down` to create a dropdown menu, the `buttons` parameter is set to the list of button dictionaries, and the `showactive` parameter is set to `True` to highlight the currently active button.

+ A dictionary `rangeslider` is created, on **line 17** to customize the appearance of the range slider. The `bgcolor` parameter is used to set the background color of the slider, the `bordercolor` parameter is used to set the color of the border, the `borderwidth` parameter is used to set the width of the border, and the `thickness` parameter is used to set the thickness of the slider.

+ The `update_layout()` function on **line 20** is used again to add the range slider to the x-axis. The `title` parameter specifies the title of the figure, and the `xaxis` parameter is used to specify the range slider with the `rangeslider` dictionary.

Exercise: Custom Buttons and Dropdown Menus

Introduction and Univariate Analysis

Exploratory Data Analysis - Bivariate and Multivariate Analysis

Customizing Plots

Advanced Customization

Interactivity in Plotly

Time Series Analysis and Visualization Using Python and Plotly

Visualizing Machine Learning Models with Plotly

Global Energy Consumption Visualization

Introducing Dash

Dash Layout

Dash Styling

Dash Callbacks

User Interactivity in Dash

Tabular data in Dash DataTable

Global Energy Consumption Dashboard

Conclusion

Build Data-centric Dashboards Using Dash

Exercise: Custom Buttons and Dropdown Menus

Exercise

Solution