Interactive Plot and Widget Demo

The following are examples of the kinds of plots and widgets that can be easily embedded into a website. These examples come from technologies within the SciPy/PyData world. However, the technologies not exclusive to Python.

Simple Slider Widget

This first example is generated by the ipywidgets package. For more information, see here .

Interactive Vega Plot

This second example comes from the Vega package. Vega visualization can be easily created using the Altair python package. They can them be embedded into a website using the vega-embed library. Note that this plot is interactive in the sense that the hover action highlights the bar and shows a tooltip corresponding to the frequency of observations in the bin.

This next Vega plot demonstrates further interactivity. This plot is taken from the Altair gallery (see here). It demonstrates cross-highlighting. Selections in one chart affect the display of the other chart. Clicking on a bar in the histogram will select out the corresponding observations and updates the bivariate histogram on top. Clicking in the whitespace on the bottom histogram will reset the figure.

Interactive Plotly Plot

This third example is an attempt at replicating a visualization produced by The Economist (see here). This example uses the Plotly library. This library works on several platforms and languages, including Python, R, Matlab, Javascript, and others. This is a plot that I created locally and then uploaded to my account on the plotly website: plot.ly. From the plotly website, it is easy to share plots in a variety of ways. In this case, I used the share feature to export the plot to html code that references this plot saved under my plot.ly account.

Note that you can enable and disable the lines from various cities to make the graph easier to read as you explore this visualization. You can do this by clicking on the lines located in the legend of the figure. You can also isolate a single trace by double clicking it in the legend.

Jupyter Notebooks on Google Colaboratory

This final example is an example of sharing notebooks on Google's Colaboratory. Colaboratory is web app that allows you to run Jupyter notebooks in the browser. It has the added feature that you can edit Jupyter notebooks simultaneously, the way you do a Google Doc. Here, I've made a personal notebook shareable. I've provided a link here that sends you directly to the notebook in "sandbox" mode.

I made this link following the instruction found in this stack exchange answer. The link in structured like this: https://colab.research.google.com/notebook#fileId=1QBn6PK1ugN4sKu1zPONIhhrF54dH1XiN&offline=true&sandboxMode=true .