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/.

1
2
3
4
5
6
7
8
{{ $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?

1
2
3
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>:

1
2
3
{{ 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.

1
2
3
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 23.01.2021 with commit 3a172e2.
hugo
#hugo #plotly #visualization #web-dev
Next episode:
Image Processing in Hugo
published on 23.01.2021
edited on 11.06.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
edited on 11.06.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 18.09.2020
edited on 13.02.2021

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files? Let me clarify with an example. I was creating a single page …

published on 30.08.2020

The question is clear. We need to pass variables or arguments in Hugo’s partials. We usually use only the dot when calling partials. {{ partial "foo.html" . }}. The dot means the current page’s context. All it’s variables like .Title, .Permalink, .Content and all others …

published on 31.12.2020
edited on 26.06.2021

I’ve, recently, published a blog post called Perfect Workflow for Publishing Python Notebooks. I talked about some of the benefits of using Rmarkdown and reticulate. In this post, I’ll try HTML widgets and explain how we can embed those in our blog post using nothing but R. […] 1 …

published on 05.12.2020

Resume A4 is a side project of mine. It’s one page Hugo Theme that allows you to write your resume in YAML format and keep track of it using git. Also, you can publish it online as a static site using GitLab, GitHub Pages, Netlify, or some other service you are familiar with. A few months …

published on 30.11.2020

I’ve been searching for a good workflow for publishing Jupyter or RMarkdown Notebooks as static blog posts. I think I’ve found the optimal solution for my use case. In this post, I’ll explain my workflow and why chose this way with examples. […] In reality my main purpose to …