An interactive infographic is a visual graphic that the user can interact with instead of just looking at a static picture. It’s a mix of illustration + data + UI elements, where the reader can click, hover, scroll, or filter to explore information.
This section focuses on how to create interactive infogrphics for use in MkDocs.
JavaScript Libraries to Embed Into MkDocs Pages
📊 Charts & Data Visualizations:
- Chart.js — simple, beginner-friendly, good for line/bar/pie charts
- D3.js — powerful, used for complex custom infographics
- Plotly.js — interactive, zoomable, hover tooltips built-in
- ECharts — many interactive chart types
🗺️ Maps:
- Leaflet.js (open-source)
- Mapbox GL JS (if you need fancier styling)
📈 Timeline / Flow / Sankey / Network Graphs:
- Mermaid.js (already integrated in MkDocs Material)
- D3.js
- Cytoscape.js (network graphs)
How you embed them:
- Enable the “extra_javascript” option in mkdocs.yml:
yaml extra_javascript: - js/my-interactive.js
2. Add a <canvas> or <div> placeholder in your Markdown:
html <canvas id="chart"></canvas>
3. Write JS that initializes the chart:
js const ctx = document.getElementById("chart"); new Chart(ctx, { type: "bar", data: { labels: ["A","B"], datasets:[{data:[5,10]}] } });
Embed External Tools
Tools that export embed code:
- Canva (export as HTML embed, if using Canva Pro)
- Figma (public embed)
- Flourish Studio (very nice interactive storytelling charts)
- Datawrapper (polished news-style data graphics)
- Google Data Studio / Looker Studio
- ObservableHQ (interactive D3 notebooks)
Paste the embed code into your Markdown:
<iframe src="...your interactive graphic..." width="100%" height="600"></iframe>