D3 to Hexo

D3.js is a popular package for data visualization. It provides great freedom for designer and data scientists to show data. This time, we are trying to add D3 to Hexo to write blog with nice visualization.

Add javascript to Hexo

In fact, adding D3 to Hexo is just adding javascript code to markdown in Hexo. In the documentation of Hexo, it tells us a way to add the html code using raw:

{% raw %}
content
{% endraw %}

Add D3 to Hexo

Therefore, we just need to add D3 code in the middle.

<div id="d3js-example-content"></div>  

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

let svg = d3.select("#d3js-example-content")
    .append("svg")
    .attr("width", "400")
    .attr("height", "400");
	
    ... ...
</script>

Here is a demo.

{% raw %}

{% endraw %}