웹에 산점도 구현하기

phpschool에서 산점도를 표현하는 방법을 묻는 글(http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_other& amp;wr_id=102571&page=2)을 봤다.
답변으로 달린 사이트를 보다가 오늘 오전에 본 그래프 관련 글이 떠올랐다.
그래서 html과 자바스크립트로 만들 수 있지 않을까 하는 생각에 간단하게 만들어봤다.

아래 소스의 〈 문자는 특수 문자이니, �어다 넣고 작동이 안된다고 하면 OTL

〈 문자를 정상적인 꺽쇠 문자로 변환한 후에 작동하면 된다.

〈body onload=viewpoint()>
〈table width=301 height=301 align=center bgcolor=silver style="border-left:1px solid black;border-bottom:1px solid black">
  〈tr>
    〈td width=100% height=100% valign=top>
      〈!-- td에 position:relative를 주면 불여우에서는 인식하지 않는다. -->
      〈span id=pointspan style=position:relative>〈/span>
    〈/td>
  〈/tr>
〈/table>

〈script>
  function viewpoint(){
    //산점도에 찍힐 점들의 좌표값, 정보
    var xpoints=new Array(34,62,79,8,33,95,71)
    var ypoints=new Array(8,33,95,71,34,62,79)
    var infos=new Array('a','b','c','d','e','f','g')
    //x, y 좌표의 최고 값
    var topx=300,topy=300

    //산점도를 찍을 영역 개체
    var obj=document.getElementById('pointspan')
    obj.innerHTML=''

    //각 점을 가로, 세로 3픽셀씩 할당하고 위치를 1픽셀씩 옮긴다.
    //y 좌표값의 경우, 위가 기준이므로 y 좌표의 최고값에서 각 점의 y 좌표값을 뺀다. (예 : y 좌표값이 10픽셀이면, 상단이 0점이므로 그냥 찍으면 아래에 0으로 표기한 것이 무용지물이 된다. 그래서 최고값 300-10을 해서 290px 지점에 찍으면 아래에서는 10px 지점이 되므로 제대로 표시된다.
    for(var i=0;i〈xpoints.length;i++){
      obj.innerHTML=obj.innerHTML+'〈img src=http://phpschool.com/images/background.gif width=3 height=3 style=position:absolute;left:'+(xpoints[i]-1)+'px;top:'+(300-ypoints[i]-1)+'px title="'+infos[i]+'">'
    }
    //y 좌표값의 최고값을 찍을 때 길이에 따라 시작 위치가 달라져야 하므로 자릿수*10px 정도로 한다. (글꼴에 따라 다르다.)
    obj.innerHTML=obj.innerHTML+'〈span style=position:absolute;left:-'+(topy.toString().length*10)+'px;top:0px>'+topy+'〈/span>〈span style=position:absolute;left:'+(topx-20)+'px;top:'+(topy+5)+'px>'+topx+'〈/span>〈span style=position:absolute;left:-15px;top:'+topy+'px>0〈/span>'
  }
〈/script>