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 261e231.
hugo
#hugo #plotly #static-site #visualization
Next episode:
Image Processing in Hugo

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 …

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 …

Ö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ış …

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 …

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 …

Önceki yazıda LaTeX kullanmanın avantajlarından ve zorluklarından bahsetmiştim, MS Word gibi WYSIWYG programlar ile karşılaştırıp tavsiyelerimi yazmıştım. Bu yazıda Pandoc yazılımı üzerine konuşacağız. Pandoc’un da yardımıyla LaTeX’in avantajlarını alıp zorluklarını biraz geri de …

LaTeX bir çeşit döküman hazırlama sistemidir, ancak çoğumuzun alıştığı arayüzlerin aksine bu döküman içerisinde kod yazar gibi bazı komutlar kullanırız. Daha sonra derleyici (compiler) bu dökümanı bizim tanımladığınız kurallara göre PDF’e dönüştürür. […] 1978 yılında, Donald Knuth TeX …

This post is for fellow students who is studying Operations Research with CPLEX. If you don’t know already, IBM offers free academic license for IBM ILOG CPLEX Optimization Studio. […] First, you have to register IBM Academic Initiative with your academic instituion issued email. (e.g. …