Embedded d3 with Jekyll & Markdown
- 1 minI love building interactive visualizations with d3.js, so I wanted to share what I saw as the easiest way to embed your own visualizations into a Markdown post for a Jekyll blog.
Jekyll builds your site in the ‘_site’ temporary directory, and in the ‘assets’ directory I have a ‘js’ directory with my Javascript files that run my d3 script.
Markdown takes inline HTML, so I placed my chart element like below at the top of this post.
<div id='chart'></div>
Next, I needed to include the required script sources, the d3.js library and my d3 script, on my Markdown post.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<script src="https://nicholasmurray.dev/assets/js/embed-d3.js"></script>
orange = business purple = marriages
Have fun with it, and play around.
Nicholas Murray
Software Engineer