はてなブログでD3.jsの動作実験

はてなブログで、D3.jsの動作ができるか試してみました。
可視化の際に使用できればと考えております。

こちらのサイトを参考にしてみました。
はてなブログの記事内でJavascriptを書く方法 - Three.jsを使って、作ってみた

JavaScriptは以下のタグでくくっておけば使えるそうです。

<script type="text/javascript">...</script>

手順

さっそく「はてな記法」で以下を記載しました。

<div id="test" style="width:100;height:100"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var width = 100;
var height =100;

var svg = d3.select("#test").append("svg")
 .attr("width", width)
 .attr("height", height);

svg.append("circle")
 .attr("cx",50)
 .attr("cy",50)
 .attr("r",20)
 .attr("fill","blue")
 .attr("stroke-width",3)
 .attr("stroke","black");
</script>

以下のDIVにSVG出力を試しております。

<div id="test" style="width:100;height:100"></div>

出力結果

円が表示されているようなので、使えそうです。