Embedded d3 with Jekyll & Markdown

- 1 min

I 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

Nicholas Murray

Software Engineer

rss devpost facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora