https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/ba-p/38168 <P><FONT face="verdana,geneva"><SPAN>In order to gain valuable insights from large and complex data, it is necessary to use contemporary tools and technology. Organizations may enhance their performance by using </SPAN></FONT><FONT face="verdana,geneva"><SPAN>data-driven choices and better knowledge of their operations with the correct tools. </SPAN></FONT><FONT face="verdana,geneva"><SPAN>Databricks has built-in support for </SPAN><A href="https://docs.databricks.com/sql/user/dashboards/index.html" target="_blank" rel="noopener"><SPAN>charts and visualizations</SPAN></A><SPAN> in both Databricks SQL and in notebooks. </SPAN><SPAN>On this page we will discuss another great utility for developing dashboards and applications in pure python called ‘Bokeh’.</SPAN></FONT></P><P><FONT face="verdana,geneva"><SPAN>Bokeh is a Python module for developing interactive visualizations compatible with web browsers.&nbsp; It enables you to create stunning visualizations, from straightforward plots to intricate dashboards with flowing statistics. Without programming any JavaScript yourself, you may build visualizations that are powered by JavaScript using Bokeh. It is a flexible visualization library that works with many different use cases.</SPAN></FONT></P><UL><LI><FONT face="verdana,geneva"><STRONG>Interactive visualizations: </STRONG><SPAN>Bokeh offers several ways to respond to browser-based interactions from users. A lot of this interactivity can be defined in Python, with no or only limited JavaScript required.</SPAN></FONT></LI><LI><FONT face="verdana,geneva"><STRONG>Web-Friendly:</STRONG><SPAN> Bokeh can generate complete HTML pages for Bokeh documents using the</SPAN> <A href="https://docs.bokeh.org/en/2.4.2/docs/reference/embed.html#bokeh.embed.file_html" target="_blank" rel="noopener"><SPAN>file_html()</SPAN></A> <SPAN>function.This html can be further embedded in Web applications and can be returned as a response for any given API.</SPAN></FONT></LI><LI><FONT face="verdana,geneva"><STRONG>Python integration:</STRONG><SPAN> Bokeh is a Python library and thus is easily adjustable for different use-cases and also integrates well with other popular Python libraries such as NumPy, Pandas, Matplotlib,Seaborn,Scikit-Learn, OpenCV etc.</SPAN></FONT></LI><LI><FONT face="verdana,geneva"><STRONG>Versatility:</STRONG><SPAN> Bokeh natively supports a variety of charts, like histograms, scatter plots, bar charts, stacked bar charts, line charts, data tables and even geospatial charts along with integration with other visualization libraries like Matplotlib, Seaborn etc.&nbsp;</SPAN></FONT></LI><LI><FONT face="verdana,geneva"><STRONG>Customizable: </STRONG><SPAN>Bokeh lets users customize their visualizations through different palettes, formatters and even allows custom HTML and CSS for custom or conditional formatting.</SPAN></FONT></LI><LI><FONT face="verdana,geneva"><STRONG>Accessibility: </STRONG><SPAN>Bokeh is open source and has a large community of developers actively contributing to its development and also has a large number of examples in its gallery to start with.</SPAN></FONT></LI></UL><P>&nbsp;</P><P><FONT face="verdana,geneva"><STRONG>We need to follow the below steps to create our dashboard:</STRONG></FONT></P><P>&nbsp;</P><P class="lia-align-justify"><FONT face="verdana,geneva"><SPAN>1. To begin, we will first install the necessary dependencies:&nbsp;We will be using Flask framework to create a shareable application and geopandas to create a world map as a visualization (optional), also we will be using databricks-sql-connector for fetching data from Delta tables.</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_0-1689958787852.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2935iF0568F731B660ACA/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_0-1689958787852.png" alt="AkshaySharma_0-1689958787852.png" /></span></FONT></P><P>&nbsp;</P><P class="lia-align-justify"><FONT face="verdana,geneva"><SPAN>2. Next we will configure </SPAN><A href="https://docs.databricks.com/dev-tools/python-sql-connector.html" target="_blank" rel="noopener"><SPAN>Databricks SQL connector</SPAN></A><SPAN> for fetching data from delta tables into Pandas Dataframes.</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_1-1689958787840.png" style="width: 747px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2933iA654BD56C251C8B2/image-dimensions/747x242?v=v2" width="747" height="242" role="button" title="AkshaySharma_1-1689958787840.png" alt="AkshaySharma_1-1689958787840.png" /></span></FONT></P><P><FONT face="verdana,geneva"><SPAN>Here </SPAN><I><SPAN>http_path </SPAN></I><SPAN>can be obtained from cluster config:</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_2-1689958787841.png" style="width: 732px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2934i1CB7AEEE03937F78/image-dimensions/732x430?v=v2" width="732" height="430" role="button" title="AkshaySharma_2-1689958787841.png" alt="AkshaySharma_2-1689958787841.png" /></span></FONT></P><P>&nbsp;</P><P class="lia-align-justify"><FONT face="verdana,geneva"><SPAN>3. Now we can proceed to create charts:</SPAN></FONT></P><P><FONT face="verdana,geneva" size="3"><SPAN>We will use a data set from the retail sector in this post. It includes data on orders that the company gets from clients in various nations with varying order priority (urgent, high, medium, low, others). To investigate some of the conclusions that may be drawn from this data collection, we will utilize visualizations.</SPAN></FONT></P><P><FONT face="verdana,geneva"><SPAN><STRONG>a) Line Chart:</STRONG>&nbsp;</SPAN>We can determine how the quantity of orders in the different order categories varies by year.</FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_3-1689958787850.png" style="width: 727px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2936iDE929C3B3590A40C/image-dimensions/727x383?v=v2" width="727" height="383" role="button" title="AkshaySharma_3-1689958787850.png" alt="AkshaySharma_3-1689958787850.png" /></span></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_4-1689958787853.png" style="width: 513px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2937i43793A16B3F99EDA/image-dimensions/513x513?v=v2" width="513" height="513" role="button" title="AkshaySharma_4-1689958787853.png" alt="AkshaySharma_4-1689958787853.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><SPAN><STRONG>b) Bar Chart:</STRONG>&nbsp;</SPAN><SPAN>We will plot revenue by individual countries over different years.</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_5-1689958787854.png" style="width: 706px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2938i9823FD9584A9DAF6/image-dimensions/706x381?v=v2" width="706" height="381" role="button" title="AkshaySharma_5-1689958787854.png" alt="AkshaySharma_5-1689958787854.png" /></span></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_6-1689958787834.png" style="width: 700px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2939i43C4DA5DE9C35A63/image-dimensions/700x420?v=v2" width="700" height="420" role="button" title="AkshaySharma_6-1689958787834.png" alt="AkshaySharma_6-1689958787834.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><STRONG>c) Data Table:&nbsp;</STRONG><FONT size="3"><SPAN>We can analyze the revenue by Customer IDs and improve the readability of the graphical representation and figure out which customers provide the most income.</SPAN></FONT></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_7-1689958787846.png" style="width: 700px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2941i0DEDF431C72D14FD/image-dimensions/700x255?v=v2" width="700" height="255" role="button" title="AkshaySharma_7-1689958787846.png" alt="AkshaySharma_7-1689958787846.png" /></span><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_8-1689958787836.png" style="width: 700px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2940i589A395FB879EC13/image-dimensions/700x507?v=v2" width="700" height="507" role="button" title="AkshaySharma_8-1689958787836.png" alt="AkshaySharma_8-1689958787836.png" /></span></FONT></P><P><FONT face="verdana,geneva"><SPAN>In this example let’s try to make this table a bit more beautiful by using HTML and CSS by using </SPAN><I><SPAN>HTMLTemplateFormatter</SPAN></I><SPAN> and adding formatter in the chart. The below code distinguishes customers based on revenue category – revenue &lt;= $1.5M, between $1.5M – $3.0M(included) and &gt; $3.0M:</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_9-1689958787837.png" style="width: 701px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2942iF33BEA8FDD45D67E/image-dimensions/701x344?v=v2" width="701" height="344" role="button" title="AkshaySharma_9-1689958787837.png" alt="AkshaySharma_9-1689958787837.png" /></span></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_10-1689958787848.png" style="width: 699px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2944i2738FAE4D7CBC671/image-dimensions/699x253?v=v2" width="699" height="253" role="button" title="AkshaySharma_10-1689958787848.png" alt="AkshaySharma_10-1689958787848.png" /></span></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_11-1689958787838.png" style="width: 700px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2943i9A2DCC407B186916/image-dimensions/700x490?v=v2" width="700" height="490" role="button" title="AkshaySharma_11-1689958787838.png" alt="AkshaySharma_11-1689958787838.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><STRONG>d) Map:&nbsp;</STRONG><FONT size="3"><SPAN>We can present the income from different nations in a more interesting way by using a globe map visualization.</SPAN></FONT></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_12-1689958787851.png" style="width: 701px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2947iC7F53799140B750F/image-dimensions/701x303?v=v2" width="701" height="303" role="button" title="AkshaySharma_12-1689958787851.png" alt="AkshaySharma_12-1689958787851.png" /></span></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_13-1689958787843.png" style="width: 701px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2945i6AE96D622006B223/image-dimensions/701x206?v=v2" width="701" height="206" role="button" title="AkshaySharma_13-1689958787843.png" alt="AkshaySharma_13-1689958787843.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><SPAN>Now we can proceed to create a full dashboard with 2 tabs:</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_14-1689958787844.png" style="width: 698px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2946iA6EF5F5439497DF5/image-dimensions/698x255?v=v2" width="698" height="255" role="button" title="AkshaySharma_14-1689958787844.png" alt="AkshaySharma_14-1689958787844.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><SPAN>In this Dashboard we will create a Tabbed layout with 2 tabs, between these tabs we will leverage the charts created above, With 2 Tabs with Tab 1 containing Line Chart, Bar Chart, Data Table and Tab 2 containing Map.</SPAN></FONT></P><P><FONT face="verdana,geneva"><STRONG>Tab 1:</STRONG></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_15-1689958787845.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2949i4AF3C4BBAD088560/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_15-1689958787845.png" alt="AkshaySharma_15-1689958787845.png" /></span></FONT></P><P><FONT face="verdana,geneva"><STRONG>&nbsp;Tab 2:&nbsp;</STRONG></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_16-1689958787868.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2948i6A0DEEADB7EBD871/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_16-1689958787868.png" alt="AkshaySharma_16-1689958787868.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><SPAN>Till the above step we have created all the charts and dashboard on Notebook Interface only. To convert this dashboard to a shareable dashboard we simply have to embed this application into the Flask framework.</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_17-1689958787852.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2950i7230BD059A17E036/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_17-1689958787852.png" alt="AkshaySharma_17-1689958787852.png" /></span></FONT></P><P><FONT face="verdana,geneva"><SPAN>And this URL can be shared with other users as well.</SPAN></FONT></P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_18-1689958787854.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2952iFE4D24F9CA21A55E/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_18-1689958787854.png" alt="AkshaySharma_18-1689958787854.png" /></span></FONT></P><P>&nbsp;</P><P><FONT face="verdana,geneva"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="AkshaySharma_19-1689958787856.png" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2951i1AB1AA573337EE98/image-size/large?v=v2&amp;px=999" role="button" title="AkshaySharma_19-1689958787856.png" alt="AkshaySharma_19-1689958787856.png" /></span></FONT></P><P><FONT face="verdana,geneva"><SPAN>In conclusion, Bokeh is a versatile and effective Python framework to create interactive visualizations for data exploration, analysis, and communication. Due to its user-friendly design and numerous customization possibilities, it can be an excellent tool for both new and expert users. It is a great tool for making charts that can be shared and incorporated in websites or applications due to its scalability and web friendliness. Users can quickly and easily generate complex visualizations at scale by utilising&nbsp;Databricks' distributed computing capabilities. They can also streamline their data analysis workflows, produce compelling graphs that effectively convey their findings, and take advantage of the platform's performance and scalability advantages. Furthermore Delta Tables’s features such as data versioning, data integrity checks, and optimizations can help with consistent and reliable data for visualization purposes. With Databricks' powerful data processing and analytics capabilities, along with Bokeh's visualization features, Users can extract key insights and make informed decisions.</SPAN></FONT></P><P><BR /><BR /></P><P><FONT face="verdana,geneva"><STRONG>Full databricks notebook can be found here :</STRONG></FONT></P><P><FONT face="verdana,geneva"><A href="https://github.com/AkshaySharma74/BokehDatabricks" target="_blank" rel="noopener"><SPAN>https://github.com/AkshaySharma74/BokehDatabricks</SPAN></A></FONT></P> Fri, 21 Jul 2023 17:53:27 GMT AkshaySharma 2023-07-21T17:53:27Z https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/ba-p/38168 <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Bokeh on Databricks" style="width: 999px;"><img src="https://community.databricks.com/t5/image/serverpage/image-id/2954i363746A6C6523743/image-size/large?v=v2&amp;px=999" role="button" title="akshay.png" alt="Bokeh on Databricks" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Bokeh on Databricks</span></span></P> Fri, 21 Jul 2023 17:53:27 GMT https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/ba-p/38168 AkshaySharma 2023-07-21T17:53:27Z https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/38273#M10 <P>Nice one&nbsp;<a href="https://community.databricks.com/t5/user/viewprofilepage/user-id/24236">@AkshaySharma</a>&nbsp;- Thanks for sharing! I am going to try it <span class="lia-unicode-emoji" title=":slightly_smiling_face:">🙂</span></P><P>I have a question : Does the Flask application bounded to the cluster i.e., Should the cluster be running to have dashboards online?</P> Mon, 24 Jul 2023 10:42:25 GMT https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/38273#M10 Murthy1 2023-07-24T10:42:25Z https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/38283#M11 <P><a href="https://community.databricks.com/t5/user/viewprofilepage/user-id/79247">@Murthy1</a>&nbsp;Yes, Flask application needs to be running, and users need to have access to cluster on which flask application is running. However for sharing static dashboard you can always save the page as html and share it.<BR /><BR />Hope this helps!</P> Mon, 24 Jul 2023 11:11:25 GMT https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/38283#M11 AkshaySharma 2023-07-24T11:11:25Z https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/39321#M16 <P>Nice sharing&nbsp;<a href="https://community.databricks.com/t5/user/viewprofilepage/user-id/24236">@AkshaySharma</a>!</P><P>I’m happy to know that I can use web server on Databricks.</P><P>Can I do the same thing using <A href="https://docs.databricks.com/en/notebooks/ipywidgets.html" target="_self">ipywidgets?</A></P> Tue, 08 Aug 2023 06:05:23 GMT https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/39321#M16 NCat 2023-08-08T06:05:23Z https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/39343#M17 <P><a href="https://community.databricks.com/t5/user/viewprofilepage/user-id/85909">@NCat</a>&nbsp;It depends on library to library, AFAIK while Bokeh itself provides feature to embed dashboards in Flask, I don't believe there is a direct hook available for the same in ipywidgets. However, ipywidgets can let you create HTMLs and flask do have the option of render_html, So strictly speaking it should be possible. But I have not tested this, so cannot be 100% sure.</P><P>&nbsp;</P><P>Hope this helps.</P> Tue, 08 Aug 2023 11:00:46 GMT https://community.databricks.com/t5/technical-blog/how-to-use-bokeh-to-build-a-shareable-dashboard-with-delta-lake/bc-p/39343#M17 AkshaySharma 2023-08-08T11:00:46Z