What are Plotly Dash and Streamlit?

Plotly Dash and Streamlit are both open-source Python libraries for creating interactive web applications for data visualization and analysis. The libraries are designed to make it easy for developers to create visually appealing and informative dashboards and reports that can be shared with others through a web browser.

Some key differences between Plotly Dash and Streamlit include:

• Dashboarding capabilities: Plotly Dash is a full-featured framework for building dashboards and applications, while Streamlit primarily focuses on creating data visualization and exploration tools.
• Programming style: Plotly Dash uses a traditional web application programming model, with a server-side rendering of the dashboard and client-side interactivity. Streamlit, on the other hand, uses a more interactive programming style, with the developer writing code in a script and the library automatically generating the web application.
• Data handling: Both libraries can handle large datasets and support streaming data, but Plotly Dash has more advanced capabilities for managing and manipulating data.

Supported programming language: While Streamlit is limited to Python, Plotly Dash also supports R, Julia, and F# (experimental).

Ultimately, the choice between Plotly Dash and Streamlit depends on your specific needs and preferences.

• If you are looking for a more full-featured framework for building complex dashboards and applications, Plotly Dash may be the better choice.
• If you want a more streamlined tool for creating simple visualizations and data exploration tools, Streamlit may be a better fit.

Recommended Tutorial: Build Your First App with Plotly Dash

Underlying Technology

Plotly Dash is built on top of the Plotly.js library for creating interactive charts and plots, and the Flask web framework for building web applications.

React: Streamlit uses the React JavaScript library to build interactive user interfaces. React allows you to build complex UI components using reusable and modular code, making it easy to build interactive dashboards and data visualization applications.

The application runs on the server side and the user interacts with it through a web browser.

The server sends the HTML, CSS, and JavaScript to the client, and the client’s web browser renders the application and handles user interactions.

Dash uses a declarative syntax called “Dash HTML Components” to build the application, which allows developers to define the layout and interactivity of the application in a simple, intuitive way.

Under the hood, Streamlit uses several technologies and libraries to provide its functionality. Some of these technologies include:

• HTML, CSS, and J‌avaScript: Streamlit generates web pages that are rendered in the user’s web browser. These pages are written in HTML, CSS, and JavaScript, which are the three main technologies used to build modern web applications.
• React: Streamlit uses the React JavaScript library to build interactive user interfaces.

Both Plotly Dash and Streamlit use JavaScript libraries to provide interactivity and visualizations in the web browser. However, the way that these libraries are used and integrated into the overall application is different in the two frameworks.

Pros and Cons Plotly Dash

Here are some pros and cons of using Plotly Dash:

Pros

(1) Full-featured framework: Plotly Dash is a comprehensive framework for building dashboards and web applications. It provides various tools and features for creating interactive visualizations, handling and manipulating data, and building complex layouts and interactions.

(2) Strong visualization capabilities: Plotly Dash is built on top of the Plotly.js library, which provides a wide range of chart types and options for visually appealing and informative visualizations.

(3) Active community: Plotly Dash has a large and active user base, with extensive documentation and support resources available, including forums, tutorials, and examples.

Cons

(1) Steep learning curve: Plotly Dash is a powerful and feature-rich framework, which can make it a bit more difficult to learn than some other libraries. It may take some time to become familiar with all of the features and capabilities of the library.

(2) Performance: Depending on the complexity of the application and the amount of data being processed, Plotly Dash applications can sometimes be slower to render and interact with than some other libraries.

(3) Complexity: Because Plotly Dash is a full-featured framework, it can be somewhat more complex than other libraries focused on a specific use case. This can make it a bit more challenging for new users to get started with the library.

Recommended: The Book of Plotly Dash

Pros and Cons Streamlit

Pros

(1) Simplicity: Streamlit is designed to be easy to use and learn, with a streamlined API and automatic web application generation. This makes it a good choice for developers who want to quickly create simple visualizations and data exploration tools.

(2) Interactive programming style: Streamlit uses an interactive programming style, allowing the developer to write a script and see the results immediately in the web browser. This can be a more intuitive and interactive way of working compared to traditional web application frameworks.

(3) Good performance: Streamlit applications tend to be fast and responsive, even with large datasets and complex visualizations.

Cons

(1) Limited capabilities: Streamlit is primarily focused on creating simple visualizations and data exploration tools, and may not have all of the features and capabilities of a more full-featured framework like Plotly Dash.

(2) Limited layout options: Streamlit provides a limited set of layout options compared to some other libraries, which can make it more difficult to create complex layouts and interactions.

Which Community Is Larger?

It’s difficult to say for certain which community is larger, as both Plotly Dash and Streamlit have active user bases and are widely used in the data science and web development communities.

Both libraries have substantial documentation and support resources, including extensive documentation, tutorials, and examples on their websites, as well as active forums and communities where users can ask questions and get help.

In general, Plotly Dash may have a slightly larger community, as it has been around longer and is a more full-featured framework for building dashboards and web applications. Streamlit, on the other hand, has gained popularity more recently and is focused on a specific use case (creating data visualization and exploration tools) rather than being a general-purpose framework.

Ultimately, the choice between Plotly Dash and Streamlit will depend on your specific needs and preferences, as well as the resources and support available in the community for the library you choose.

Plotly Dash code example line chart

import dash

import dash_core_components as dcc

import dash_html_components as html app = dash.Dash() app.layout = html.Div([ dcc.Graph( id='line-chart', figure={ 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'line', 'name': 'NYC'}, ], 'layout': { 'title': 'Line Chart' } } )

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

This code creates a Dash application with a single page containing a line chart. The chart is defined using the dcc.Graph component, which takes a figure argument that specifies the data and layout of the chart. The figure argument is a dictionary containing two keys:

• data, which is a list of traces (i.e. data series) to plot on the chart, and
• layout, which is a dictionary of layout options for the chart.

In this example, the chart has two data series, y1 and y2, with x and y values specified for each series. The type of each trace is set to 'line' to create a line chart. The layout options specify a title for the chart.

Finally, the application is started by calling app.run_server(). This will start a local web server and open the application in a web browser. The debug=True argument enables debugging mode, which allows the application to be reloaded automatically when the code is changed.

You run the app via

python app.py

In your terminal following message (or similar) should appear.

Streamlit code example line chart

A simple app displaying two line charts could be created by the following code:

import streamlit as st data = {'x': [1,2,3], 'y1': [4,1,2], 'y2': [2,4,5]}

st.line_chart(data= data, x='x')

This code creates a line chart with two data series, y1 and y2, using the line_chart function. The x and y values for each series are specified as separate lists. The x_axis parameter specifies the values for the x-axis.

Supposing you saved the above code as ‘app.py’ you start the app via

streamlit run app.py

In your terminal following message (or similar) should appear.

In case the app doesn’t automatically open a tab in your browser you can open the app by following the ‘Local URL’ or ‘Network URL’ links.

The line_chart function automatically generates the web application and displays the chart in the browser. There is no need to write any code to define the layout or interactivity of the application.

Streamlit also provides a wide range of other functions for creating different types of charts and visualizations, as well as tools for building custom layouts and interactions. You can find more information and examples in the Streamlit documentation.

---