271 lines
13 KiB
HTML
271 lines
13 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="logo.webp" 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="#deployment">Deployment</a></li>
|
||
<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="deployment">Deployment</h2>
|
||
<ul>
|
||
<li><a href="https://ploomber.io">Ploomber Cloud</a> - The community
|
||
plan allows free deployments</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://dash.plotly.com/layout">Plotly’s tutorials - Part
|
||
1: App Layout</a></li>
|
||
<li><a href="https://dash.plotly.com/basic-callbacks">Plotly’s tutorials
|
||
- Part 2: Interactivity</a></li>
|
||
<li><a href="https://dash.plotly.com/interactive-graphing">Plotly’s
|
||
tutorials - Part 3: Interactive Graphing</a></li>
|
||
<li><a
|
||
href="https://dash.plotly.com/sharing-data-between-callbacks">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> -
|
||
Building 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://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.</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>
|
||
<li><a href="https://dash.plotly.com/plugins">Tutorial on creating
|
||
custom Dash components with React.js.</a></li>
|
||
</ul>
|
||
<h2 id="component-libraries">Component Libraries</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/ploomber/dash-pdf">Dash PDF</a> -
|
||
Display inline PDFs</li>
|
||
<li><a href="https://github.com/ploomber/dash-mui">Dash MUI</a> -
|
||
Material UI components</li>
|
||
<li><a href="https://github.com/ploomber/dash-react-simple-maps">Dash
|
||
React Simple Maps</a> - Create interactive maps</li>
|
||
<li><a href="https://github.com/ploomber/mosaic-python#dash-mosaic">Dash
|
||
Mosaic</a> - Display <a
|
||
href="https://github.com/uwdata/mosaic">Mosaic</a> plots</li>
|
||
<li><a href="https://github.com/ploomber/dash-tabler-icons">Dash Tabler
|
||
Icons</a> - Beautiful icons for your Dash apps</li>
|
||
<li><a
|
||
href="https://github.com/ploomber/dash-react-syntax-highlighter">Dash
|
||
React Syntax Highlighter</a> - Display code snippets with a copy
|
||
button</li>
|
||
<li><a href="https://dash.plotly.com/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.plotly.com/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.plotly.com/datatable">Dash DataTable
|
||
Component</a> - Interactive table that supports rich styling,
|
||
conditional formatting, editing, sorting, filtering, and more.</li>
|
||
<li><a href="https://dash.plotly.com/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/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.faculty.ai/">dash-bootstrap-components</a>
|
||
- Bootstrap components for Dash.</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>
|
||
<li><a
|
||
href="https://github.com/altair-viz/dash-vega-components">dash-vega-components</a>
|
||
- Dash component for Vega-Altair, Vega-Lite, and Vega charts.</li>
|
||
</ul>
|
||
<h2 id="app-examples">App Examples</h2>
|
||
<ul>
|
||
<li><a href="https://dash.gallery/dash-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://dash.gallery/dash-uber-rides-demo/">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-sample-apps/tree/main/apps/dash-uber-rides-demo">Source
|
||
Code.</a></li>
|
||
<li><a href="https://dash.gallery/dash-drug-discovery/">Drug
|
||
Discovery</a> - Displays a description of the drug as you hover over
|
||
points in the graph. <a
|
||
href="https://github.com/plotly/dash-sample-apps/tree/main/apps/dash-drug-discovery">Source
|
||
Code.</a></li>
|
||
<li><a href="https://dash.gallery/dash-wind-streaming/">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://dash.gallery/dash-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-sample-apps/tree/main/apps/dash-yield-curve">Source
|
||
Code.</a></li>
|
||
<li><a
|
||
href="https://dash-earthquakes-production-45eyyotfta-ey.a.run.app/">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://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://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>
|
||
<li><a href="https://dash.gallery/">Dash Gallery</a> - A collection of
|
||
Dash apps.</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="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>
|
||
<li><a href="https://github.com/edublancas">Eduardo Blancas</a></li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p>This work is licensed under a Creative Commons Attribution 4.0
|
||
International License.</p>
|
||
<p><a href="https://github.com/ucg8j/awesome-dash">dash.md
|
||
Github</a></p>
|