ECharts TreeMap & Zola

I've been working on hierarchical lists of cryptographic algorithms and technology frameworks in my spare time and have been spending a considerable amount of time on how to present the information. As much as I like tech data, I don't think the information would be digested well enough using just text. A TreeMap seemed appropriate because I'd like to show/indicate the structure of understanding the information along with the attributes that go along with the information

echarts provides one of the best TypeScript APIs I've had the good fortune to encounter for charting. Zola offers an API called ShortCodes allowing for dynamic content to be rendered using Markdown Syntax

{% chart__tree_map(name='first-map', min_height=200) %}
- Root
  - Backend Framework
    - Django
    - Rocket.rs
  - Frontend Framework
    - VueJS
    - ReactJS
{% end %}

What really impresses me though, is the interoperability of Rust & Javascript/Typescript. Making it possible to embed more than one TreeMap in a single article. name has to be passed creating a new template with a new id

<script id="{{name}}-template" type="text/template">
- Root
  - Backend Framework
    - Django
    - Rocket.rs
  - Frontend Framework
    - VueJS
    - ReactJS
</script>

<script type="text/javascript">
  $(document).ready(async function() {
    $('#{{name}}-chart').Chart__TreeMap('{{name}}-template');
  })
</script>

Converting Markdown into JSON is a two step process. Parsing the content from the <script type="text/template"> tag into tokens using markdown-it and then passing the tokens into a javascript function that'll loop over all the tokens and builds a nested dictionary of information to be passed into echarts.

$.fn.Chart__TreeMap = async function(name) {
  const elm = $(this)[0];
  const chart = echarts.init(elm);
  const template_data = $(`#${name}`);
  const md = new markdownit();
  const tokens = md.parse(template_data[0].innerText);
  const options = {
    series: {
      ...,
      data: tokensToJson(tokens);
    }
  }
...

Yay