TeX mindmap in Jekyll

Help
1

Hello

I just started using jekyll, it’s great!
I’d like to generate a mindmap in the style of
http://texample.net/tikz/examples/computer-science-mindmap/
for all my pages with a specific category.

Looking on the documentation, I’m not sure if (1) MathJax is able to render that, and (2) if I can use {{ pages.category }} inside LaTeX.

I never used LaTeX and only beginning with html, websites and Jekyll.

Any clue?

Thanks

2

Not a direct answer to your question about TikZ, but maybe useful:

For data visualization, a popular approach is to use the D3.js Javascript library. D3 works well with Jekyll because the graphic is rendered in the browser, so no extra software is needed. D3 graphics can also be interactive. Data can be passed to D3 via Liquid tags. Here’s a pseudo-code example:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [
    {% for cat in site.categories %} {{ cat.name | jsonify }} {% endfor %} ,
];

// now render data with D3
d3.select(.....)....
</script>

There are some D3 Mindmap examples out there, although nothing exactly the same as the TikZ graph.

3

Oh thanks, d3js seem even more appropriate for my needs!
I’m checking it out
:+1:

4

If your needs are fairly simple, then another option would be to simply draw a graph directly with inline SVG. SVG is basically “HTML-style markup for graphics”, so you can use Liquid tags to build it. This avoids requiring heavy Javascript and keeps your site 100% static. Example (untested):

---
title: my circles
circles:
 - {x:10, y:10, color: "red"}
 - {x:20, y:20, color: "green"}
 - {x:30, y:30, color: "blue"}
---
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
{% for circle in page.circles %}
  <circle cx="{{ circle.x }}" cy="{{ circle.y }}" r="10" color="{{ circle.color }}"/>
{% endfor %}
</svg>