A Brief Look at Plotly

Recently, I worked on a project where one of the main goals was to create a series of highly interactive graphs in Python.  Since matplotlib, which is my usual go-to for graphing, has limited capabilities in this regard, I decided that I would need to try a different library in order to get the results that I wanted.  The solution I ended up using was the Plotly graphing library.  I was so impressed with my results and the capabilities of Plotly that I’ve decided this blog post will be dedicated to explaining a bit about the library and looking at some of its more interesting features.  

First, I’ll give a broad overview of Plotly and how it is structured.  Like many other Python modules, the main purpose of Plotly is to create, manipulate, and render graphical figures such as charts, plots, diagrams and even maps.  These figures are rendered using the Plotly.js JavaScript library and can be represented in Python as either dictionaries or as instances of the Plotly Figure class.  These are structured as trees with nodes called attributes, with the top level consisting of data, layout, and frames.  The data attribute contains a list of dictionaries referred to as “traces”.  There are forty different types of traces, which are essentially the different types of subplots that are available in the library (for example, scatter plots, pie charts, bar graphs, etc).  The “layout” attribute is another dictionary, this one controlling the position and configuration of the non-data parts of the figure.  Some examples of this would be the title, legend, font, and dimensions of the figure.  Finally, the third attribute “frames” defines the sequential frames in an animated plot.

Now for a bit about the interactivity options that led me to use Plotly for my recent project.  One very handy feature in this library is something called the Modebar, I’ve included an image of this below.  When you hover over the figure, this toolbar appears containing various configuration options.  These include zooming and panning capabilities, as well as an option to download the figure as a PNG file among other selections.  Plotly also includes settings to keep the Modebar visible at all times, as well as to prevent it from appearing entirely.  Some of the individual options within the Modebar can also be set, such as setting a specific size or file format for the downloaded version of figure, or adding/removing certain buttons on the bar.

Another interactivity feature that I found useful was the hover labels.  These are simply labels that appear when hovering the mouse cursor over a certain section of the graph.  I’ve included an image below showing a graph I made which used hover labels extensively.  Specifically, this figure employed a type of hover label available in Plotly known simply as “x”.  While normally a label will appear for a given x and y point when it is hovered over, with this option all of the points at a given x value will be labeled.  This was especially useful for me as I was comparing time series data, so showing a list of the values at a given x value was equivalent to viewing all of the prices on a certain date.  Plotly also gives the option to order the labels from highest to lowest, so as I moved along the x axis on my plot the label order changed to reflect the values at that specific date.  The library also gives options to customize the hover text by changing colors and fonts or even displaying custom data.  

Range sliders are another interesting feature I included to improve interactivity.  For simplicity’s sake I’ll discuss these as they appeared on my x axis.  This slider allowed me to manually adjust the date range that appeared, which was useful for examining a specific range within my data.  Either the beginning or end of the slider could be moved and would set a new start and end point for that range.  A particularly nice aspect of this feature is that the axis labels automatically scale along with the range, with both the tick distance and labels being adjusted.  

Now that I’ve discussed some of the features that I used for interactivity, I’d like to examine some of the more exciting and visually appealing options that Plotly includes.  This first graph pictured below not only looks nice, but I feel that it also manages to convey some fairly complicated data in a very clear way.  The model being used here is a k-Nearest Neighbors (kNN) classification.  The train and test splits have been plotted on top of a confidence map, with the shape of each point representing its binary value.  What this is essentially showing is the train and test values along with the probability that they are located in the correct section of the confidence map, the probability being illustrated by the darkness of the colors on the plot.  

This next plot showcases the ability of Plotly to interact with GeoJSON files that contain geometry information using mapbox.  This is a much simpler graph, simply showing the unemployment rate in each county.   As an input it simply takes the FIPS county code as well as the associated unemployment percentage. 
This is then referenced against the GeoJSON counties file and plotted on a map.  It is also color coded, with the legend on the right side showing the colors corresponding to each county’s unemployment rate.  This allows a viewer to quickly identify any geographic trends in the data, such as the cluster of high unemployment values located in Appalachia.  

One final feature I’d like to examine is the ability to add camera controls to 3D plots.  Plotly has a wide variety of functionality in this regard.  Users are able to set a default camera angle along any axis or plane that they wish, as well as any value in between.  This can be done using the camera’s eye parameter.  That same parameter can also be used to set a default zoom.  There is another camera parameter called “center” which can be used to adjust the focal point of the graph.  Perhaps the most interesting feature available on these 3D graphs though is their built in ability to be rotated around the focal point by clicking and dragging.  Below is an example of a 3D plot which has been slightly rotated.

So there you have it, a small taste of what Plotly is able to do.  As you can see, it is a fantastic graphing library for projects where graphs need a little more interactivity.  On top of that, it has a number of other interesting capabilities that are sure to spice up any presentation.  All in all, I am very impressed with Plotly and would certainly recommend it to anyone looking for a new graphing library to explore.