Visualization of Plots for Your Website

5 January 2019

Shiri Avni

    Table of Contents:

Warning! This page does not look good on small devices. The explanation for this follows below.

While the libraries Matplotlib or Seaborn are satisfactory visualization tools for graphs generated by a local desktop application, they don’t suffice when you want to embed interactive, crisp plots in your website. The most you can do with either of the former libraries is generate a static image. While there are numerous visualization tools devoted to browsers, selecting between them can be tricky. For this reason, I’d like to share my experiences with the two popular ones that I’ve used, Bokeh and PyPlot.

Bokeh

The Bokeh library is developed by a non-profit organization, and it’s both open-source and free. With over 300 contributors, it’s a library that you can count on to be up-to-date and active for the foreseeable future. Bokeh has solid documentation and excellent examples that you can play around with if you download the github directory. To start getting an inkling of of what Bokeh can do and how it works, we’ll look at a small example in the following section.

Pros

One of the pros of Bokeh is how easy it to set up a custom figure. Look at the short script and the accompanying plot below. Notice how easy it is to set up the custom tools that you want to appear in the plot’s toolbar, to add tool tips when hovering on points, and how similar the code structure is to Matplotlib. To embed the plot in your site, you create two html files (the HTML div and the Javascript script), and then you embed them as you would any other file; make sure to embed the script at the bottom of your HTML page so it doesn’t freeze the GUI.

from bokeh.plotting import figure, show, output_file
from bokeh.models import HoverTool

RANGE = 10
x = [i for i in range(RANGE)]
y = [2 ** i for i in range(RANGE)]
p = figure(tools="wheel_zoom,box_zoom,reset,save",
           active_scroll="wheel_zoom",
           title="Dummy plot",
           x_range=(-1, RANGE + 1),
           y_range=(-1, max(y) + 0.05 * max(y)))

#let's make lines!
p.line(x, y, legend="Interesting data", line_width=2, line_color="red")

#let's add a few circles
y_circles = [10*i for i in x]
p.circle(x, y_circles, radius=0.05, fill_color="green", fill_alpha=0.6, line_color=None)

hover = HoverTool(tooltips=[("(x,y)", "(@x, @y)")]) #hovertool for points
p.add_tools(hover)

output_file("bokeh_ex1.html", title="bokeh example 1", mode="cdn")
show(p)                           

While I enjoy using Bokeh, it does have a several, non-negligible drawbacks:

Cons

  1. No contour maps available.
  2. No option to add hover tools to lines (only points). This option would have been useful, e.g. if I wanted to display information about edges, such as flow or capacity.
  3. (Important) No support for anything but the most basic 3D plotting.
  4. (Important) As of Bokeh 1.0.4, plot sizing (by using the div and script, or an HTML iframe) doesn’t work well with the Bootstrap grid system. For instance, the plot toolbar gets cut off when you restrict the plot to a number of columns.
  5. (Important) Plots don’t resize automatically for small devices, so the plots look too large when viewed from a smartphone (so if you’re reading this on your phone, sorry!).

Plotly

The Plotly library is developed by the Plotly company, which has open-sourced this library (the company profits if you save their sheets online on their website). While a Bokeh plot requires two separate HTML files, with Plotly I only need to save one file. Also, in contrast to Bokeh, making pretty 3D plots is a breeze, as you can see in the graph below (code follows afterwards).