ツリーマップレイアウトで使用されている文字数を数えて表示する

テキストファイルを読み込んで、ファイル内で使われている文字数を数えてツリーマップに表示します。　入れ子にはならないですが、使用頻度が高い文字が分かります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>使われている文字数を数えて表示する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:960px;
			height:640px;
			border:1px solid black;
		}
		.block{
			stroke:black;
			fill:#c0c0c0;
		}
		.name{
			font-size:10px;
			text-anchor:middle;
		}
	</style>
</head>
<body>
	<h1>頻出文字をパックレイアウトを表示</h1>
	<svg id="graph"></svg>
	<p>＊タブ、スペース、特殊文字は空欄になります。</p>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>使われている文字数を数えて表示する</title>

<style>

svg{

width:960px;

height:640px;

border:1px solid black;

}

.block{

stroke:black;

fill:#c0c0c0;

}

.name{

font-size:10px;

text-anchor:middle;

}

</style>

</head>

<body>

<h1>頻出文字をパックレイアウトを表示</h1>

<p>＊タブ、スペース、特殊文字は空欄になります。</p>

</body>

</html>

/*
	パックレイアウトを表示
*/
	// HTMLファイルで設定した#graphの幅、高さを取得する
	var svgEle = document.getElementById("graph");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

	svgWidth = parseFloat( svgWidth );   // 整数に変換する
	svgHeight = parseFloat( svgHeight ); // 整数に変換する

/*
	データがテキストなら、.txtファイルでなくても
	読み込むことができます。
*/
d3.text("test.js",function(error,plainText){

	var arrStrData = [];
	for( var i = 0; i < plainText.length ; i++){
	/*
		読み込んだ文字を数えるにはHavaScriptの連想配列／ハッシュを
		利用すると便利です。文字を数える配列を用意。
	*/
		// 読み込んだファイルの文字を１文字ずつ読み取る
		var c = plainText.charAt(i);
		/* 
			上記で読み込んだ文字列を配列のキーとして扱い
			既に使われているかを判定
		*/
		if( !arrStrData[c] ){
		/* 
			使われていない場合は arrStrData[キー]の数値に
			１を格納する。（＝使用されている文字数を１にする）
		*/
			arrStrData[c] = 1;
		}else{
		/*
			使われている場合は、配列[存在するキー]の値に１加算
		*/
			arrStrData[c]++;
		}
	}
	
	var temp = [];
	for( i in arrStrData ){
		// 連想配列のキー名(i)とそれの値(arrStrData[i])を格納
		temp.push( { name : i , value : arrStrData[i] });
	}

	// データセットのchildrenに生成した配列を指定
	var arrData ={
		children : temp
	};

	drawTreeMap(arrData);
})

function drawTreeMap(arrData){

	// ツリーマップレイアウト
	var treemap = d3.layout.treemap()
		.size([ svgWidth, svgHeight])
	/*
		ツリーマップレイアウトには、以下の表示方法が設定できます。
		.mode()の設定値
			squarify　：四角形(初期値)
			slice	　：水平分割
			dice	　：垂直分割
			slice-dice：分割
	*/
		.mode("squarify");

	// ツリーマップを描画する
	var tmap = d3.select("#graph")
		.selectAll("rect")
		.data( treemap.nodes(arrData) );

	tmap.enter()
		.append("rect")
		.attr("class","block")			// CSSクラスを追加
		.attr("x", function(d,i){		// Ｘ座標を設定
			return d.x;
		})
		.attr("y", function(d,i){		// Ｙ座標を設定
			return d.y;
		})
		.attr("width", function(d,i){	// 幅を設定
			return d.dx;
		})
		.attr("height", function(d,i){	// 高さを設定
			return d.dy;
		});

	// マップ内に文字追加
	tmap.enter()
		.append("text")						// text要素追加
		.attr("class","name")				// CSSクラス追加
		.attr("transform",function(d,i){
			return "translate(" + (d.x + d.dx/2 ) + "," + (d.y + d.dy/2 ) + ")";
		})
		.attr("dy","0.2em")					 // 表示位置調整
		.text(function(d,i){				 // 文字表示
			return d.name;					 // 領域内に表示する文字を返す
		})
		.style("font-size", function(d,i){	// 空間サイズに応じて文字サイズ変更
			return ( d.dx * d.dy ) / 200;
		});
}

100

101

102

103

104

105

106

107

108

109

110

パックレイアウトを表示

// HTMLファイルで設定した#graphの幅、高さを取得する

var svgEle = document.getElementById("graph");

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

svgWidth = parseFloat( svgWidth ); // 整数に変換する

svgHeight = parseFloat( svgHeight ); // 整数に変換する

データがテキストなら、.txtファイルでなくても

読み込むことができます。

d3.text("test.js",function(error,plainText){

var arrStrData = [];

for( var i = 0; i < plainText.length ; i++){

読み込んだ文字を数えるにはHavaScriptの連想配列／ハッシュを

利用すると便利です。文字を数える配列を用意。

// 読み込んだファイルの文字を１文字ずつ読み取る

var c = plainText.charAt(i);

上記で読み込んだ文字列を配列のキーとして扱い

既に使われているかを判定

if( !arrStrData[c] ){

使われていない場合は arrStrData[キー]の数値に

１を格納する。（＝使用されている文字数を１にする）

arrStrData[c] = 1;

}else{

使われている場合は、配列[存在するキー]の値に１加算

arrStrData[c]++;

}

var temp = [];

for( i in arrStrData ){

// 連想配列のキー名(i)とそれの値(arrStrData[i])を格納

temp.push( { name : i , value : arrStrData[i] });

}

// データセットのchildrenに生成した配列を指定

var arrData ={

children : temp

};

drawTreeMap(arrData);

})

function drawTreeMap(arrData){

// ツリーマップレイアウト

var treemap = d3.layout.treemap()

.size([ svgWidth, svgHeight])

ツリーマップレイアウトには、以下の表示方法が設定できます。

.mode()の設定値

squarify　：四角形(初期値)

slice 　：水平分割

dice 　：垂直分割

slice-dice：分割

.mode("squarify");

// ツリーマップを描画する

var tmap = d3.select("#graph")

.selectAll("rect")

.data( treemap.nodes(arrData) );

tmap.enter()

.append("rect")

.attr("class","block") // CSSクラスを追加

.attr("x", function(d,i){ // Ｘ座標を設定

return d.x;

})

.attr("y", function(d,i){ // Ｙ座標を設定

return d.y;

})

.attr("width", function(d,i){ // 幅を設定

return d.dx;

})

.attr("height", function(d,i){ // 高さを設定

return d.dy;

});

// マップ内に文字追加

tmap.enter()

.append("text") // text要素追加

.attr("class","name") // CSSクラス追加

.attr("transform",function(d,i){

return "translate(" + (d.x + d.dx/2 ) + "," + (d.y + d.dy/2 ) + ")";

})

.attr("dy","0.2em") // 表示位置調整

.text(function(d,i){ // 文字表示

return d.name; // 領域内に表示する文字を返す

})

.style("font-size", function(d,i){ // 空間サイズに応じて文字サイズ変更

return ( d.dx * d.dy ) / 200;

});

}