published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning Plotly, and as a weekend project, I wanted to find a good way of displaying Plotly plots on my website which is a static site built using Hugo.

Before we start, I didn’t write any of the code in this post, just found them on the internet.

The first one is good if you are ok with writing javascript in your markdown. The second one is probably what most people are looking for. You have created the Plotly plot using your favorite data analysis language, Python or R, and you want to display the result.

As ig248 explained, you need a shortcode plotly.html. If you don’t know what a shortcode is, it’s a code snippet, that can take input arguments. Shortcodes live in /layouts/shortcodes/.

{{ $json := .Get "json" }}
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}}"></div>
<script>
Plotly.d3.json({{$json}}, function(err, fig) {
    Plotly.plot('{{$json}}', fig.data, fig.layout, {responsive: true});
});
</script>

Then use the shortcode in your markdown file, don’t forget to remove the escape characters.

{{/*< plotly json="/plotly/plotly-hugo/scatter3d.json" height="400px" >*/}}

Here is a less fancy, more classic example. Histogram of some data, I’ve worked on recently.

{{/*< plotly json="/plotly/plotly-hugo/ccpp_ep_hist.json" height="400px" >/*}}

OK, but how did we get the JSON files?

from plotly.io import write_image
#... Generate the fig here.
fig.write_json("plot_name.json")

Now, your figure is in JSON format. Give that JSON as an input to Plotly shortcode and it’ll generate the plot using plotly.js. We have to embed plotly.js library into the web page which is the easiest part. Add these lines to <head>:

{{ if .Params.plotly }}
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{{ end }}

It’ll only add the script if the page has plotly: true in it’s front-matter. So, don’t forget to add the front-matter parameter for the pages you are going to use plotly library.


Even though, this post is focused on displaying “plotly graphs in Hugo sites”, the logic will be the same in any site. It won’t matter how you build them. After all, there is a JSON that explains the graph and the javascript library that reads that explanation and plot it.


Lastly, we can always save the result as an image then use the good ol' static images in our blog posts. To do that, we have to use the write_image function from plotly.io just like write_json.

from plotly.io import write_image
#... Generate the fig here.
fig.write_image("fig_name.png")
You are reading the 17th of 19 episodes in Hugo.
Published on 29.11.2020 by Mert Bakır. Last update on 05.12.2020 with commit 7dfab23.
hugo
#hugo #plotly #static-site #visualization
Next episode:
Image Processing in Hugo
published on 23.01.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 24.01.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …