京都の技術者ロードローラーさんのブログ

こんばんは、ロードローラーです。京都はすっかり熱くなりましたね。

さて、ここ最近はGoogleChartsでデータ可視化を色々と試してました。ついでにJavascriptで基本的なデータ分析が出来ればいいなぁと思い立ちました。

詳細な分析は専用ソフトを使ってくれればいいんですが、データ可視化ついでにせめて相関係数くらい提示できれば、なんとなく因果関係がありそうな分布に数値エビデンスを加えられるからです。

というわけで早速実装。①温度と②湿度を２次元にプロットして相関係数を算出しています。２次元散布図ということでScatter Chartを利用しました。

Scatter Chart
https://developers.google.com/chart/interactive/docs/gallery/scatterchart

サンプルはコチラで動作させられます

が・・・、あれ？

温度と湿度って基本的に負相関だと思ってたんですが正相関になってますね、しかも0.95とかなり強烈な。。。。おそらく屋外の環境ではなく、室内の人工的に調整された環境のデータだからですね。加湿機能付きヒーターによって温湿度が同時上昇したとか。


<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type='text/javascript'>
    
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {  
        console.log("START");
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'TEMPERATURE');
        data.addColumn('number', 'HUMIDITY');
        
        $(function() {
            $.ajax({
                url: 'http://****.json',
            })
            .done(function(tempData){
                console.log("success loading");
                var rows = new Array();
                $(tempData).each(function(){
                    var row = [this.TEMPERATURE, this.HUMIDITY];
                    rows.push(row);
                    console.log(row);
                });

                var options = {
                  title: 'TEMPERATURE vs. HUMIDITY comparison',
                  hAxis: {title: 'TEMPERATURE', minValue: 20, maxValue: 24},
                  vAxis: {title: 'HUMIDITY', minValue: 50, maxValue: 70},
                  colors: ['#087037'],
                  // pointShape: 'star',
                  pointSize: 2,
                  legend: 'none'
                };

                data.addRows(rows);
                var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
                chart.draw(data, options);
                
                document.getElementById('correlation_div').textContent =  '相関係数：' +  Correlation(rows).toString();
            })
            .fail(function(){
                console.log("error");
            });
        });
        
        function Correlation(datas){
            var m = Math,n;
            n = datas.length;
            var sumx=0, sumy=0, sumxx=0, sumyy=0, sumxy=0 
                ,xm ,ym ,xxi ,yyi
                ,sumxxm=0, sumyym=0, sumxym=0
                ,i;
            // 総和算出
            for(i=0; i<n; i++){
                sumx += datas[i][0]; 
                sumy += datas[i][1]; 
            }
            // 平均算出
            xm = sumx/n;
            ym = sumy/n;
            for(i=0; i<n; i++){
                xxi = datas[i][0];
                yyi = datas[i][1];
                sumxxm += (xxi-xm) * (xxi-xm);
                sumyym += (yyi-ym) * (yyi-ym);
                sumxym += (xxi-xm) * (yyi-ym);
            }                                  
            return sumxym / m.sqrt(sumxxm) / m.sqrt(sumyym);
           
        }
    }
</script>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

console.log("START");

var data = new google.visualization.DataTable();

data.addColumn('number', 'TEMPERATURE');

data.addColumn('number', 'HUMIDITY');

$(function() {

$.ajax({

url: 'http://****.json',

})

.done(function(tempData){

console.log("success loading");

var rows = new Array();

$(tempData).each(function(){

var row = [this.TEMPERATURE, this.HUMIDITY];

rows.push(row);

console.log(row);

});

var options = {

title: 'TEMPERATURE vs. HUMIDITY comparison',

hAxis: {title: 'TEMPERATURE', minValue: 20, maxValue: 24},

vAxis: {title: 'HUMIDITY', minValue: 50, maxValue: 70},

colors: ['#087037'],

// pointShape: 'star',

pointSize: 2,

legend: 'none'

};

data.addRows(rows);

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

chart.draw(data, options);

document.getElementById('correlation_div').textContent = '相関係数：' + Correlation(rows).toString();

})

.fail(function(){

console.log("error");

});

function Correlation(datas){

var m = Math,n;

n = datas.length;

var sumx=0, sumy=0, sumxx=0, sumyy=0, sumxy=0

,xm ,ym ,xxi ,yyi

,sumxxm=0, sumyym=0, sumxym=0

,i;

// 総和算出

for(i=0; i<n; i++){

sumx += datas[i][0];

sumy += datas[i][1];

}

// 平均算出

xm = sumx/n;

ym = sumy/n;

for(i=0; i<n; i++){

xxi = datas[i][0];

yyi = datas[i][1];

sumxxm += (xxi-xm) * (xxi-xm);

sumyym += (yyi-ym) * (yyi-ym);

sumxym += (xxi-xm) * (yyi-ym);

}

return sumxym / m.sqrt(sumxxm) / m.sqrt(sumyym);

}

</script>

今日はここまで、それではごきげんよう♪

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

日: 2017年5月18日

Javascriptで相関係数の算出

が・・・、あれ？