Bokeh: Creating Interactive Web-Based Visualizations in Python¶

Introduction¶

In the world of data visualization, the ability to create interactive and engaging graphics is essential for effective communication. Bokeh is a powerful Python library that allows users to create interactive plots, dashboards, and data applications that can be easily embedded into web applications. Designed for modern web browsers, Bokeh provides a flexible and intuitive interface for building complex visualizations with minimal effort. Whether you are a data scientist, analyst, or developer, Bokeh offers a rich set of tools to help you visualize your data in a compelling way.

Key features of Bokeh¶

1) Interactive Visualizations: 🔄¶

Supports dynamic plots with zoom, pan, and hover tools for a more interactive experience.

2) Web-Ready: 🔄¶

Generates HTML, JavaScript, and JSON outputs, making it easy to embed visualizations into web applications.

3) Wide Range of Plot Types: 🔄¶

Supports a variety of visualizations like line charts, bar charts, heatmaps, and geographical maps.

4) Real-Time Data Streaming: 🔄¶

Enables the creation of visualizations that can update in real time, ideal for live data monitoring.

5) High-Level and Low-Level APIs: 🔄¶

Offers both quick, high-level plotting and detailed, low-level control over visualizations.

6) Layouts and Widgets: 🔄¶

Allows combining multiple plots into layouts and adding interactive elements like sliders, buttons, and dropdowns.

7) Integration with Python Libraries: 🔄¶

Works seamlessly with libraries like Pandas and NumPy, making it ideal for data analysis and visualization.

Installing Bokeh in your system¶

Before you start building visualizations with Bokeh, you need to install it. Follow these simple steps:

In [22]:
from IPython.display import Image, display

display(Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\install_1.jpg"))
No description has been provided for this image
In [23]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\install_2.jpg")
Out[23]:
No description has been provided for this image
In [25]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\install_3.jpg")
Out[25]:
No description has been provided for this image

Verify Installation:¶

After installation, you can verify that Bokeh is installed correctly by running:

In [26]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\version.png")
Out[26]:
No description has been provided for this image

As shown above, the version is 3.6.3 it means Bokeh is installed correctly

Code Examples¶

Creating an Interactive Scatter Plot¶

Let's dive into a simple example to showcase Bokeh's capabilities:¶

Code¶

In [28]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\example_1.png")
Out[28]:
No description has been provided for this image

Output¶

In [29]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\solution_1.png")
Out[29]:
No description has been provided for this image

This code creates an interactive scatter plot using Bokeh. It defines x and y data points, stores them in a ColumnDataSource, and plots them as navy-colored circles. A HoverTool is added to display the x and y values when hovering over the points. The plot is displayed with labels for the x and y axes and a title. The show(p) function renders the plot in the browser.

lets look at one more basic example¶

In [30]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\example_2.png")
Out[30]:
No description has been provided for this image
In [31]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\solution_2.png")
Out[31]:
No description has been provided for this image

This code creates an interactive scatter plot where the size of the circles is determined by the size data. The plot includes tools for panning and zooming.

Types of Plots in Bokeh¶

Line Plot¶

In [32]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\line_plot.png")
Out[32]:
No description has been provided for this image
In [33]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\line_solution.png")
Out[33]:
No description has been provided for this image

Scatter Plot¶

In [34]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\scatter_plot.png")
Out[34]:
No description has been provided for this image
In [35]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\scatter_solution.png")
Out[35]:
No description has been provided for this image

Bar Chart¶

In [36]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\bar_chart.png")
Out[36]:
No description has been provided for this image
In [37]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\bar_solution.png")
Out[37]:
No description has been provided for this image

Histogram¶

In [38]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\histogram.png")
Out[38]:
No description has been provided for this image
In [39]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\histogram_solution.png")
Out[39]:
No description has been provided for this image

Use Cases¶

Data Exploration:¶

Bokeh is excellent for exploratory data analysis, allowing researchers to interact with their data visually.

Example: A researcher exploring the relationship between income and education levels across different regions. They can create a scatter plot using Bokeh where users can interact with the data (e.g., zoom, filter by region, or select a particular income range). This helps to spot trends and outliers in real-time.

Dashboard Creation:¶

With its layout tools, Bokeh can be used to create complex dashboards for data monitoring and analysis.

Example: A business analyst might build a dashboard displaying key metrics for a sales team, such as total sales, sales trends over time, and performance by region. Using Bokeh, they could create interactive plots like bar charts, pie charts, and time-series plots that update in real-time as new sales data comes in.

Scientific Visualization:¶

Researchers can use Bokeh to create publication-quality figures with interactive elements.

Example: A biologist visualizing the distribution of plant species across different habitats. They could use Bokeh to create an interactive map or a heatmap that highlights areas of high biodiversity, allowing users to zoom in and explore the data in detail. This makes it easy to identify regions of interest.

Financial Analysis:¶

Bokeh's ability to handle large datasets makes it suitable for visualizing financial data and stock market trends.

Example: A financial analyst tracking stock market trends. Bokeh can be used to create an interactive line chart showing the price of a particular stock over time, with the ability to overlay technical indicators, and zoom in on specific time periods to analyze patterns, making it a powerful tool for visualizing large financial datasets.

In [ ]:

Comparision with Matplotlib¶

Bokeh and Matplotlib are both powerful Python libraries for data visualization, but they serve different purposes and excel in distinct areas. Matplotlib, the older and more established library, is ideal for creating static, publication-quality plots with extensive customization options. It offers a wide range of plot types and has a relatively gentle learning curve, making it a go-to choice for many data scientists and researchers. Bokeh, on the other hand, shines in the realm of interactive, web-based visualizations. It leverages JavaScript, HTML, and CSS to create dynamic, responsive plots that users can explore in web browsers. Bokeh integrates seamlessly with web frameworks like Flask and Django, making it perfect for embedding interactive visualizations in web applications. While Matplotlib may have a performance edge for static plots, Bokeh's built-in interactivity tools (like zooming, panning, and hover tooltips) often require less code to implement compared to achieving similar functionality in Matplotlib. Ultimately, the choice between Bokeh and Matplotlib depends on your specific needs: choose Matplotlib for static, highly customizable plots, and opt for Bokeh when you need interactive, web-ready visualizations that can engage users and provide deeper insights into your data.

In [40]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\bokehVmatplotlib.png")
Out[40]:
No description has been provided for this image
In [41]:
from IPython.display import Image

# Display an image
Image(filename=r"C:\Users\user\OneDrive - iitgn.ac.in\Desktop\bokeh_plots.png")
Out[41]:
No description has been provided for this image

Conclusion¶

Bokeh is a versatile and powerful tool for creating interactive visualizations in Python. Its ability to generate JavaScript-powered plots without requiring JavaScript knowledge makes it accessible to data scientists and analysts who are comfortable with Python. With its rich feature set and customization options, Bokeh is an excellent choice for anyone looking to create engaging, web-based data visualizations

References & Further Reading¶

  1. Official Bokeh Documentation

  2. Bokeh Tutorial on Real Python

  3. Bokeh Gallery

  4. Interactive Data Visualization in Python With Bokeh