316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<h1 id="awesome-dash-awesome">Awesome Dash <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://awesome.re/badge-flat.svg" alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://plot.ly/products/dash/"><img src="https://cdn.rawgit.com/plotly/dash-docs/b1178b4e/images/dash-logo-stripe.svg" align="right" width="250"></a></p>
|
||
<p>A curated list of awesome Dash (plotly) resources</p>
|
||
<blockquote>
|
||
<p><a href="https://plot.ly/products/dash/">Dash</a> 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.</p>
|
||
</blockquote>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#component-libraries">Component Libraries</a></li>
|
||
<li><a href="#app-examples">App Examples</a></li>
|
||
<li><a href="#idiomatic-examples">Idiomatic examples</a></li>
|
||
<li><a href="#galleries">Galleries</a></li>
|
||
<li><a href="#cheat-sheets">Cheat sheets</a></li>
|
||
<li><a href="#talks">Talks</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#contributors">Contributors</a></li>
|
||
</ul>
|
||
<h2 id="tutorials">Tutorials</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503">Introducing
|
||
Plotly Dash</a> - 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).</li>
|
||
<li><a href="https://plot.ly/dash/getting-started">Plotly’s tutorials -
|
||
Part 1: App Layout</a></li>
|
||
<li><a href="https://plot.ly/dash/getting-started-part-2">Plotly’s
|
||
tutorials - Part 2: Interactivity</a></li>
|
||
<li><a href="https://plot.ly/dash/interactive-graphing">Plotly’s
|
||
tutorials - Part 3: Interactive Graphing</a></li>
|
||
<li><a href="https://plot.ly/dash/state">Plotly’s tutorials - Part 4:
|
||
Callbacks With State</a></li>
|
||
<li><a href="https://www.youtube.com/charmingdata">Charming Data YouTube
|
||
channel</a> - A channel dedicated to teaching Dash and Plotly with over
|
||
25k subscribers.</li>
|
||
<li><a
|
||
href="https://alysivji.github.io/reactive-dashboards-with-dash.html">Interactive
|
||
Web-Based Dashboards in Python</a> - How the MVC model pertains to Dash
|
||
and a walkthrough of building an app.</li>
|
||
<li><a
|
||
href="https://medium.com/a-r-g-o/using-plotlys-dash-to-deliver-public-sector-decision-support-dashboards-ac863fa829fb">Using
|
||
Plotly’s Dash to deliver public sector decision support dashboards</a> -
|
||
Buiding a complex dashboard step-by-step.</li>
|
||
<li><a
|
||
href="https://radumas.info/blog/tutorial/2017/08/10/codeday.html">OPS
|
||
CodeDay: Dash Plotly Map + Graph</a> - How to use Jupyter notebooks in
|
||
tandom with Dash to create mapping viz.</li>
|
||
<li><a href="http://pbpython.com/plotly-dash-intro.html">Creating
|
||
Interactive Visualizations with Plotly’s Dash Framework</a> - High level
|
||
overview of how to get started with Dash.</li>
|
||
<li><a
|
||
href="https://timothyrenner.github.io/posts/bigfoot-with-dash-part-1/">Finding
|
||
Bigfoot with Dash, Part 1</a> - Walkthrough of building a dashboard of
|
||
Bigfoot sightings. <a
|
||
href="https://timothyrenner.github.io/posts/bigfoot-with-dash-part-2">Part
|
||
2</a>, <a
|
||
href="https://timothyrenner.github.io/posts/bigfoot-with-dash-part-3/">Part
|
||
3</a>.</li>
|
||
<li><a
|
||
href="https://www.giacomodebidda.com/visualize-earthquakes-with-plotly-dash/">Visualize
|
||
Earthquakes with Plotly Dash</a> - Environmental scan of alternatives to
|
||
Dash followed with a tutorial.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=yfWJXkySfe0">ARGO Labs -
|
||
Plotly Dash Tutorial (Video)</a> - Detailed introduction to creating
|
||
interactive dashboards.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/watch?v=J_Cy_QjG6NE&list=PLQVvvaa0QuDfsGImWNt1eUEveHOepkjqt">Data
|
||
Visualization GUIs with Dash and Python (Video playlist)</a> - Five-part
|
||
series exploring Dash features.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=3F5AR-uUqJc">Interactive
|
||
Visualization of Machine Learning and Computer Vision with Dash</a> -
|
||
Official introduction video.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=wifoPPRgG_I">Webinar:
|
||
Converting React components to Dash components</a> - Official tutorial
|
||
about how to convert React components to Dash components using the Dash
|
||
Component Boilerplate cookiecutter template.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=LKXSFBB5ccI">Interactive
|
||
Image Processing with Dash-Canvas</a> - Official introduction video to
|
||
the Dash Canvas components.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=snXcIsCMQgk">Dash Cytoscape
|
||
Component</a> - Official introduction video to the Dash Cytoscape
|
||
components.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=dueejcyrYh8">An
|
||
introduction to Dash DataTable</a> - Official introduction video to the
|
||
Dash DataTable components.</li>
|
||
</ul>
|
||
<h2 id="component-libraries">Component Libraries</h2>
|
||
<ul>
|
||
<li><a href="https://plot.ly/dash/plugins">Tutorial on creating custom
|
||
Dash components with React.js.</a></li>
|
||
<li><a href="https://dash.plot.ly/dash-bio">Dash Bio Components</a> -
|
||
Suite of bioinformatics components that make it simpler to analyze and
|
||
visualize bioinformatics data and interact with them in a Dash
|
||
application.</li>
|
||
<li><a href="https://dash.plot.ly/canvas">Dash Canvas Components</a> -
|
||
Module for image annotation and image processing using Dash.</li>
|
||
<li><a
|
||
href="https://github.com/brillout/awesome-react-components">Awesome
|
||
React Components</a> - Catalog of React.js components potentially
|
||
interesting to be wrapped into Dash components.</li>
|
||
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> -
|
||
Helpful resources for developing React.js components.</li>
|
||
<li><a href="https://github.com/plotly/dash-core-components">Dash Core
|
||
Components</a></li>
|
||
<li><a href="https://dash.plot.ly/cytoscape">Dash Cytoscape
|
||
Component</a> - Graph visualization component for creating easily
|
||
customizable, high-performance, interactive, and web-based
|
||
networks.</li>
|
||
<li><a href="https://dash.plot.ly/datatable">Dash DataTable
|
||
Component</a> - Interactive table that supports rich styling,
|
||
conditional formatting, editing, sorting, filtering, and more.</li>
|
||
<li><a href="https://dash.plot.ly/dash-daq">Dash DAQ Components</a> -
|
||
Set of controls that make it simpler to integrate data acquisition and
|
||
controls into your Dash applications.</li>
|
||
<li><a href="https://github.com/mergeforward/dash_echarts">Dash ECharts
|
||
Components</a> - ECharts(V5) Components for Dash.</li>
|
||
<li><a href="https://github.com/plotly/dash-html-components">Dash HTML
|
||
Components</a></li>
|
||
<li><a href="https://github.com/jimmybow/mydcc">mydcc</a> - Extension of
|
||
Dash Core Components.</li>
|
||
<li><a
|
||
href="https://github.com/StratoDem/sd-material-ui">sd-material-ui</a> -
|
||
StratoDem Analytics implementations of material-ui components for
|
||
Dash.</li>
|
||
<li><a
|
||
href="https://github.com/StratoDem/sd-range-slider">sd-range-slider</a>
|
||
- Range Slider Dash component.</li>
|
||
<li><a
|
||
href="https://github.com/pikhovkin/dj-plotly-dash">dj-plotly-dash</a> -
|
||
Plotly Dash fork for Django.</li>
|
||
<li><a
|
||
href="https://github.com/pikhovkin/dash-flexbox-grid">dash-flexbox-grid</a>
|
||
- Wrapper around react-flexbox-grid for Plotly Dash.</li>
|
||
<li><a
|
||
href="https://github.com/vivekvs1/dash-color-picker">dash-color-picker</a>
|
||
- Wrapper around react-color.</li>
|
||
<li><a
|
||
href="https://github.com/vivekvs1/dash-dual-listbox">dash-dual-listbox</a>
|
||
- Wrapper around react-duallist.</li>
|
||
<li><a
|
||
href="https://dash-bootstrap-components.opensource.asidatascience.com/">dash-bootstrap-components</a>
|
||
- Layout engine, default styles and high-level components based on
|
||
Bootstrap.</li>
|
||
<li><a href="https://github.com/np-8/dash-uploader">dash-uploader</a> -
|
||
Upload component for Dash. Supports large data files.</li>
|
||
<li><a href="https://github.com/snehilvj/dash-mantine-components">Dash
|
||
Mantine Components</a> - Collection of 40+ Dash components based on
|
||
Mantine React Components library.</li>
|
||
<li><a
|
||
href="https://github.com/predict-idlab/plotly-resampler">plotly-resampler</a>
|
||
- Wrapper for plotly figures that adds data downsampling (aggregating)
|
||
functionality, enabling the visualization of large datasets.</li>
|
||
</ul>
|
||
<h2 id="app-examples">App Examples</h2>
|
||
<ul>
|
||
<li><a href="https://plot.ly/dash/gallery/new-york-oil-and-gas/">Oil and
|
||
Gas Explorer</a> - Explore oil and gas production over time and with
|
||
linked visualisations. <a
|
||
href="https://github.com/plotly/dash-oil-and-gas-demo">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/uber-rides/">Uber Rides</a> -
|
||
Displays all of the Uber rides in New York City in 2014. Pandas on the
|
||
backend filters a 0.5gig datafile. <a
|
||
href="https://github.com/plotly/dash-uber-rides-demo">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/stock-tickers/">Simple Stock
|
||
Tickers</a> - Queries data from Google Finance and displays the results
|
||
as candlestick charts. <a
|
||
href="https://github.com/plotly/dash-stock-tickers-demo-app">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/volatility-surface">Volatility
|
||
Surface Explorer</a> - 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. <a
|
||
href="https://github.com/plotly/dash-volatility-surface">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/drug-explorer/">Drug
|
||
Discovery</a> - Displays a description of the drug as you hover over
|
||
points in the graph. <a
|
||
href="https://github.com/plotly/dash-drug-discovery-demo/">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/live-wind-data/">Live Wind
|
||
Streaming</a> - Continually queries a SQL database and displays live
|
||
charts of wind speed and wind direction. <a
|
||
href="https://github.com/plotly/dash-sample-apps/tree/main/apps/dash-wind-streaming">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/recession-report/">Recession
|
||
in 255 Charts</a> - Adapted from NYTimes’s excellent <a
|
||
href="https://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html">How
|
||
the Recession Reshaped the Economy in 255 Charts</a>. <a
|
||
href="https://github.com/plotly/dash-recession-report-demo">Source
|
||
Code.</a></li>
|
||
<li><a href="https://plot.ly/dash/gallery/yield-curve/">3D Yield
|
||
Curve</a> - Adapted from NYTimes’s excellent <a
|
||
href="https://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html">A
|
||
3-D View of a Chart That Predicts The Economic Future: The Yield
|
||
Curve</a>. <a href="https://github.com/plotly/dash-yield-curve">Source
|
||
Code.</a></li>
|
||
<li><a href="https://bigfoot-sightings-dash.herokuapp.com/">Finding
|
||
Bigfoot</a> - Several plots (including a map), a grid layout built with
|
||
Bootstrap, interactions with an input field, and caching (See also <a
|
||
href="#tutorials">Tutorials</a>). <a
|
||
href="https://github.com/timothyrenner/bigfoot-dash-app">Source
|
||
Code.</a></li>
|
||
<li><a href="https://belle-croissant-54211.herokuapp.com/">Visualize
|
||
Earthquakes with Plotly Dash</a> - Great UI and usage of geospatial
|
||
analytics with Dash. Includes <a
|
||
href="https://github.com/jackdbd/dash-earthquakes/tree/master/tests">basic
|
||
unit tests</a>. <a
|
||
href="https://github.com/jackdbd/dash-earthquakes">Source Code.</a></li>
|
||
<li><a href="https://squid-syracuse.herokuapp.com/">Street Quality
|
||
IDentification [SQUID]</a> - Highlights poor quality roads with maps,
|
||
data table and photos of the offending piece of road. <a
|
||
href="https://github.com/amyoshino/SQUID-Syracuse-Dashboard">Source
|
||
Code.</a></li>
|
||
<li><a href="http://lukas-snoek.com/voxelviz">VoxelViz</a> - Competition
|
||
winning Visualization tool for (f)MRI data-sets. <a
|
||
href="https://github.com/lukassnoek/VoxelViz">Source Code.</a></li>
|
||
<li><a href="https://traffic-accidents-uk.herokuapp.com/">Traffic
|
||
Accidents UK</a> - Explore the 140,008 traffic accidents in the UK in
|
||
2015. <a href="https://github.com/richard-muir/uk-car-accidents">Source
|
||
Code.</a></li>
|
||
<li><a href="https://dash.vaex.io/">New York Taxi Rides</a> - 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. <a
|
||
href="https://github.com/vaexio/dash-120million-taxi-app">Source
|
||
Code.</a></li>
|
||
<li><a href="https://gutensearch.com/">GutenSearch</a> - Look inside the
|
||
books of Project Gutenberg. <a
|
||
href="https://github.com/cordb/gutensearch">Source Code.</a></li>
|
||
</ul>
|
||
<h2 id="idiomatic-examples">Idiomatic examples</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/plotly/dash-recipes">Dash recipes</a> -
|
||
A collection of scripts and examples created of the plotly team while
|
||
answering questions from the greater Dash community.</li>
|
||
</ul>
|
||
<h2 id="galleries">Galleries</h2>
|
||
<ul>
|
||
<li><a href="https://plot.ly/dash/gallery">Plotly App Gallery</a> -
|
||
Plotly’s collection of Dash applications.</li>
|
||
<li><a href="https://github.com/plotly/dash-recipes">Dash Recipes
|
||
GitHub</a> - Collection of scripts and examples created while answering
|
||
questions from the greater Dash community.</li>
|
||
<li><a href="https://www.dashboardom.com/">Dash Data Dashboards and
|
||
Apps</a> - Collection of data dashboards with real life data, for
|
||
various topics, as well as a few apps for online marketing built with
|
||
Dash.</li>
|
||
</ul>
|
||
<h2 id="talks">Talks</h2>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=eusglTlW4OA">Dash: Data
|
||
exploration web apps in pure Python</a> - Chelsea Douglas, PyData DC
|
||
2018.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=sea2K4AuPOk">Overview of
|
||
Dash</a> - Chris Parmer, creator of Dash (SciPy 2017).</li>
|
||
<li><a href="https://www.youtube.com/watch?v=5BAthiN0htc&t=1s">We’re
|
||
Launching Dash</a> - Chris Parmer, creator of Dash, speaking about the
|
||
motivations behind Dash before it was launched (Plotcon NYC 2016).</li>
|
||
<li><a
|
||
href="https://www.slideshare.net/vladimirkazantsev/plotly-dash-and-data-visualisation-in-python">Plotly
|
||
dash and data visualisation in Python, PyData, Berlin 2017</a> -
|
||
Volodymyr Kazantsev (slides only).</li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.amazon.com/Interactive-Dashboards-Data-Apps-Plotly-ebook/dp/B08XMW45VY">Interactive
|
||
Dashboards and Data Apps with Plotly and Dash</a>: Harness the power of
|
||
a fully fledged frontend web framework in Python – no JavaScript
|
||
required.</li>
|
||
</ul>
|
||
<h2 id="cheat-sheets">Cheat sheets</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf">plotly.py
|
||
Cheat Sheet</a></li>
|
||
</ul>
|
||
<h2 id="community">Community</h2>
|
||
<ul>
|
||
<li><a href="https://community.plot.ly">Plotly hosted Question and
|
||
Answer community</a></li>
|
||
<li><a
|
||
href="https://stackoverflow.com/questions/tagged/plotly-dash">Stack
|
||
Overflow</a></li>
|
||
</ul>
|
||
<h2 id="contributors">Contributors</h2>
|
||
<ul>
|
||
<li><a href="https://lukesingham.com/">Luke Singham</a></li>
|
||
<li><a href="https://alysivji.github.io/">Aly Sivji</a></li>
|
||
<li><a href="https://github.com/chriddyp">Chris Parmer</a></li>
|
||
<li><a href="https://github.com/pikhovkin">Sergey Pikhovkin</a></li>
|
||
<li><a href="https://pascalbugnion.net">Pascal Bugnion</a></li>
|
||
<li><a href="https://github.com/fkromer">Florian Kromer</a></li>
|
||
<li><a href="https://www.dashboardom.com">Elias Dabbas</a></li>
|
||
<li><a href="https://github.com/vaexio">vaexio</a></li>
|
||
<li><a href="https://github.com/pingf">Fanchao MENG</a></li>
|
||
<li><a href="https://github.com/snehilvj">Snehil Vijay</a></li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a><br />This work is licensed under a
|
||
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative
|
||
Commons Attribution 4.0 International License</a>.</p>
|