D3.js サーバーのログを読み込んで、OSのシェアを表示してみる

2015年10月29日

D3.jsを利用して、サーバーログを読出して、情報を得ることができます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.jsでサーバーログを取得する</title>
	<script src="../js/d3.js"></script>
	<style>
		svg{
			width:640px;
			height:480px;
			border:2px solid black;
			background-color:#ffffff;
		}
	</style>
</head>
<body>
	<h1>OS情報を取得して表示する</h1>
	<div id="time"></div>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.jsでサーバーログを取得する</title>

<style>

svg{

width:640px;

height:480px;

border:2px solid black;

background-color:#ffffff;

}

</style>

</head>

<body>

<h1>OS情報を取得して表示する</h1>

</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 ); // 整数に変換する

	setInterval("drawPie()", 2000);

	arrData = [ 10,20,30,40,50];

	drawPie();


	// 円グラフ処理
	var pie = d3.layout.pie();				// 円グラフレイアウト
	var arc = d3.svg.arc().outerRadius(80); // 円グラフの外径

	// 円グラフ描画
	var gElements = d3.select("#graph")
		.selectAll("g")
		.data( pie(arrData) )
		.enter()
		.append("g")
		.attr("transform","translate(" + 
			svgWidth / 2 + ", " + svgHeight / 2 + ")");

	// データ追加
	var pieElements = gElements
		.append("path")
		.attr("class","pie")
		.attr("d",arc)
		.style("fill", function(d,i){
			// 対応するOSを返す
			return ["gold","silver","bronze","pink","green"][i]; 
		});

function drawPie(){

	d3.text("20151026.log", function(error,plainText){
	
	/*
		「Windows」という文字列にマッチした個数を求める
		「|| ""」はmatch()メソッドはマッチする文字列が無いときは
		nullを返します。nullではlengthプロパティはないので、参照時に
		エラーとなりプログラムが止まってしまいます、
		そこでnullの場合は""(空文字)に置き換えたうえでlengthプロパティに
		よって値を返すようにしてます。
	*/
	var win    = (plainText.match(/Windows/g)   || "").length;
	var mac    = (plainText.match(/Macintosh/g) || "").length;
	var iphone = (plainText.match(/ iPhone/g)   || "").length;
	var and    = (plainText.match(/ Android/g)  || "").length;
	var other  = 100 - win - mac - iphone - and;
	
	arrData = [win,mac,iphone,and,other];

	d3.select("#time").text(new Date());

	// データ更新
	pieElements
	.data(pie(arrData)) // データ要素に連結
	.attr("d", arc)

	}); //d3.text()
}

サーバーログを解析する

// 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 ); // 整数に変換する

setInterval("drawPie()", 2000);

arrData = [ 10,20,30,40,50];

drawPie();

// 円グラフ処理

var pie = d3.layout.pie(); // 円グラフレイアウト

var arc = d3.svg.arc().outerRadius(80); // 円グラフの外径

// 円グラフ描画

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

.selectAll("g")

.data( pie(arrData) )

.enter()

.append("g")

.attr("transform","translate(" +

svgWidth / 2 + ", " + svgHeight / 2 + ")");

// データ追加

var pieElements = gElements

.append("path")

.attr("class","pie")

.attr("d",arc)

.style("fill", function(d,i){

// 対応するOSを返す

return ["gold","silver","bronze","pink","green"][i];

});

function drawPie(){

d3.text("20151026.log", function(error,plainText){

「Windows」という文字列にマッチした個数を求める

「|| ""」はmatch()メソッドはマッチする文字列が無いときは

nullを返します。nullではlengthプロパティはないので、参照時に

エラーとなりプログラムが止まってしまいます、

そこでnullの場合は""(空文字)に置き換えたうえでlengthプロパティに

よって値を返すようにしてます。

var win = (plainText.match(/Windows/g) || "").length;

var mac = (plainText.match(/Macintosh/g) || "").length;

var iphone = (plainText.match(/ iPhone/g) || "").length;

var and = (plainText.match(/ Android/g) || "").length;

var other = 100 - win - mac - iphone - and;

arrData = [win,mac,iphone,and,other];

d3.select("#time").text(new Date());

// データ更新

pieElements

.data(pie(arrData)) // データ要素に連結

.attr("d", arc)

}); //d3.text()

}

64.246.161.190 - - [26/Oct/2015:07:54:27 +0900] "GET /robots.txt HTTP/1.1" 404 8695 "-" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en; rv:1.9.0.13) Gecko/2009073022 Firefox/3.5.2 (.NET CLR 3.5.30729) SurveyBot/2.3 (DomainTools)"
64.246.161.190 - - [26/Oct/2015:07:54:27 +0900] "GET / HTTP/1.1" 404 2952 "http://whois.domaintools.com/vesna-memo.com" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en; rv:1.9.0.13) Gecko/2009073022 Firefox/3.5.2 (.NET CLR 3.5.30729) SurveyBot/2.3 (DomainTools)"

64.246.161.190 - - [26/Oct/2015:07:54:27 +0900] "GET /robots.txt HTTP/1.1" 404 8695 "-" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en; rv:1.9.0.13) Gecko/2009073022 Firefox/3.5.2 (.NET CLR 3.5.30729) SurveyBot/2.3 (DomainTools)"

64.246.161.190 - - [26/Oct/2015:07:54:27 +0900] "GET / HTTP/1.1" 404 2952 "http://whois.domaintools.com/vesna-memo.com" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en; rv:1.9.0.13) Gecko/2009073022 Firefox/3.5.2 (.NET CLR 3.5.30729) SurveyBot/2.3 (DomainTools)"

-D3.js
-match()()メソッド, ログ解析

comment コメントをキャンセル

D3.js

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>散布図のデータを定期的に更新する</title>
	<script src="../js/d3.js"></script>

	<style>
	svg{
		width:340px;
		height:340px;
		border:2px solid red;}
	.mark{ fill:red; stroke:none;}

	.axis text{font-size:12px;}
	.axis path,
	.axis line{
		fill:none;
		stroke:black;
	}

	</style>

</head>
<body>
	<h2>散布図を表示する</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>散布図のデータを定期的に更新する</title>

<style>

svg{

width:340px;

height:340px;

border:2px solid red;}

.mark{ fill:red; stroke:none;}

.axis text{font-size:12px;}

.axis path,

.axis line{

fill:none;

stroke:black;

}

</style>

</head>

<body>

<h2>散布図を表示する</h2>

</body>

</html>

/*
	散布図を表示する
*/

	var svgWidth  = 300; // SVG要素の幅 
	var svgHeight = 300; // SVG要素の高さ
	var offsetX = 30;    // Ｘ座標のずれ
	var offsetY = -20;    // Ｙ座標のずれ

	var arrData = [
		[16,32],[64,48],[128,92],[70,150],[120,300],
		[45,90],[110,160],[300,20],[180,180],[15,145]
	];

	var circleElements = d3.select("#graph")
	.selectAll("circle")                   // circle要素を追加
	.data(arrData);

	circleElements 
	.enter()
	.append("circle")                      // CSSクラスを指定
	.attr("class","mark")
	.attr("cx",function(d,i){
		return d[0] + offsetX;             // １番目の要素をＸ表に指定
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定
	})
	.attr("r",4);                          // 点の半径

// アニメーション後の散布図に使用するデータを再設定
function generateData(data){

	var result = data
		.map(function(d,i){
			// 配列の要素数だけ繰り返す
			var x = Math.random() * svgWidth;  // Ｘ座標を設定
			var y = Math.random() * svgHeight; // Ｙ座標を設定
			return [x, y];
		});
	return result;
}

// 散布図を更新する関数
function generateGraph(){

	circleElements
	.data(arrData)
	.transition()
	.attr("cx",function(d,i){
		return d[0] + offsetX;
	})
	.attr("cy",function(d,i){
		return svgHeight - d[1] - offsetY;
	});
}

function drawScale(){

	var maxX = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を０を指定すると
		Ｘ座標の最大値を求めることができます。
	*/
		return d[0]; // Ｘ座標
	});
	var maxY = d3.max(arrData,function(d,i){
	/*
		以下のようにd[ ]の添字を１を指定すると
		Ｙ座標の最大値を求めることができます。
	*/
		return d[1]; // Ｙ座標
	});
	
	// 縦の目盛りを表示するために縮尺設定
	var yScale = 

	/*
		上記で求めた最大値maxYをここで使用する。
	*/
		d3.scale.linear()  // 縮尺設定
		.domain([0, maxY]) // 元データの範囲
		.range([maxY, 0]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - maxY - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(yScale)
			.orient("left")
		);

	// 横の目盛りを表示するために縮尺設定
	var xScale =
	/*
		上記で求めた最大値maxXをここで使用する。
	*/
		 d3.scale.linear() // 縮尺設定
		.domain([0, maxX]) // 元データの範囲
		.range([0, maxX]); // 実際の出力サイズ

	// 目盛りを表示
	d3.select("#graph")
		.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + offsetX + ", " + 
		( svgHeight - offsetY ) + ")" )
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
		);

}
	drawScale();
	// 一定時間後に行う処理
	setInterval(function(){
		arrData = generateData( arrData ); // データを更新
		generateGraph();                   // グラフの更新(アニメーション)
	},2000);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

散布図を表示する

var svgWidth = 300; // SVG要素の幅

var svgHeight = 300; // SVG要素の高さ

var offsetX = 30; // Ｘ座標のずれ

var offsetY = -20; // Ｙ座標のずれ

var arrData = [

[16,32],[64,48],[128,92],[70,150],[120,300],

[45,90],[110,160],[300,20],[180,180],[15,145]

];

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

.selectAll("circle") // circle要素を追加

.data(arrData);

circleElements

.enter()

.append("circle") // CSSクラスを指定

.attr("class","mark")

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

return d[0] + offsetX; // １番目の要素をＸ表に指定

})

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

return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定

})

.attr("r",4); // 点の半径

// アニメーション後の散布図に使用するデータを再設定

function generateData(data){

var result = data

.map(function(d,i){

// 配列の要素数だけ繰り返す

var x = Math.random() * svgWidth; // Ｘ座標を設定

var y = Math.random() * svgHeight; // Ｙ座標を設定

return [x, y];

});

return result;

}

// 散布図を更新する関数

function generateGraph(){

circleElements

.data(arrData)

.transition()

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

return d[0] + offsetX;

})

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

return svgHeight - d[1] - offsetY;

});

}

function drawScale(){

var maxX = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を０を指定すると

Ｘ座標の最大値を求めることができます。

return d[0]; // Ｘ座標

});

var maxY = d3.max(arrData,function(d,i){

以下のようにd[ ]の添字を１を指定すると

Ｙ座標の最大値を求めることができます。

return d[1]; // Ｙ座標

});

// 縦の目盛りを表示するために縮尺設定

var yScale =

上記で求めた最大値maxYをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxY]) // 元データの範囲

.range([maxY, 0]); // 実際の出力サイズ

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" + offsetX + ", " +

( svgHeight - maxY - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(yScale)

.orient("left")

);

// 横の目盛りを表示するために縮尺設定

var xScale =

上記で求めた最大値maxXをここで使用する。

d3.scale.linear() // 縮尺設定

.domain([0, maxX]) // 元データの範囲

.range([0, maxX]); // 実際の出力サイズ

// 目盛りを表示

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform","translate(" + offsetX + ", " +

( svgHeight - offsetY ) + ")" )

.call(

d3.svg.axis()

.scale(xScale)

.orient("bottom")

);

}

drawScale();

// 一定時間後に行う処理

setInterval(function(){

arrData = generateData( arrData ); // データを更新

generateGraph(); // グラフの更新(アニメーション)

},2000);

...

: D3.js

縦棒グラフに目盛りを表示してみる

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要な情報は目盛りに表示する文字列とフォント、目盛りの線の色です。サンプルコードの実行結果はこちら [ ...

: D3.js

D3.jsで縦棒グラフを表示してみる

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は縦棒グラフも同じです。異なる点は、グラフの棒が横に伸びるか、縦に伸びるかの違いです。グラフ内に数値 ...

: D3.js

D3.jsで目盛りを表示してみる

今回はグラフに加えて目盛りを表示します。目盛りのスタイルを決めて、設定する目盛りや数値やラベル、線のスタイルを設定します。コードを実際に書いて設定することもできますが、分業しておいたほが後々、 ...

: D3.js

データセットと日付を対応させてみる

前回の記事で、JSON形式のデータを扱ったデータには、折れ線グラフの数値だけではなく、年度のデータも含まれています。今回は横軸である下の目盛りにデータのの年数を表示します。 { year : 2006 ...

フィッシュアイプラグインを使ってみる

フレキシブルボックスレイアウトを使う