[코풀수: 기본] 좌표 평면과 그래프 그리기

날짜:
두 숫자의 쌍을 평면에 나타내는 것은 매우 획기적인 아이디어이다. 기하학과 대수학이 합쳐지는 순간이다.


순서쌍


두 숫자(x, y)의 순서쌍 P을 아래와 같이 표현할 수 있다.


x를 나타내는 선은 수평으로 하고, y를 나타내는 선은 수직으로 하여 서로 0에서 만나게 각 선에 눈금을 표기한다. 그리고 각각 선의 직각 방향으로 점선을 그어 만나는 점이 P의 위치가 된다.

좌표 평면

랜덤 순서쌍의 개수:



순서쌍의 개수를 입력하고 버튼을 누르세요.

N개의 순서쌍을 랜덤하게 생성(난수 발생)하여 그래프를 그려주는 코딩이다. 구글의 Scatter Chart를 활용하였다.

<!DOCTYPE html>
<html>
<header>
    <title>좌표 평면</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        
        function drawChart(num = 10) {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');

            for (var i = 0; i < num; i++) {
                var x = 10*Math.random() - 5;
                var y = 10*Math.random() - 5;
                data.addRow([x, y]);
            }

            var options = {
                chart: {title: 'Cartesian Coordinates'},
                hAxis: {title: 'x', minValue: -5, maxValue: 5},
                vAxis: {title: 'y', minValue: -5, maxValue: 5},
                crosshair: { trigger: "both", orientation: "both" },
                legend: 'none',
            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
            chart.draw(data, options);
        }
    </script>
</header>
<body>

<h4>좌표 평면</h4>

<form>
  랜덤 순서쌍의 개수: <input type="text" id="num" value="10"><br><br>
  <input type="button" id="submit" value="그래프 그리기"><br><br>
</form>
<p id="status">순서쌍의 개수를 입력하고 버튼을 누르세요.</p>
<div id="chart" style="width: 100%; height: 500px"></div>

<script>
    document.getElementById("submit").addEventListener("click", calc);
    
    function calc() {
        // 입력된 문자열을 숫자로 바꾸기
        var num = Number(document.getElementById("num").value);
        if (isNaN(num) || num < 1 || num % 1 != 0) {
            document.getElementById("status").innerHTML = "자연수를 입력하세요.";
            return;
        }
        //그래프 그리기
        drawChart(num);
    }
</script>

</body>
</html>

댓글

댓글 쓰기