jQuery.flotで,素数の個数および素数計数関数をグラフ描画


jQuery.flotで素数計数関数の値をグラフ表示するデモ:

JSでグラフ描画(flotで素数計数関数を表示)
http://sourcecode-student.study-tips.info/demo/2015_03_jquery_flot/


工夫した点:

  • x軸およびy軸にラベルをつける機能がflotには標準で存在しないので,軸のメモリの値をフォーマットする関数の部分で,メモリの最後の値にラベルを付与するようにしている。


利用したライブラリ:

  • IntegerProblem.js :素数計数関数を利用

JavaScriptで整数問題を記述するライブラリ」を独立させてちょっと改良 - ソフトウェア勉強ログとサンプルコード
http://source-code-student.hatenablog.jp/entry/20150129/p2

  • IntegerProblem.js

ソースコード

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSでグラフ描画(flotで素数計数関数を表示)</title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <!-- flot : http://www.flotcharts.org/ からダウンロード -->
  <script src="jquery.flot.min.js"></script>

  <!-- 整数問題を記述するライブラリ : http://source-code-student.hatenablog.jp/entry/20150129/p2 からダウンロード -->
  <script src="IntegerProblem.js"></script>

</head>
<body>


<h3>jQuery.flotで素数計数関数をグラフ描画</h3>

<script>

	$(function() {

		// 素数計数関数の値
		var prime_counts = [];
		
		// 素数計数関数の近似値
		var x_per_logx = [];
		
		for( var i = 2; i <= 10000; i ++ ){
			// それぞれ値を計算して格納
		
			prime_counts.push([ 
				i, 
				prime_counting_function(i) 
			]);
			
			x_per_logx.push([
				i,
				i / Math.log(i) // x = 1 で発散するので注意
			]);
		}

		// flotで描画
		var plot = $.plot("#placeholder", [ 
			{
				data  : prime_counts, 
				label : "素数の個数"
			},
			{
				data  : x_per_logx,
				label : "素数計数関数の近似値"
			}
		], {
			xaxis : {
				tickFormatter: function(val, axis) { 
					return val < axis.max ? val : val + "<br>探索範囲";
				}
			},
			yaxis : {
				tickFormatter: function(val, axis) { 
					return val < axis.max ? val : "素数の個数<br>" + val;
				}
			},
			grid : {
				hoverable : true,
				clickable : true
			}
		});
		
		
		// グラフ上にホバーして現れるツールチップボックス要素
		$("<div id='tooltip'></div>").css({
			position           : "absolute",
			display            : "none", // 最初は消しておく
			border             : "1px solid #fdd",
			padding            : "2px",
			"background-color" : "#fee",
			opacity            : 0.80
		}).appendTo("body");

		// グラフ領域上でのイベントを定義
		$("#placeholder").bind("plothover", function (event, pos, item) {

			if (item) {
				var x = item.datapoint[0];
				var y = item.datapoint[1];

				$("#tooltip")
					.html(
						// この座標での値を表示
						item.series.label 
							+ " = " 
							+ y.toFixed(2)
							+ " ( x = " 
							+ x 
							+ " )" 
						)
					.css({
						top  : item.pageY+5, 
						left : item.pageX+5
					})
					.fadeIn(200); // 現れる
	
			} else {
				$("#tooltip").hide();
			}

		});

		$("#placeholder").bind("plotclick", function (event, pos, item) {
			if (item) {
				plot.highlight(item.series, item.datapoint);
			}
		});


	});
	
</script>


<div id="placeholder" class="placeholder"></div>


<style>

/* flotは縦横の大きさを指定しないと描画できない */
.placeholder {
    height: 450px;
    width: 850px;
}

</style>


</body>
</html>

参考にしたURL

flotの基礎的な使い方:

Flotでグラフ作成 折れ線グラフ・棒グラフ | Arti
http://arti.jp.net/blog/archives/299/


JavaScript で,クリックした座標に点を追加できるグラフチャートを描画する方法 (jQueryプラグイン jquery.sparklines / jquery.flotの使い方)
http://d.hatena.ne.jp/language_and_engineering/20081120/1227114053

描画領域の端っこにまとめて凡例を表示する方法:

Flot Chart Custom Legend example - Pure Example
http://www.pureexample.com/jquery-flot/custom-legend.html

  • $.plot($("#flotcontainer"), [ {label:"data1", data:data1}, {label:"data2", data:data2}, {label:"data3", data:data3} ], options );

x軸やy軸の先端に,軸の名称ラベルを表示する方法:

javascript - Axis label in Flot - Stack Overflow
http://stackoverflow.com/questions/5563270/axis-label-in-flot

  • i'm using this workaround: yaxis: { tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";} }

グラフ上の点にマウスホバーおよびクリックするサンプル:

Flot Examples: Interactivity
http://www.flotcharts.org/flot/examples/interacting/

  • Try pointing and clicking on the points.

素数計数関数の近似値:

素数定理 - Wikipedia
http://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0%E5%AE%9A%E7%90%86#.CF.80.28x.29.2C_x_.2F_ln_x.2C_li.28x.29_.E3.81.AE.E8.A1.A8

  • ln x で近似できるということを意味する。こちらのほうが近似精度は少し悪くなるが計算上扱い易い。これを \frac{\pi (x)}{x} \sim \frac{1}{\ln x} と変形すれば、x 以下での素数の割合が 1ln x で近似できることが分かる


X以下の数の因数の数の合計、素因数の数の合計をグラフにしてみた - 物置
http://monooki.ldblog.jp/archives/39473800.html

  • 素数計数関数は素数定理にて近似関数が出ています。 X以下の素数の数、Y=X/Log(X)、Y=Li(X)