Interactive Python Dashboards with Plotly and Dash

Explore various Python visualization libraries and understand what Plotly offers as an interactive open-source library. Learn how Dash expands Plotly into full dashboards with interactivity and online deployment.

Explore a quick NumPy crash course to generate arrays and matrices with arange, zeros, ones, linspace, random data, reshape, and indexing for plotting with Plotly and Dash.

Learn to use pandas to read csv files, create dataframes, select columns, compute mean and min, apply conditional filters, and explore dataframe attributes such as unique, columns, info, and describe.

Build NumPy and pandas skills by completing exercises that set seed to 101 and create a 100 by 5 array, then rename columns and build a 50 by 4 dataframe.

Import numpy and pandas, set a seed, generate a 100x5 matrix, convert to a dataframe, rename columns, and create a 50x4 dataframe with A, B, C, D for Plotly.

Explore the Plotly Python documentation to reproduce any plot type with your data, using basic charts, color scales, and the full reference for parameter options.

Explore creating scatter plots with plotly, mapping two variables on x and y, evaluating correlation, and customizing data, layout, and axes titles to generate an interactive scatter plot.

Explore line charts and how they connect ordered data points into lines, contrasting with scatter plots to visualize time series with Plotly traces and modes.

Learn to combine Pandas and Plotly by loading a US census CSV, filtering six New England states, selecting POP columns, and building line traces to show population growth from 2010–2017.

Build seven-day line charts of hourly temperatures in Plotly by creating a separate trace per day from the 2010 Yuma AZ CSV using pandas.

master line charts in Plotly by looping over days to create line traces, filtering T_HR_AVG by day, and plotting LST_TIME on the x-axis with a daily temperature average layout.

Explore bar charts for visualizing categorical data, including stacked and nested designs, using Plotly to compare gold, silver, and bronze medal counts by country.

Create a stacked bar chart from mocksurvey.csv using questions as the x-axis and responses as columns. Practice reading with index_col=0 in pandas and building Plotly traces.

Learn the bar chart solution in Plotly for a stacked vertical chart, including data import, per-column traces, and a horizontal alternative with orientation 'h'.

Learn to create bubble charts in plotly using marker size for a third variable and color by category, with hover text and scatter-like plots of mpg vs horsepower.

Create a Plotly bubble chart using mpg.csv to compare three features, with bubble size by displacement or horsepower, and include a titled layout.

Learn to build a bubble chart from mpg.csv by mapping displacement to x, acceleration to y, and weight to marker size using Plotly, with hover text showing car names.

Explore how box plots visualize data distribution through quartiles and the interquartile range, show the median and whiskers, and compare data across categories, including Mark Twain versus Snodgrass word frequencies.

Generate two independent random samples from the abalone rings column, then compare them with a box plot using Plotly to illustrate similar population-based distributions.

Build a data frame from the abalone dataset and draw two independent random samples from rings. Use plotly to create two box plots and compare their distributions.

Create histograms to show the distribution of a continuous feature by dividing values into bins, counting occurrences, and adjusting bin size for detail, using mpg data and plotly.

Create a histogram of the AbaLone dataset's Length field in Plotly with range 0–1 and bin size 0.02, using the exercise file data, layout, and figure. The next lecture reviews an example solution.

Show how to create a histogram of the length column from the abalone dataset, using xbins from 0 to 1 with size 0.02, and plot with a layout title my histogram.

Explore distribution plots, or distplots, combining histograms, rug plots, and KDE to reveal data distributions and differences across groups using Plotly’s figure_factory.

Build distribution plots with Plotly by comparing iris petal lengths across species, using three traces and a rug plot to reveal differences among Iris setosa, Iris versicolor, and Iris virginica.

Explore the distribution plot exercise solution using Plotly's figure_factory create_distplot on iris petal_length across setosa, versicolor, and virginica.

Learn to create heat maps that display two features on axes and a third variable via color, using Plotly subplots and shared axes with color scales like Jet.

Apply heat maps with Plotly to a flights dataset by creating a year-by-month heat map, where color encodes passengers, highlighting rising flights and summer seasonality.

Review the heatmap exercise solution by building a heatmap with year on the x-axis and month on the y-axis using passengers data. Observe rising passengers across years and summer values.

Discover how Plotly's Dash lets you build Python-based dashboards with interactive layouts and components. Create your first dashboard web app using dash_core_components and dash_html_components.

Create your first Dash app and design the layout with HTML components and Dash core components, then add a Plotly bar chart via a figure dictionary and run the server.

Learn to style Dash layouts through CSS-like style calls on HTML and core components, using a colors dictionary to set background and text colors across the dashboard and plots.

Convert Plotly plots into a dash dashboard by embedding a Plotly figure into a dash core component graph, showing a simple scatter plot and later expanding to multiple plots.

Build a simple dash dashboard by importing Old Faithful data and plotting a scatterplot of eruption duration versus wait time, highlighting the bimodal pattern with Plotly.

Create and run a simple dash dashboard that reads the Old Faithful data with pandas, builds a scatter plot using Plotly go, and adds x axis and y axis titles.

Explore dash components, including dash_html_components for layout and dash_core_components for graphs, learn to style with CSS, render Plotly graphs, and prepare for callbacks, interactions, and markdown syntax.

Learn how Dash HTML components use div blocks and CSS style dictionaries to build customizable dashboards.

Explore Dash core components and learn to insert dropdowns, sliders, and radio items into a dashboard, guided by the core components documentation and practical examples.

Explore displaying markdown in dash dashboards with dcc.markdown, using a multi-line string to support links, formatting, italics, bold text, bullet lists, and commonmark syntax.

Learn to quickly access dash component documentation using Python's help() and the terminal's pydoc. See examples with dash_html_components.div to view API details and generate HTML docs.

Connect a dash input to a display div with a single callback, updating the text in real time by wiring input and output to component ids.

Link a year-picker dropdown to a Dash scatterplot of life expectancy versus GDP per capita by continent with a logarithmic x-axis, then filter data by year and build traces.

Learn to link multiple inputs to a single graph output in a Dash dashboard, using two dropdowns to choose X and Y axes for an MPG dataset scatter plot.

Demonstrate handling multiple inputs and outputs in a dash dashboard, first with text outputs, then an image lookup from a wheels and color data frame encoded with base64.

Recreate an interactive dashboard in Dash using a two-ended range slider to multiply left and right values, practicing callbacks, layout, and exploring Dash core components from the documentation.

Build a Dash app using Dash core components and HTML components to drive a range slider, compute the product of two values via a callback, and show the result.

Explore controlling callbacks with Dash state to store input changes and update outputs only when a submit button is clicked, using input, output, and state in Dash.

Explore hover over data with a Plotly dash dashboard, accessing hoverData to display point-specific json, and render corresponding images based on color and wheels.

Switch from hover data to click data by updating the component's property ID, and see information appear only when you click a graph point, with upcoming select data.

Learn how to use selected data with box and lasso select to measure and display point density in a scatterplot dashboard.

Learn to update a second graph from user interactions using hoverData, clickData, and selectedData in a Dash and Plotly dashboard, with an MPG scatter linked to acceleration.

Update a second graph from hover data on a scatter plot by using the hovered point index to adjust acceleration-based line and refresh the figure via a dash callback.

update graphs on interactions by using hover data to adjust the acceleration plot thickness by cylinders and display car stats in a markdown panel via multiple outputs and callbacks.

Build a stock price dashboard using Plotly and Dash with a ticker dropdown, date picker, and submit to view historical prices.

Construct a skeleton stock ticker dashboard by importing dash, creating the app and layout, adding a title and stock input, and rendering a simple line graph from a basic figure.

In part two, learn to add a Dash callback that updates a plot title from an input box and set a default layout title for an interactive dashboard.

Add a date range picker and fetch stock data with pandas_datareader via the IEX API. Install the package if needed and note potential API changes and firewall constraints.

Add a date picker range, link it to the callback, and convert selected strings to datetimes for plotting stock data, with min/max dates and default start and end dates.

Add a submit button and convert the start date, end date, and stock symbol inputs into state so the dashboard updates only when the submit button is clicked.

Replace the input with a multi-select dropdown sourced from a NASDAQ CSV, enabling users to choose tickers and view corresponding historical price traces on the dashboard.