Convert Figma logo to code with AI

plotly logodash

Data Apps & Dashboards for Python. No JavaScript Required.

21,148
2,042
21,148
462

Top Related Projects

34,470

Streamlit — A faster way to build and share data apps.

19,206

Interactive Data Visualization in the browser, from Python

4,617

Panel: The powerful data exploration & web app framework for Python

5,383

Voilà turns Jupyter notebooks into standalone web applications

Visually explore, understand, and present your data.

Quick Overview

Dash is a Python framework for building analytical web applications. It allows users to create interactive dashboards and data visualization apps using pure Python, without the need for JavaScript or HTML. Dash is built on top of Flask, Plotly.js, and React.js, making it powerful yet easy to use.

Pros

  • Easy to learn and use, especially for those familiar with Python
  • Highly customizable and extensible
  • Supports reactive and callback-based programming
  • Integrates well with other data science libraries like Pandas and Scikit-learn

Cons

  • Performance can be slower compared to native JavaScript frameworks
  • Limited built-in UI components compared to some other frameworks
  • Steeper learning curve for advanced customizations
  • Documentation can be overwhelming for beginners

Code Examples

  1. Creating a simple Dash app with a graph:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='example-graph'),
    dcc.Slider(id='year-slider', min=1952, max=2007, step=5, value=1952)
])

@app.callback(
    Output('example-graph', 'figure'),
    Input('year-slider', 'value')
)
def update_figure(selected_year):
    df = px.data.gapminder()
    filtered_df = df[df.year == selected_year]
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", size="pop", color="continent", hover_name="country")
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)
  1. Adding a data table to a Dash app:
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
  1. Creating a multi-page Dash app:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

index_layout = html.Div([
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])

page_1_layout = html.Div([
    html.H1('Page 1'),
    dcc.Link('Go back to home', href='/')
])

page_2_layout = html.Div([
    html.H1('Page 2'),
    dcc.Link('Go back to home', href='/')
])

@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_layout

if __name__ == '__main__':
    app.run_server(debug=True)

Getting Started

To get started with Dash, follow these steps:

  1. Install Dash and its dependencies:

    pip install dash plotly pandas
    
  2. Create a

Competitor Comparisons

34,470

Streamlit — A faster way to build and share data apps.

Pros of Streamlit

  • Simpler and more intuitive API, allowing for faster development
  • Built-in widgets and components for common data science tasks
  • Automatic UI updates based on script changes

Cons of Streamlit

  • Less flexibility in layout and design compared to Dash
  • Limited support for complex, multi-page applications
  • Fewer options for customization and advanced interactivity

Code Comparison

Streamlit example:

import streamlit as st
import pandas as pd

df = pd.read_csv("data.csv")
st.line_chart(df)

Dash example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd

app = dash.Dash(__name__)
df = pd.read_csv("data.csv")

app.layout = html.Div([
    dcc.Graph(id='graph'),
])

@app.callback(Output('graph', 'figure'), Input('graph', 'relayoutData'))
def update_graph(relayout_data):
    return {'data': [{'x': df['x'], 'y': df['y'], 'type': 'line'}]}

if __name__ == '__main__':
    app.run_server(debug=True)
19,206

Interactive Data Visualization in the browser, from Python

Pros of Bokeh

  • More flexible and customizable for advanced visualizations
  • Better performance for large datasets and real-time updates
  • Supports standalone HTML output without a server

Cons of Bokeh

  • Steeper learning curve, especially for beginners
  • Less extensive documentation and community support
  • Fewer built-in components for complex dashboards

Code Comparison

Bokeh:

from bokeh.plotting import figure, show
p = figure(title="Simple Line Plot")
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5])
show(p)

Dash:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(id='example-graph'),
])

if __name__ == '__main__':
    app.run_server(debug=True)

Both Bokeh and Dash are powerful libraries for creating interactive visualizations and dashboards in Python. Bokeh offers more flexibility and better performance for complex visualizations, while Dash provides a more streamlined approach for creating web applications with a focus on ease of use and integration with Plotly charts.

4,617

Panel: The powerful data exploration & web app framework for Python

Pros of Panel

  • More flexible layout system with reactive components
  • Supports a wider range of plotting libraries (Bokeh, Matplotlib, Plotly, etc.)
  • Easier integration with existing Python workflows and Jupyter notebooks

Cons of Panel

  • Smaller community and fewer resources compared to Dash
  • Less extensive documentation and examples
  • Steeper learning curve for beginners

Code Comparison

Panel:

import panel as pn
import numpy as np

def plot(n):
    return pn.pane.Matplotlib(plt.plot(np.random.randn(n)))

pn.interact(plot, n=pn.widgets.IntSlider(value=100, start=10, end=1000))

Dash:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Slider(id='n-slider', min=10, max=1000, value=100, step=10),
    dcc.Graph(id='plot')
])

@app.callback(Output('plot', 'figure'), Input('n-slider', 'value'))
def update_plot(n):
    return px.scatter(x=range(n), y=np.random.randn(n))

app.run_server(debug=True)

Both Panel and Dash offer powerful tools for creating interactive dashboards, but they cater to different use cases and preferences. Panel excels in flexibility and integration with existing Python workflows, while Dash provides a more structured approach with extensive documentation and a larger community.

5,383

Voilà turns Jupyter notebooks into standalone web applications

Pros of Voila

  • Seamless integration with Jupyter notebooks, allowing easy conversion of existing notebooks to web applications
  • Supports a wide range of Jupyter widgets and custom JavaScript libraries
  • Simpler setup process for users already familiar with Jupyter ecosystem

Cons of Voila

  • Less flexibility in layout and design compared to Dash
  • Limited interactivity options without custom JavaScript
  • Steeper learning curve for users not familiar with Jupyter notebooks

Code Comparison

Voila (in a Jupyter notebook):

import ipywidgets as widgets
from IPython.display import display

slider = widgets.IntSlider(description='Value')
output = widgets.Output()

display(slider, output)

with output:
    print(f"The slider value is: {slider.value}")

Dash:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Slider(id='slider', min=0, max=100, step=1, value=50),
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), Input('slider', 'value'))
def update_output(value):
    return f"The slider value is: {value}"

if __name__ == '__main__':
    app.run_server(debug=True)

Visually explore, understand, and present your data.

Pros of SandDance

  • Offers unique 3D visualizations and cube-based data representations
  • Provides smooth transitions between different chart types
  • Integrates well with Power BI and other Microsoft tools

Cons of SandDance

  • Less extensive documentation compared to Dash
  • Smaller community and fewer third-party extensions
  • Limited customization options for complex dashboards

Code Comparison

SandDance (TypeScript):

import * as vega from 'vega';
import { SandDance } from '@msrvida/sanddance-explorer';

const spec = {
  // Vega specification
};

SandDance.renderVegaSpec(spec);

Dash (Python):

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run_server(debug=True)

Summary

While SandDance excels in creating visually striking 3D visualizations and seamless transitions between chart types, Dash offers more extensive documentation, a larger community, and greater flexibility for building complex dashboards. SandDance is particularly useful for Microsoft-centric environments, whereas Dash provides a more versatile solution for web-based data visualization applications across various platforms.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Dash

CircleCI GitHub PyPI PyPI - Python Version GitHub commit activity

Dash is the most downloaded, trusted Python framework for building ML & data science web apps.

Built on top of Plotly.js, React and Flask, Dash ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical Python code. Read our tutorial (proudly crafted ❤️ with Dash itself).

  • Docs: Create your first Dash app in under 5 minutes

  • dash.gallery: Dash app gallery with Python & R code

Dash App Examples

Dash AppDescription
Sample Dash AppHere’s a simple example of a Dash App that ties a Dropdown to a Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just 43 lines of code (view the source).
Crossfiltering Dash AppDash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements. Here’s an example with 5 inputs, 3 outputs, and cross filtering. This app was composed in just 160 lines of code, all of which were Python.
Dash App with Mapbox map showing walmart store openingsDash uses Plotly.js for charting. About 50 chart types are supported, including maps.
Financial reportDash isn't just for dashboards. You have full control over the look and feel of your applications. Here's a Dash App that's styled to look like a PDF report.

To learn more about Dash, read the extensive announcement letter or jump in with the user guide.

Dash OSS & Dash Enterprise

With Dash Open Source, Dash apps run on your local laptop or workstation, but cannot be easily accessed by others in your organization.

Scale up with Dash Enterprise when your Dash app is ready for department or company-wide consumption. Or, launch your initiative with Dash Enterprise from the start to unlock developer productivity gains and hands-on acceleration from Plotly's team.

ML Ops Features: A one-stop shop for ML Ops: Horizontally scalable hosting, deployment, and authentication for your Dash apps. No IT or DevOps required.

  • App manager Deploy & manage Dash apps without needing IT or a DevOps team. App Manager gives you point & click control over all aspects of your Dash deployments.
  • Kubernetes scaling Ensure high availability of Dash apps and scale horizontally with Dash Enterprise’s Kubernetes architecture. No IT or Helm required.
  • No code auth Control Dash app access in a few clicks. Dash Enterprise supports LDAP, AD, PKI, Okta, SAML, OpenID Connect, OAuth, SSO, and simple email authentication.
  • Job Queue The Job Queue is the key to building scalable Dash apps. Move heavy computation from synchronous Dash callbacks to the Job Queue for asynchronous background processing.

Low-Code Features: Low-code Dash app capabilities that supercharge developer productivity.

  • Design Kit Design like a pro without writing a line of CSS. Easily arrange, style, brand, and customize your Dash apps.
  • Snapshot Engine Save & share Dash app views as links or PDFs. Or, run a Python job through Dash and have Snapshot Engine email a report when the job is done.
  • Dashboard Toolkit Drag & drop layouts, chart editing, and crossfilter for your Dash apps.
  • Embedding Natively embed Dash apps in an existing web application or website without the use of IFrames.

Enterprise AI Features: Everything that your data science team needs to rapidly deliver AI/ML research and business initiatives.

  • AI App Marketplace Dash Enterprise ships with dozens of Dash app templates for business problems where AI/ML is having the greatest impact.
  • Big Data for Pything Connect to Python's most popular big data back ends: Dask, Databricks, NVIDIA RAPIDS, Snowflake, Postgres, Vaex, and more.
  • GPU & Dask Acceleration Dash Enterprise puts Python’s most popular HPC stack for GPU and parallel CPU computing in the hands of business users.
  • Data Science Workspaces Be productive from Day 1. Write and execute Python, R, & Julia code from Dash Enterprise's onboard code editor.

See https://plotly.com/contact-us/ to get in touch.

Dash Enterprise

NPM DownloadsLast 30 Days