Awesome Dash

A curated list of awesome Dash (plotly) resources

Dash is a productive Python framework for building web applications. Written on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. It's particularly suited for anyone who works with data in Python.

Contents

• Tutorials
• Component Libraries
• App Examples
• Idiomatic examples
• Galleries
• Cheat sheets
• Talks
• Books
• Community
• Contributors

Tutorials

• Introducing Plotly Dash - A high level introduction to Dash by Chris Parmer, the author of Dash. This essay was released as part of Dash's official launch (June 21, 2017).
• Plotly's tutorials - Part 1: App Layout
• Plotly's tutorials - Part 2: Interactivity
• Plotly's tutorials - Part 3: Interactive Graphing
• Plotly's tutorials - Part 4: Callbacks With State
• Charming Data YouTube channel - A channel dedicated to teaching Dash and Plotly with over 25k subscribers.
• Interactive Web-Based Dashboards in Python - How the MVC model pertains to Dash and a walkthrough of building an app.
• Using Plotly’s Dash to deliver public sector decision support dashboards - Buiding a complex dashboard step-by-step.
• OPS CodeDay: Dash Plotly Map + Graph - How to use Jupyter notebooks in tandom with Dash to create mapping viz.
• Creating Interactive Visualizations with Plotly’s Dash Framework - High level overview of how to get started with Dash.
• Finding Bigfoot with Dash, Part 1 - Walkthrough of building a dashboard of Bigfoot sightings. Part 2, Part 3.
• Visualize Earthquakes with Plotly Dash - Environmental scan of alternatives to Dash followed with a tutorial.
• ARGO Labs - Plotly Dash Tutorial (Video) - Detailed introduction to creating interactive dashboards.
• Data Visualization GUIs with Dash and Python (Video playlist) - Five-part series exploring Dash features.
• Interactive Visualization of Machine Learning and Computer Vision with Dash - Official introduction video.
• Webinar: Converting React components to Dash components - Official tutorial about how to convert React components to Dash components using the Dash Component Boilerplate cookiecutter template.
• Interactive Image Processing with Dash-Canvas - Official introduction video to the Dash Canvas components.
• Dash Cytoscape Component - Official introduction video to the Dash Cytoscape components.
• An introduction to Dash DataTable - Official introduction video to the Dash DataTable components.

Component Libraries

• Tutorial on creating custom Dash components with React.js.
• Dash Bio Components - Suite of bioinformatics components that make it simpler to analyze and visualize bioinformatics data and interact with them in a Dash application.
• Dash Canvas Components - Module for image annotation and image processing using Dash.
• Awesome React Components - Catalog of React.js components potentially interesting to be wrapped into Dash components.
• Awesome React - Helpful resources for developing React.js components.
• Dash Core Components
• Dash Cytoscape Component - Graph visualization component for creating easily customizable, high-performance, interactive, and web-based networks.
• Dash DataTable Component - Interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.
• Dash DAQ Components - Set of controls that make it simpler to integrate data acquisition and controls into your Dash applications.
• Dash ECharts Components - ECharts(V5) Components for Dash.
• Dash HTML Components
• mydcc - Extension of Dash Core Components.
• sd-material-ui - StratoDem Analytics implementations of material-ui components for Dash.
• sd-range-slider - Range Slider Dash component.
• dj-plotly-dash - Plotly Dash fork for Django.
• dash-flexbox-grid - Wrapper around react-flexbox-grid for Plotly Dash.
• dash-color-picker - Wrapper around react-color.
• dash-dual-listbox - Wrapper around react-duallist.
• dash-bootstrap-components - Layout engine, default styles and high-level components based on Bootstrap.
• dash-uploader - Upload component for Dash. Supports large data files.
• Dash Mantine Components - Collection of 40+ Dash components based on Mantine React Components library.
• plotly-resampler - Wrapper for plotly figures that adds data downsampling (aggregating) functionality, enabling the visualization of large datasets.

App Examples

• Oil and Gas Explorer - Explore oil and gas production over time and with linked visualisations. Source Code.
• Uber Rides - Displays all of the Uber rides in New York City in 2014. Pandas on the backend filters a 0.5gig datafile. Source Code.
• Simple Stock Tickers - Queries data from Google Finance and displays the results as candlestick charts. Source Code.
• Volatility Surface Explorer - Fetches CBOE options chain data from Yahoo Finance with Pandas Datareader and calculates the implied volatility of each option visualised in a 3D mesh chart. Source Code.
• Drug Discovery - Displays a description of the drug as you hover over points in the graph. Source Code.
• Live Wind Streaming - Continually queries a SQL database and displays live charts of wind speed and wind direction. Source Code.
• Recession in 255 Charts - Adapted from NYTimes's excellent How the Recession Reshaped the Economy in 255 Charts. Source Code.
• 3D Yield Curve - Adapted from NYTimes's excellent A 3-D View of a Chart That Predicts The Economic Future: The Yield Curve. Source Code.
• Finding Bigfoot - Several plots (including a map), a grid layout built with Bootstrap, interactions with an input field, and caching (See also Tutorials). Source Code.
• Visualize Earthquakes with Plotly Dash - Great UI and usage of geospatial analytics with Dash. Includes basic unit tests. Source Code.
• Street Quality IDentification [SQUID] - Highlights poor quality roads with maps, data table and photos of the offending piece of road. Source Code.
• VoxelViz - Competition winning Visualization tool for (f)MRI data-sets. Source Code.
• Traffic Accidents UK - Explore the 140,008 traffic accidents in the UK in 2015. Source Code.
• New York Taxi Rides - A full year of the YellowCab Taxi company data from their prime, numbering well over 100 million trips. Dash + Vaex dataframe with over a 100 million rows. Source Code.
• GutenSearch - Look inside the books of Project Gutenberg. Source Code.

Idiomatic examples

• Dash recipes - A collection of scripts and examples created of the plotly team while answering questions from the greater Dash community.

Galleries

• Plotly App Gallery - Plotly's collection of Dash applications.
• Dash Recipes GitHub - Collection of scripts and examples created while answering questions from the greater Dash community.
• Dash Data Dashboards and Apps - Collection of data dashboards with real life data, for various topics, as well as a few apps for online marketing built with Dash.

Talks

• Dash: Data exploration web apps in pure Python - Chelsea Douglas, PyData DC 2018.
• Overview of Dash - Chris Parmer, creator of Dash (SciPy 2017).
• We're Launching Dash - Chris Parmer, creator of Dash, speaking about the motivations behind Dash before it was launched (Plotcon NYC 2016).
• Plotly dash and data visualisation in Python, PyData, Berlin 2017 - Volodymyr Kazantsev (slides only).

Books

• Interactive Dashboards and Data Apps with Plotly and Dash: Harness the power of a fully fledged frontend web framework in Python – no JavaScript required.

Cheat sheets

• plotly.py Cheat Sheet

Community

• Plotly hosted Question and Answer community
• Stack Overflow

Contributors

• Luke Singham
• Aly Sivji
• Chris Parmer
• Sergey Pikhovkin
• Pascal Bugnion
• Florian Kromer
• Elias Dabbas
• vaexio
• Fanchao MENG
• Snehil Vijay

License

This work is licensed under a Creative Commons Attribution 4.0 International License.