Create a Plotly Data Visualization App Using One Line of JS
By: Edward Krueger
Tags: Dashboard, Data Visualization, Flask, Python, Editors Pick

Here we discuss a Plotly data visualization application created using Python and a single line of JavaScript code. This pattern allows developers to code logic and visualizations almost completely into the backend of your application. You don’t need to know javascript to do what we cover here.

Here is the link to our repository for the project.

This repository is part of Edwards's “Plotly six ways” or “p-6-w” series on his GitHub. Feel free to check out the other patterns if you are interested!

Why not just use Dash and Streamlit?

Dash and Streamlit are great dashboarding technologies. However, they lack the flexibility offered by Flask. This is because they are more opinionated and have compatibility limitations with existing technologies. The ‘lock-in’ effect can cause issues when transitioning from prototype to minimum viable product and beyond.

While Dash and especially Streamlit are good for proof of concepts, it is better to keep one's options open by using Flask when building a prototype.

Additionally, making most custom dashboards is not difficult and can be accomplished easily with Flask alone.

For simple visualizations that don't need interactivity with your page, this pattern with Flask and Plotly is a great solution. You get all the nice D3 features, like hover text events, without limiting your available production paths.

What is Plotly?

Plotly allows you to make interactive figures in just a few lines of code using either Python or JavaScript. Keep in mind, Plotly plots are all generated from JSONs being interpreted by d3. This allows us to be pretty light on the JavaScript as long as we can deliver a proper JSON to our front end.

We can have plotly.py generate a plot just by placing a properly formatted JSON into our HTML with jinja. This is possible because Plotly uses D3.js under the hood to generate our visualizations. Plotly objects consist of one or more data components and a layout component. Both have subcomponents. Most, but not all, of the formatting is controlled in the layout. Additionally, we can code our layout and traces using Python syntax. Then use one line of JavaScript in our HTML page to create the visualization.

You don’t need to create an account to use Plotly, contrary to how some document examples might make it seem. You don’t need to be online to use Plotly, either.

You’ll simply need to install the package.

pip install plotly

You’ll have to follow the trace and layout structure specific to the visualization you are creating, seen in the Plotly Docs here.

Plotly Express

Plotly Express is a built-in part of the plotly library, and is the recommended starting point for creating the most common figures. Plotly Express allows you to make more complete visualizations with less code. This often results in charts that look better than vanilla Plotly charts.

Plotly Express was released in March 2019 and is in active development, with support for more charts on the way.

Plotly Express can reduce the code required to make many Plotly figures from a Pandas DataFrame by a factor of 10. Plotly Express expects your DataFrame to arrive in Tidy format, meaning each row represents an observation and each column represents a variable.

Install Plotly Express with:

pip install plotly_express

Express allows you to make many figure types quickly, but not all of the vanilla Plotly charts are available yet.

Jsonifying your Python Trace

The key here is to JSONify the Plotly trace properly in the Python app. This allows Plotly to use JSONs directly from the HTML to generate plots.

Be sure to serialize JSON with cls=plotly.utils.plotlyJSONEncoder .

Use jinja to bring JSON data into HTML, as seen here.

Typical Templating

The above code can be refactored into a single line of JavaScript.

Refactored to a single line of JavaScript

This line tells Plotly to use the newPlot method to generate “myPlot” using the ‘data’ and ‘layout’ passed in through the jinja templating.

Further simplifying our code with Plotly Express

You’ll need to import Plotly into your Python app, as seen below.

import plotly.express as px

Now instead of creating a layout and traces for our visualization, we simply need to generate a ‘fig’ based on the Plotly Express documentation.

Plotly express can take in a dictionary or Dataframe to generate plots. Notice in our code that we are using ‘data,’ which is a dictionary and list comprehensions to generate our x and y variables.

Plotly Express plot generation

Similarly, we use the plotly.utils.PlotlyJSONEncoder to properly serialize our JSONs before templating them into the HTML document.

Line 14: One line of JavaScript to generate our plot

Now that we have refactored our app to use python and a single line of javascript, we deployed our app to Heroku. For more on how to deploy to Heroku, check out this article.

Conclusion

Remember creating custom dashboards is easy with Plotly and Flask. There is no need to lock yourself into technologies during a prototyping or proof of concept development phase.

With Flask and Plotly or Plotly Express, you can create powerful dashboards without knowing any JavaScript code. Simply by serializing your plots properly and templating them into your front end with Jinja, you can have an app that is 99.9% Python.

By keeping it simple early, you allow yourself a flexible path toward the data product you need. Thank you for reading, and best of luck in your data endeavors.