読者です 読者をやめる 読者になる 読者になる

株も歩けば犬に当たる

25万から株を始めた大学生。バイトのほうが稼げると気づいた今日この頃。pythonや株について書いてます。

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

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>