feat: add data visualization feature

Adds chart shortcode with support for Plotly JSON chart format.

Given Plotly formatted line-chart.json in page bundle, use
{{< chart data="line-chart" >}}

Close #1673

data/assets.toml

@@ -73,6 +73,10 @@
   version = "5.1.0"
   sri = "sha512-1+qUtKoh9XZW7j+6LhRMAyOrgSQKenQ4mluTR+cvxXjP1Z54RxZuzstR/H9kgPXQsVB8IW7DMDFUJpzLjvhGSQ=="
   url = "https://cdnjs.cloudflare.com/ajax/libs/instant.page/%s/instantpage.min.js"
+[js.plotly]
+  version = "1.54.7"
+  sri = "sha512-eftiPCZn2L4fmOs+IforhSiBbW7f+fLzhqTPTD74kSOt4gcD+Q2btwLJ8V7fklVoKuSegQCKVqP/73T0tbmrmA=="
+  url = "https://cdnjs.cloudflare.com/ajax/libs/plotly.js/%s/plotly.min.js"
 
 # CSS
 

exampleSite/content/post/writing-technical-content/index.md

@@ -34,6 +34,18 @@ data = pd.read_csv("data.csv")
 data.head()
 ```
 
+### Charts
+
+Academic supports the popular [Plotly](https://plot.ly/) chart format.
+
+Save your Plotly JSON in your page folder, for example `chart.json`, and then add the `{{</* chart data="chart" */>}}` shortcode where you would like the chart to appear.
+
+Demo:
+
+{{< chart data="line-chart" >}}
+
+You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) useful.
+
 ### Math
 
 Academic supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.toml` file.
@@ -245,9 +257,9 @@ renders as
 | Content Cell  | Content Cell  |
 | Content Cell  | Content Cell  |
 
-### Asides
+### Callouts
 
-Academic supports a [shortcode for asides](https://sourcethemes.com/academic/docs/writing-markdown-latex/#alerts), also referred to as *notices*, *hints*, or *alerts*. By wrapping a paragraph in `{{%/* alert note */%}} ... {{%/* /alert */%}}`, it will render as an aside.
+Academic supports a [shortcode for callouts](https://sourcethemes.com/academic/docs/writing-markdown-latex/#alerts), also referred to as *asides*, *hints*, or *alerts*. By wrapping a paragraph in `{{%/* alert note */%}} ... {{%/* /alert */%}}`, it will render as an aside.
 
 ```markdown
 {{%/* alert note */%}}

exampleSite/content/post/writing-technical-content/line-chart.json

@@ -0,0 +1,77 @@
+{
+  "data": [
+    {
+      "uid": "babced",
+      "fill": "tonexty",
+      "mode": "none",
+      "name": "Col2",
+      "type": "scatter",
+      "x": [
+        "2000-01-01",
+        "2001-01-01",
+        "2002-01-01",
+        "2003-01-01",
+        "2004-01-01",
+        "2005-01-01",
+        "2006-01-01",
+        "2007-01-01",
+        "2008-01-01",
+        "2009-01-01",
+        "2010-01-01",
+        "2011-01-01",
+        "2012-01-01",
+        "2013-01-01",
+        "2014-01-01",
+        "2015-01-01",
+        "2016-01-01"
+      ],
+      "y": [
+        "17087182",
+        "29354370",
+        "38760373",
+        "40912332",
+        "51611646",
+        "64780617",
+        "85507314",
+        "121892559",
+        "172338726",
+        "238027855",
+        "206956723",
+        "346004403",
+        "697089489",
+        "672985183",
+        "968882453",
+        "863105652",
+        "1068513050"
+      ],
+      "fillcolor": "rgb(224, 102, 102)"
+    }
+  ],
+  "layout": {
+    "title": "Total Number of Websites",
+    "width": 800,
+    "xaxis": {
+      "type": "date",
+      "range": [
+        946702800000,
+        1451624400000
+      ],
+      "title": "Source: <a href=\"http://www.scribblrs.com/\">Scribblrs</a><br>Source: <a href=\"http://www.internetlivestats.com/total-number-of-websites/\">Internet Live Stats</a>",
+      "showgrid": false,
+      "autorange": true,
+      "tickformat": "%Y"
+    },
+    "yaxis": {
+      "type": "linear",
+      "range": [
+        0,
+        1124750578.9473684
+      ],
+      "title": "",
+      "autorange": true
+    },
+    "height": 500,
+    "autosize": false
+  },
+  "frames": []
+}

layouts/partials/site_js.html

@@ -133,6 +133,14 @@
     </script>
     {{ end }}
 
+    {{/* Charts */}}
+    {{ if .HasShortcode "chart" }}
+    <script>
+      window.PlotlyConfig = {MathJaxConfig: 'local'};
+    </script>
+    {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.plotly.url $js.plotly.version) $js.plotly.sri | safeHTML }}
+    {{ end }}
+
     {{/* Disqus Comment Count JS. */}}
     {{ if and (eq site.Params.comments.engine 1) (site.Params.comments.disqus.show_count | default true) }}
     <script id="dsq-count-scr" src="https://{{site.Params.comments.disqus.shortname}}.disqus.com/count.js" async></script>

layouts/shortcodes/chart.html

@@ -0,0 +1,17 @@
+{{ $json := printf "./%s.json" (.Get "data") }}
+{{ $id := delimit (shuffle (seq 1 9)) "" }}
+<div id="chart-{{$id}}" class="chart pb-3" style="max-width: 100%; margin: auto;"></div>
+<script>
+  (function() {
+    let a = setInterval( function() {
+      if ( typeof window.Plotly === 'undefined' ) {
+        return;
+      }
+      clearInterval( a );
+
+      Plotly.d3.json({{$json}}, function(chart) {
+        Plotly.plot('chart-{{$id}}', chart.data, chart.layout, {responsive: true});
+      });
+    }, 500 );
+  })();
+</script>