Information Technology Tips

Motivation: Visualize 2 Dimensional Data with Lightweight Way I wrote small java program for calculating Jaccard Similarity among source code in this post . And map into them 2 dimensional map using Multi Dimensional Scaling technique. I have used MDSJ – Multidimensional Scaling for Java . (By the way the library is quite simple and meet my requirement perfectly!! Excellent!!)> Next step is how to visualize the bunch of 2 dimensional (x,y) coordinate data so that human can easily understand. Of course, I am good at Java, I can write some code for visualize data in Java using Swing or Java FX etc. But it's not lightweight way. So, I decided to use HTML5 Canvas + Javascript. Viewer: Html5 Canvas + Javascript The features of the Data Viewer are: Visualize CSV data Expected 3 columns without header row: name...

Improve Performance for MySQL CALC_FOUND_ROWS with LIMIT OFFSET Push State Push state is html5 technology that records browsing history in javascript without actual page refresh. Push state is useful for recording Ajax request, which cannot record the browsing history normally, and telling the corresponding url for the Ajax request to browser. The minimum push state code is below: // push the browser state if (typeof(history.replaceState) !== "undefined") { history.pushState({prop1: "a", prop2:"b"}, null, "/url/?param1=param"); } // when browser back button is pressed, pop state event is fired // pop state handler is registered in the folloing code window.onpopstate = function (event) { if (event.state == null) { return; } // do something nice ;) // using "event.state.prop1" for example }; The usage of push state is quite simple. One thing you should...

HTML5のcanvasエレメントを使うと画像のピクセル処理ができると知りまして、試しにJavascriptで画像処理プログラムを書いてみました。 「画像処理なんてServer Sideでやれよ!」とか「なんでC++ではなくてJavascript?」というご指摘もありそうですがご容赦のほどを。 デモを公開 しました。 注意点など   デモを見るにはHTML5対応のブラウザが必要（当たり前）。  サイズの大きなメディアンフィルタのデモは少し時間がかかるので、気長に待ってください。  サーバサイド側では何もしていません。興味のある方はhtmlのソースを見てください。役に立ちそうなら、勝手に使っちゃってください。（でもこのブログにリンクとか張ってくれると、とても嬉しいです。）  今のところ以下の処理が選択できます。がんばって増やします!! 輝度変換 グレースケール化（YUV画像ののY値信号のみ取り出し） メディアンフィルタ(3x3, 5x5, 7x7) 判別分析法による2値化 Prewitt Filter Sobel Filter Laplacian Filter Sharpening Filter LOG Filter(エッジ検出)  今後、試したい処理 Gammaカーブ変更 コーナー検出 ハフ変換 パターンマッチング アフィン変換 画像のResampling フーリエ変換 バイラテラルフィルタ ラベリング ソースコード例 上記のURLからソースコードを読むと余計なコードが入っていますので、純粋に画像処理部分だけ抜き出したコードを下に示します。 興味がある方は、サンプルサイトのソースコードを読んでみてください。 判別分析法による2値化 function binalyze(srcRgbImageData, destImageData) { var step = 4; var LEN = 256, MAX=255; var srcRgb = srcRgbImageData.data; var dest = destImageData.data; var imgWidth = srcRg...