Adding d3 in a jekyll post
I will be using jekyll to provide my blog. Since visualization is one the main reason why I did create a blog. It is important that the blogging technique I’ll be using is capable of doing such feat.
I did a quick search on google and stumble upon this blog Embedding D3.js in a Jekyll blog post. There are 2 things that keeping me from creating a blog post with d3 in it.
- Add javascript in jekyll.
- How to put the visualization in the layout.
According to the blog, to append a javascript to a post you just need to add the following lines below your markdown file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.js"></script>
<script src="{{site.baseurl}}/js/embed-d3.js"></script>
After adding the following lines you need to place your javascript in <jekyll_repo>/_site/js/embed-d3.js
Now the next problem is how do we add our visualization in the layout. Luckily for us, jekyll allows us to place raw html in the markdown file. We just need to add the following lines below our markdown.
...markdown...
<div id='chart'></div>
Update!
This method does not work on github pages. External link to any javascript file will not work. In this case all javascript file was encoded in the markdown file.