+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.sickgaming.net/forum-83.html)
+--- Thread: [Tut] Plotly Dash vs. Streamlit (/thread-100462.html)
[Tut] Plotly Dash vs. Streamlit - xSicKxBot - 12-24-2022
Plotly Dash vs. Streamlit
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"997098","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<h2>What are Plotly Dash and Streamlit?</h2>
<p class="has-global-color-8-background-color has-background">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.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><a href="https://plotly.com/dash/" target="_blank" rel="noreferrer noopener"><img loading="lazy" decoding="async" width="1024" height="589" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-306-1024x589.png" alt="" class="wp-image-997124" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-306-1024x589.png 1024w, https://blog.finxter.com/wp-content/uploads/2022/12/image-306-300x172.png 300w, https://blog.finxter.com/wp-content/uploads/2022/12/image-306-768x442.png 768w, https://blog.finxter.com/wp-content/uploads/2022/12/image-306-1536x883.png 1536w, https://blog.finxter.com/wp-content/uploads/2022/12/image-306-2048x1177.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>
</div>
<p>Some key differences between <a href="https://blog.finxter.com/python-plotly-dash-cheat-sheet/" data-type="post" data-id="28074" target="_blank" rel="noreferrer noopener">Plotly Dash</a> and <a href="https://blog.finxter.com/learning-streamlits-buttons-features/" data-type="post" data-id="462652" target="_blank" rel="noreferrer noopener">Streamlit</a> include:</p>
<ul>
<li><strong>Dashboarding capabilities</strong>: Plotly Dash is a full-featured framework for building dashboards and applications, while Streamlit primarily focuses on creating data visualization and exploration tools.</li>
<li><strong>Programming style</strong>: 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.</li>
<li><strong>Data handling</strong>: Both libraries can handle large datasets and support streaming data, but Plotly Dash has more advanced capabilities for managing and manipulating data.</li>
</ul>
<p>Supported programming language: While Streamlit is limited to Python, Plotly Dash also supports <a href="https://blog.finxter.com/r-developer-income-and-opportunity/" data-type="post" data-id="202162" target="_blank" rel="noreferrer noopener">R</a>, <a href="https://blog.finxter.com/julia-developer-income-and-opportunity/" data-type="post" data-id="189355" target="_blank" rel="noreferrer noopener">Julia</a>, and <a href="https://blog.finxter.com/f-developer-income-and-opportunity/" data-type="post" data-id="189362" target="_blank" rel="noreferrer noopener">F#</a> (experimental).</p>
<p>Ultimately, the choice between Plotly Dash and Streamlit depends on your specific needs and preferences. </p>
<ul>
<li>If you are looking for a more full-featured framework for building complex dashboards and applications, Plotly Dash may be the better choice. </li>
<li>If you want a more streamlined tool for creating simple visualizations and data exploration tools, Streamlit may be a better fit.</li>
</ul>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f30d.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/python-dash-how-to-build-a-dashboard/" data-type="post" data-id="19632" target="_blank" rel="noreferrer noopener">Build Your First App with Plotly Dash</a></p>
<h2>Underlying Technology</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="915" height="610" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-307.png" alt="" class="wp-image-997126" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-307.png 915w, https://blog.finxter.com/wp-content/uploads/2022/12/image-307-300x200.png 300w, https://blog.finxter.com/wp-content/uploads/2022/12/image-307-768x512.png 768w" sizes="(max-width: 915px) 100vw, 915px" /></figure>
</div>
<p>Plotly Dash is built on top of the <code>Plotly.js</code> library for creating interactive charts and plots, and the <a href="https://blog.finxter.com/build-website-with-flask-part-1/" data-type="post" data-id="238699" target="_blank" rel="noreferrer noopener">Flask web framework</a> for building web applications.</p>
<p class="has-global-color-8-background-color has-background"><strong>React</strong>: Streamlit uses the <a href="https://blog.finxter.com/react-js-developer-income-and-opportunity/" data-type="post" data-id="246095" target="_blank" rel="noreferrer noopener">React JavaScript</a> 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.</p>
<p>The application runs on the server side and the user interacts with it through a web browser.</p>
<p>The server sends the HTML, CSS, and JavaScript to the client, and the client’s web browser renders the application and handles user interactions.</p>
<p>Dash uses a declarative syntax called “<a rel="noreferrer noopener" href="https://blog.finxter.com/your-first-dash-app-how-to-get-started-in-4-minutes-or-less/" data-type="post" data-id="27820" target="_blank">Dash HTML Components</a>” to build the application, which allows developers to define the layout and interactivity of the application in a simple, intuitive way.</p>
<p>Under the hood, Streamlit uses several technologies and libraries to provide its functionality. Some of these technologies include:</p>
<ul>
<li>HTML, CSS, and JavaScript: 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.</li>
<li>React: Streamlit uses the React JavaScript library to build interactive user interfaces. </li>
</ul>
<p>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.</p>
<h2>Pros and Cons Plotly Dash</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="418" height="610" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-309.png" alt="" class="wp-image-997132" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-309.png 418w, https://blog.finxter.com/wp-content/uploads/2022/12/image-309-206x300.png 206w" sizes="(max-width: 418px) 100vw, 418px" /></figure>
</div>
<p>Here are some pros and cons of using Plotly Dash:</p>
<h3>Pros</h3>
<p>(1) <strong>Full-featured framework:</strong> 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.</p>
<p>(2) <strong>Strong visualization capabilities:</strong> 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.</p>
<p>(3) <strong>Active community:</strong> Plotly Dash has a large and active user base, with extensive documentation and support resources available, including forums, tutorials, and examples.</p>
<h3>Cons</h3>
<p>(1) <strong>Steep learning curve:</strong> 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.</p>
<p>(2) <strong>Performance:</strong> 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.</p>
<p>(3) <strong>Complexity:</strong> 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.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://www.amazon.com/Python-Dash-Christian-Mayer-dp-1718502222/dp/1718502222" data-type="URL" data-id="https://www.amazon.com/Python-Dash-Christian-Mayer-dp-1718502222/dp/1718502222" target="_blank" rel="noreferrer noopener">The Book of Plotly Dash</a></p>
<h2>Pros and Cons Streamlit</h2>
<h3>Pros</h3>
<p>(1) <strong>Simplicity:</strong> 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.</p>
<p>(2) <strong>Interactive programming style:</strong> 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.</p>
<p>(3) <strong>Good performance:</strong> Streamlit applications tend to be fast and responsive, even with large datasets and complex visualizations.</p>
<h3>Cons</h3>
<p>(1) <strong>Limited capabilities:</strong> 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.</p>
<p>(2) <strong>Limited layout options:</strong> 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.</p>
<h2>Which Community Is Larger?</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1024" height="717" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-301.png" alt="" class="wp-image-997113" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-301.png 1024w, https://blog.finxter.com/wp-content/uploads/2022/12/image-301-300x210.png 300w, https://blog.finxter.com/wp-content/uploads/2022/12/image-301-768x538.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption"><strong>Fig. 1</strong>: Popularity of Plotly Dash and Streamlit (and other frameworks) on Github.</figcaption></figure>
</div>
<p>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.</p>
<h2>Plotly Dash code example line chart</h2>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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)
</pre>
<p>This code creates a Dash application with a single page containing a line chart. The chart is defined using the <code>dcc.Graph</code> component, which takes a figure argument that specifies the data and layout of the chart. The figure argument is a <a href="https://blog.finxter.com/python-dictionary/" data-type="post" data-id="5232" target="_blank" rel="noreferrer noopener">dictionary</a> containing two keys: </p>
<ul>
<li><code>data</code>, which is a list of traces (i.e. data series) to plot on the chart, and </li>
<li><code>layout</code>, which is a dictionary of layout options for the chart.</li>
</ul>
<p>In this example, the chart has two data series, <code>y1</code> and <code>y2</code>, with <code>x</code> and <code>y</code> values specified for each series. The type of each trace is set to <code>'line'</code> to create a line chart. The layout options specify a title for the chart.</p>
<p>Finally, the application is started by calling <code>app.run_server()</code>. This will start a local web server and open the application in a web browser. The <code>debug=True</code> argument enables debugging mode, which allows the application to be reloaded automatically when the code is changed.</p>
<p>You run the app via</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">python app.py</pre>
<p>In your terminal following message (or similar) should appear.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="595" height="118" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-302.png" alt="" class="wp-image-997114" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-302.png 595w, https://blog.finxter.com/wp-content/uploads/2022/12/image-302-300x59.png 300w" sizes="(max-width: 595px) 100vw, 595px" /><figcaption class="wp-element-caption"><strong>Fig. 2</strong>: Typical terminal messages after starting the Dash app.</figcaption></figure>
</div>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="556" height="425" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-303.png" alt="" class="wp-image-997115" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-303.png 556w, https://blog.finxter.com/wp-content/uploads/2022/12/image-303-300x229.png 300w" sizes="(max-width: 556px) 100vw, 556px" /><figcaption class="wp-element-caption"><strong>Fig. 3</strong>: Screenshot of Dash app.</figcaption></figure>
</div>
<h2>Streamlit code example line chart</h2>
<p>A simple app displaying two line charts could be created by the following code:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import streamlit as st data = {'x': [1,2,3], 'y1': [4,1,2], 'y2': [2,4,5]}
st.line_chart(data= data, x='x')
</pre>
<p>This code creates a line chart with two data series, <code>y1</code> and <code>y2</code>, using the <code>line_chart</code> function. The <code>x</code> and <code>y</code> values for each series are specified as separate lists. The <code>x_axis</code> parameter specifies the values for the x-axis.</p>
<p>Supposing you saved the above code as <code>‘app.py’</code> you start the app via</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">streamlit run app.py</pre>
<p>In your terminal following message (or similar) should appear.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="382" height="77" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-304.png" alt="" class="wp-image-997118" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-304.png 382w, https://blog.finxter.com/wp-content/uploads/2022/12/image-304-300x60.png 300w" sizes="(max-width: 382px) 100vw, 382px" /><figcaption class="wp-element-caption"><strong>Fig. 4</strong>: Typical terminal messages after starting the Streamlit app.</figcaption></figure>
</div>
<p>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.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="572" height="422" src="https://blog.finxter.com/wp-content/uploads/2022/12/image-305.png" alt="" class="wp-image-997119" srcset="https://blog.finxter.com/wp-content/uploads/2022/12/image-305.png 572w, https://blog.finxter.com/wp-content/uploads/2022/12/image-305-300x221.png 300w" sizes="(max-width: 572px) 100vw, 572px" /><figcaption class="wp-element-caption"><strong>Fig. 5:</strong> Screenshot of Streamlit app.</figcaption></figure>
</div>
<p>The <code>line_chart</code> 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.</p>
<p>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.</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
</div>
https://www.sickgaming.net/blog/2022/12/23/plotly-dash-vs-streamlit/