共通テスト対策！相関係数をグラフから見積って当てるゲーム

Posted at 2025-01-16

相関係数について

皆さんは相関係数をご存じでしょうか？
相関係数とは2つの変数の間に存在する関係の強弱を数値で表す統計量で、-1から+1までの値をとります。

定義や計算方法を知っている方は多いでしょうが、相関係数が0.8とか0.6とか言ったときに
実際にはグラフがどんな見た目になっているかは気にしたことがない方も多いのではないでしょうか

実務ではグラフを眺めて"相関係数が0.6と出てきたけどこれ本当にあっているのかな？"とかチェックすることもありますから、見た目を押さえておくことも重要なのかもしれません（本当か？）
この受験生の盲点を突いた奇問が実際に今日共通テストで出題されたこともあります

（共通テスト 2022より引用）

今や大卒者もこぞってエンジニアを目指す時代・志望大学に入れなければキャリアの出鼻をくじかれたような気分にエンジニア志望受験生はなってしまうかもしれません
相関係数を目算できないエンジニアは生き残れない時代がやってきたといっても過言ではないでしょう

さっそく作った

そこでみんなの相関係数眼を鍛えるべく、相関係数をグラフから見積って当てるゲームを作ることにしました。
受験生が学校や塾の合間にも手早く遊べるようにhtmlとjavascriptで書いてブラウザで動くようにしました

JSでグラフ描画といえばChart.jsということでインポート

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
integrity="sha512VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg==" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js">

ランダムに生成したを描画

function draw(){
    // sum関数を使うので定義
    const sum = function(a){return a.reduce((a, b) => a + b, 0);}

    // 描画対象
    var ctx = document.getElementById('chart');
    ctx.width = 600;
    ctx.height = 400;

    // 10点を生成
    const len = 10;
    const xs = [...Array(len).keys()].map((d) =>{ return Math.random() * 100;});
    const ys = [...Array(len).keys()].map((d) =>{ return Math.random() * 100;});
    const xxs = [...Array(len).keys()].map((d) =>{ return xs[d] * xs[d]});
    const yys = [...Array(len).keys()].map((d) =>{ return ys[d] * ys[d]});
    const xys = [...Array(len).keys()].map((d) =>{ return xs[d] * ys[d]});
    const data = [...Array(len).keys()].map((d) =>{ return {x: xs[d], y: ys[d]}});

    // 相関係数を計算
    const ave_x = sum(xs) / len;
    const ave_y = sum(ys) / len;
    const ave_xx = sum(xxs) / len;
    const ave_yy = sum(yys) / len;
    const ave_xy = sum(xys) / len;
    const s_xy = ave_xy - ave_x * ave_y;
    const s_x = ave_xx - ave_x * ave_x;
    const s_y = ave_yy - ave_y * ave_y;
    rho = s_xy / Math.sqrt(s_x * s_y);
    rhoq = Math.round(rho * 5) / 5;
    rhoq = Math.min(0.6, rhoq);
    rhoq = Math.max(-0.6, rhoq);

    // チャートに描画
    myChart = new Chart(ctx, {
      type: 'bubble',
      data: {
        datasets: [{
          label: 'Dataset#1',
          data: data,
          backgroundColor: '#f88',
        }],
      },
      options: {
        scales: {
          y: { min: 0, max: 100 },
          x: { min: 0, max: 100},
        },
      },
    });
  };

htmlで画面を整えたらこのようなものの完成！