楽天カード明細ツリーマップ

楽天カードの明細csvを読み込んで当月請求額を基準としたツリーマップを表示します。

csvはアップロードされるわけでは無く、フロントエンド（ブラウザ）上だけで処理されますが、不安な方は自サーバーなどにindex.htmlをアップしてためしてみてください。

なお、Chromeでしか動作確認してません。

<!DOCTYPE html>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>楽天カードツリーマップ</title>
<style>
body {
	margin: auto;
	position: relative;
	padding: 20px;
	height: 100%;
}
 
form {
	position: absolute;
	right: 10px;
	top: 10px;
}
 
.node {
	border: solid 1px white;
	line-height: 0.95;
	overflow: hidden;
	position: absolute;
	border-radius: 6px;
	text-shadow: -1px -1px 2px hsla(0,0%,100%,0.25),
		-1px -1px 2px hsla(0,0%,100%,0.25),
		-1px 1px 2px hsla(0,0%,100%,0.25),
		1px -1px 2px hsla(0,0%,100%,0.25),
		-1px 0px 2px hsla(0,0%,100%,0.25),
		1px 0px 2px hsla(0,0%,100%,0.25);
}

.node div {
	padding: 6px 4%;
}

#fileBtn {
	margin-bottom: 8px;
}
</style>

function draw(data){

var childrenData = data.map(function(d){
		return {name: d['利用店名・商品名'], value: +d['当月請求額']}
	});

var dataSet = {
		name: "tree",
		children: childrenData
	};
	
	var width = 960-40,
    height = 500-40,
    color = d3.scale.category20c(),
    div = d3.select("body").append("div").style("position", "relative");

function upload(evt) {
	if (!isFileUpload()) {
		console.log('お使いのブラウザはファイルAPIがサポートされていません');
	} else {
		var data = null;
		var file = evt.target.files[0];
		var reader = new FileReader();
		reader.readAsBinaryString(file);
		reader.onload = function(event) {
			var result = event.target.result;
			var sjisArray = str2Array(result);
			var uniArray = Encoding.convert(sjisArray, 'UNICODE', 'SJIS');
			var csvStr = Encoding.codeToString(uniArray);
			draw(d3.csv.parse(csvStr));

};
		reader.onerror = function() {
			console.log('ファイルが読み込めませんでした。 ' + file.fileName);
		};
	}
}

function isFileUpload() {
		var isCompatible = false;
		if (window.File && window.FileReader && window.FileList && window.Blob) {
			isCompatible = true;
		}
		return isCompatible;
}

function str2Array(str) {
	var array = [],i,il=str.length;
	for(i=0;i<il;i++) array.push(str.charCodeAt(i));
	return array;
}

</script>

Updated missing url //cdn.rawgit.com/shimizu/9873aaff4961cf3f149d/raw/da5939d7096addf2379a3c48c6cae5179c9b1686/encoding.min.js to //cdn.jsdelivr.net/gh/shimizu/9873aaff4961cf3f149d/raw/da5939d7096addf2379a3c48c6cae5179c9b1686/encoding.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.rawgit.com/shimizu/9873aaff4961cf3f149d/raw/da5939d7096addf2379a3c48c6cae5179c9b1686/encoding.min.js