D3.jsで株の取引額内訳を可視化してみた

今までの株取引額内訳

総取引額(一番外の円):150,470円
利益(Profit):63,101円
損失(Loss):61,320円
税(Tax):7,438円
手数料(Commission):18,611円

総取引額は、今まで出た利益と損失を合計した数字です（税と手数料も含む）。

元手25万で始めたのですが、15万だとけっこう増減していますね。

利益と損失がトントンですね。

わずかに利益のほうが大きいですよ！！笑

可視化してみて思ったこと

今回は可視化の表現方法として、パックレイアウトを使用しました。

数字で表すより直感的でわかりやすいと思います。

可視化してみるとわかりやすいですが、手数料の多さにビックリです。

いつも100〜200株しか買わないので、手数料の比率がどうしても多くなってしまうので仕方のないことなのですが...

ちなみに可視化には、javascriptのライブラリの一つであるD3.jsを利用しました。

表現方法が豊富で最近、よく使っています。

ソースコード

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style>
svg { width: 320px; height: 320px;}
circle { fill:"blue"; stroke: "none"; opacity:0.25; stroke-width: 3px;}
text { font-size: 10pt; text-anchor: middle; fill: white; opacity: 0; }
</style>


<script type="text/javascript">

var dataSet = {
	value : 150470,
	children : [
		{value : 63101, name : "Profit"},
		{value : 61320, name : "Loss"},
		{value : 7438, name : "tax"},
		{value : 18611, name : "Commission"}
	]
}


var color = d3.scale.category10();

var bubble = d3.layout.pack()
	.size([320, 320])

var pack = d3.select("#myGraph")
	.selectAll("g")
	.data(bubble.nodes(dataSet))
	.enter()
	.append("g")
	.attr("transform", function(d,i){
		return "translate("+ d.x + "," + d.y + ")";
	})

pack.append("circle")
	.attr("r", 0)
	.transition()
	.duration(function(d,i){
		return d.depth * 1000 + 500;
	})
	.attr("r", function(d,i){
		return d.r;
	})
	.style("stroke", function(d,i){
		return color(i);
	})
        .style("stroke-width", "2px")


pack.append("text")
	.style("opacity", 0)
	.transition()
	.duration(3000)
	.style("opacity", 1.0)
	.text(function(d,i){
		if(d.depth == 1){
			return d.name;
		}
		return null;
	})
</script>