본문 바로가기
JAVASCRIPT

JAVASCRIPT ) canvas로 데이터 시각화

Hweb 2024. 8. 2. 13:09

 

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>

<script>
    const letterA = [
        [1,1,1,1,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,1,1,1,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1]
    ];  //row = YA / column = XA
    const mtPen = document.getElementById('myCanvas').getContext('2d');
    const printDot = (xL, yL) => {mtPen.fillRect(xL, yL, 1, 1);};
    const prinA = () => {
        for(let yA=0; yA<letterA.length; yA++){
            for(let xA=0; xA<letterA[0].length; xA++){
                if(letterA[yA][xA] == 1) {
                    printDot(xA, yA);
                }
            }
        }
    }
    prinA();
</script>

 

 

좌표(0,0)위치바꾸기

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>

<script>
    const letterA = [
        [0,1,1,1,0],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,1,1,1,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1],
        [1,0,0,0,1]
    ];  //row = YA / column = XA
    const mtPen = document.getElementById('myCanvas').getContext('2d');
    const printDot = (xL, yL) => {mtPen.fillRect(xL, yL+300-9, 1, 1);};
    const prinA = (mX, mY) => {
        for(let yA=0; yA<letterA.length; yA++){
            for(let xA=0; xA<letterA[0].length; xA++){
                if(letterA[yA][xA] == 1) {
                    printDot(xA + mX, yA - mY);
                }
            }
        }
    }
    prinA(40, 50);
</script>

 

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>

<script>

    const myPen = document.getElementById('myCanvas').getContext('2d');
    const modiDot = (x, y) => {
        myPen.fillRect(x+150,150-y,1,1);
    }
    const printCross = () => {
        for(let i=0; i<300; i++){
            myPen.fillRect(150,i,1,1)
        }
        for(let i=0; i<300; i++){
            myPen.fillRect(i,150,1,1)
        }
    }
    printCross();
    modiDot(20,20);
</script>

 

 

예제

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>
    
<script>

    const myPen = document.getElementById('myCanvas').getContext('2d');
    const modiDot = (x, y) => {
        myPen.fillRect(x+150,150-y,1,1);
    }

    const printCross = () => {
        for(let i=0; i<300; i++){
            myPen.fillRect(150,i,1,1)
        }
        for(let i=0; i<300; i++){
            myPen.fillRect(i,150,1,1)
        }
    }
    printCross();

    // 직선 그리기
    modiDot(20,20);
    modiDot(-80,-40);
    for(let x=-80; x<20; x++){
        const y = 3/5 * x + 8;
        modiDot(x,y);
    }
    modiDot(-20,70);
    modiDot(120,90);
    for(let x=-20; x<120; x++){
        const y = 1/7 * x + 510/7;
        modiDot(x,y);
    }

    // 원 그리기
    //(x-a)**2 + (y-b)**2 = r**2
    //반지름 = 55
    //x=10 / y=10
    for(x=-45; x<65; x=x+0.01){
        const y1 = Math.sqrt(55**2 - (x-10)**2)+10;
        modiDot(x,y1);
        const y2 = (Math.sqrt(55**2 - (x-10)**2) * -1)+10;
        modiDot(x,y2);
    }


    // 대칭 그리기
    //x1이 x2보다 작다는 조건
    const reflectPrint1 = (x1,y1,x2,y2) => {
            for(let x=x1; x<x2; x++){
            const y = (y2-y1) / (x2-x1) * (x - x1) + y1;
            modiDot(x,y);
            modiDot(-x,y);
            modiDot(x,-y);
            modiDot(-x,-y);
        }
    }
    reflectPrint1(20,40,60,80);

    //사각형 그리기
    const reflectPrint2 = (x1,y1,x2,y2) => {
        for(let x=x1; x<x2; x++){
            for(let y=y2; y<y1; y++){
                modiDot(x,y1);
                modiDot(x,y2);
                modiDot(x1,y);
                modiDot(x2,y);
            }
        }
    }
    reflectPrint2(10,50,90,20);

</script>

 

 

예제) 막대그래프 그리기

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>
    
<script>

    const myPen = document.getElementById('myCanvas').getContext('2d');
    const modiDot = (x, y) => {
        myPen.fillRect(x+20,280-y,1,1);
    }

    const printCross = () => {
        for(let i=0; i<300; i++){
            myPen.fillRect(20,i,1,1)
        }
        for(let i=0; i<300; i++){
            myPen.fillRect(i,280,1,1)
        }
    }
    printCross();

    let x1 = 10;
    let x2 = 20;
    let y1 = [25,38,49,25];

    const squarePrin = (x1,y1,x2,y2) => {

        for(let x=x1; x<x2; x++){
            modiDot(x, y1);
            modiDot(x, y2);
        }
        for(let y=y2; y<y1; y++ ){
            modiDot(x1, y);
            modiDot(x2, y);
        }

    }

    for(let i=0; i<y1.length; i++){ //0,1,2,3
        squarePrin(x1, y1[i], x2, 0);
        x1 = x1 + 20;
        x2 = x2 + 20;
    }
</script>

 

 

예제) 스케일팩터 설정하여 단위 수정하기

<canvas id="myCanvas" class="myCanvas" width="300" height="300"></canvas>
    
<script>
    const myPen = document.getElementById('myCanvas').getContext('2d');
    const scaleFactor = 100;
    const modiDot = (x, y) => {
        myPen.fillRect(x*scaleFactor + 20, 280 - y*scaleFactor, 1, 1);
    }

    const printCross = () => {
        for(let i=0; i<300; i++){
            myPen.fillRect(20,i,1,1)
        }
        for(let i=0; i<300; i++){
            myPen.fillRect(i,280,1,1)
        }
    }
    printCross();

    modiDot(1,1);
</script>

 

 

예제) 눈금 그리기

<canvas id="myCanvas" class="myCanvas" width="500" height="500"></canvas>
    
<script>
    const myPen = document.getElementById('myCanvas').getContext('2d');
    const scaleFactor = 100;
    const modiDot = (x, y) => {
        myPen.fillRect(x*scaleFactor + 250, 250 - y*scaleFactor, 1, 1);
    }

    const printCross = () => {
        for(let i=0; i<500; i++){
            myPen.fillRect(250,i,1,1)
        }
        for(let i=0; i<500; i++){
            myPen.fillRect(i,250,1,1)
        }
    }
    printCross();

    const printScaleFactor = (x,y) => {
        for(let j=1; j<3; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(250 + scaleFactor*j, 250 - i , 1, 1);
            }
            for(let i=-10; i<10; i++){
                myPen.fillRect(250 - scaleFactor*j, 250 - i , 1, 1);
            }
        }

        for(let j=1; j<3; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(250 - i , 250 + scaleFactor*j, 1, 1);
            }
            for(let i=-10; i<10; i++){
                myPen.fillRect(250 - i , 250 - scaleFactor*j, 1, 1);
            }
        }

    }
    printScaleFactor();
</script>

 

 

그래프 그리기

<style>
    * {margin: 0; padding: 0;}
    .myCanvas {border: 1px solid red; padding: 20px;}
</style>

<canvas id="myCanvas" class="myCanvas" width="500" height="500"></canvas>
    
<script>
    const myPen = document.getElementById('myCanvas').getContext('2d');
    const scaleFactor = 100;
    const modiDot = (x, y) => {
        myPen.fillRect(x*scaleFactor + 20, 580 - y*scaleFactor, 1, 1);
    }

    const printCross = () => {
        for(let i=0; i<500; i++){
            myPen.fillRect(20,i,1,1)
        }
        for(let i=0; i<500; i++){
            myPen.fillRect(i,480,1,1)
        }
    }
    printCross();

    const printScaleFactor = (x,y) => {
        for(let j=0; j<5; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(20 + scaleFactor*j, 480 - i , 1, 1);
            }
        }

        for(let j=0; j<5; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(20 + i , scaleFactor*j, 1, 1);
            }
        }

    }
    printScaleFactor();

    let day = Number(prompt("날수입력"));
    let ameba = 0;

    for(let x=0; x<=day; x += 1/scaleFactor){
        let y = 2 ** x;
        modiDot(x,y);
    }
</script>

 

 

 

y축 값 2의 x승으로 

    <canvas id="myCanvas" class="myCanvas" width="500" height="500"></canvas>
    
<script>
    const myPen = document.getElementById('myCanvas').getContext('2d');
    
    let scaleFactor = 100;
    const modiDot = (x, y) => {
        myPen.fillRect(x*scaleFactor + 20, 480 - Math.log2(y)*scaleFactor, 1, 1);
    }

    const printCross = () => {
        for(let i=0; i<500; i++){
            myPen.fillRect(20,i,1,1)
        }
        for(let i=0; i<500; i++){
            myPen.fillRect(i,480,1,1)
        }
    }
    printCross();

    const printScaleFactor = (x,y) => {
        for(let j=0; j<11; j++){
            for(let i=-10; i<11; i++){
                myPen.fillRect(20 + scaleFactor*j, 480 - i , 1, 1);
            }
        }

        for(let j=0; j<11; j++){
            for(let i=-10; i<11; i++){
                myPen.fillRect(20 + i , 480 - scaleFactor*j, 1, 1);
            }
        }

    }
    printScaleFactor();

    
    for(let x=0; x<=100; x += 1/scaleFactor){
        let y = 2 ** x;
        modiDot(x,y)
    }

    modiDot(2,1)
</script>

 

 

 

점으로 그래프

<canvas id="myCanvas" class="myCanvas" width="500" height="500"></canvas>

<script>
    class Stack {
        constructor( id ) {
            this.id = id;
            this.storage = [];
        }
        pushItem( item ){ this.storage.push( item ); }
        popItem(){ return this.storage.pop(); }
    }
    const myA = [ 95, 70, 83, 92, 100, 88, 46, 35, 90, 75 ];
    const myB = [ 95, 70, 83, 92, 88, 46, 35, 90, 75 ];
    const copyA = [ ...myA ];
    const copyB = [ ...myB ];
    let medianValue = 0;
    let minValue = Math.min(...myA)
    let maxValue = Math.max(...myA)
    console.log(maxValue)
    //copyA.sort((a,b)=>a-b);
    copyB.sort((a,b)=>a-b);

    const leftStack = new Stack('leftStack');
    const rightStack = new Stack('rightStack');

    for(;;) {
    if( copyB.length === 1 ) {
        medianValue = copyB[0];
        break;
    } else if ( copyB.length ===0 ){
        medianValue = ( leftStack.popItem() + rightStack.popItem() ) / 2 ;
        break;
    } else {
        leftStack.pushItem( copyB.shift() );
        rightStack.pushItem( copyB.pop() );
    }
    }
    document.write( 'Median : ' + medianValue );

    const myPen = document.getElementById('myCanvas').getContext('2d');
    const scaleFactor = 4;
    const modiDot5 = (x, y) => {
        myPen.fillRect(x*scaleFactor, 499 - y*scaleFactor, 5, 5);
    }
    const modiDot10 = (x, y) => {
        myPen.fillRect(x*scaleFactor, 499 - y*scaleFactor, 10, 10);
    }
    const modiDotRed = (x, y) => {
        myPen.fillStyle = "red";
        myPen.fillRect(x*scaleFactor, 499 - y*scaleFactor, 1, 1);
    }

    const printCross = () => {
        for(let i=0; i<500; i++){
            myPen.fillRect(0,i,1,1)
        }
        for(let i=0; i<500; i++){
            myPen.fillRect(i,499,1,1)
        }
    }
    printCross();

    const printScaleFactor = (x,y) => {
        for(let j=0; j<10; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(scaleFactor*j, 500 - i , 1, 1);
            }
        }

        for(let j=0; j<10; j++){
            for(let i=-10; i<10; i++){
                myPen.fillRect(i , scaleFactor*j, 1, 1);
            }
        }

    }

    for(y in copyA){
        if(copyA[y] == maxValue){
            modiDot10(copyA.indexOf(maxValue)*10, maxValue);
            myPen.fillStyle = "white";
            modiDot5((copyA.indexOf(maxValue)*10) + 0.6, maxValue - 0.6);
        }else if(copyA[y] == minValue){
            myPen.fillStyle = "black";
            modiDot10(copyA.indexOf(minValue)*10, minValue);
            myPen.fillStyle = "white";
            modiDot5((copyA.indexOf(minValue)*10) + 0.6, minValue - 0.6);
        }else{
            myPen.fillStyle = "black";
            modiDot5((Number(y)+1)* 10, copyA[y]);
        }

    }

    for(let x=0; x<=130; x += 1/scaleFactor){
        modiDotRed(x,medianValue);
    }
</script>
반응형

'JAVASCRIPT' 카테고리의 다른 글

JAVASCRIPT ) canvas에 방정식 그래프 그리기  (0) 2024.08.08
JAVASCRIPT ) 객체 delete  (0) 2024.08.06
JAVASCRIPT ) Double Linked List  (0) 2024.07.31
JAVASCRIPT ) singly Linked List  (0) 2024.07.31
JAVASCRIPT ) map()  (0) 2024.07.30

'JAVASCRIPT' Related Articles

티스토리툴바