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

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)"