OLD/D3

d3를 사용한 시각화 작업 step 1

몽블86 2017. 4. 20. 15:46 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>가로�� 막대그�프</title>
    <style>
        #myGraph rect {
            stroke: rgb(160, 0, 0);
            stroke-width: 1px;
            fill: rgb(255, 0, 0);
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .axis path, .axis line {
            fill: none;
            stroke: black;
        }
    </style>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>가로�� 막대그�프</h1>
<svg id="myGraph"></svg>
<script type="text/javascript" src="./js/p82.js"></script>
</body>
</html>
// CSV 파일을 불러와 그�프 그리기
d3.csv("./js/mydata.csv", function(error, data){
    var dataSet = [ ];	// 데이터를 저장할 배열 준비
    for(var i=0; i<data.length; i++){	// 데이터 줄 �만큼 �복
        dataSet.push(data[i].item1);	// item1 레이블� 데이터만 추출
    }
    // 데이터를 이용�여 그�프 그리기
    d3.select("#myGraph")	// SVG 요소 지정
        .selectAll("rect")	// SVG에서 사각��을 �타낼 요소를 지정
        .data(dataSet)	// 데이터 설정
        .enter()	// 데이터 개�에 떄라 Rect 요소 생성
        .append("rect")	// SVG 사각�� 생성
        .attr("x", 10)	// 가로�� 막대그�프이므로 X 좌표를 10으로 조정
        .attr("y", function(d,i){	// Y 좌표를 배열 순서에 따라 계산
            return i * 25;	// 막대그�프� Y 좌표를 25px 단위로 계산
        })
        .attr("height", "20px")	// 막대그�프� 높이를 20px로 지정
        .attr("width", function(d, i){	// 막대그�프� 넓이를 배열� 내용에 따라 계산
            return d +"px";	// 데이터� 값을 그대로 넓이로 함
        })
    // 눈금을 표시�고자 선�� 스케일을 설정
    var xScale = d3.scale.linear()  // 선�� 스케일 설정
        .domain([0, 300])   // 원� 데이터 범위
        .range([0, 300])  // 실제 출력 크기
    // 눈금을 설정�고 표시
    d3.select("#myGraph")
        .append("g")	// 그룹화함
        .attr("class", "axis")	// 스타일시트 클�스 설정
        .attr("transform", "translate(10, "+((1+dataSet.length) * 20+5)+")")	// 표시 위� 조정
        .call(d3.svg.axis()	// call()로 눈금을 표시할 함�를 ��출
            .scale(xScale)  // 스케일을 적용
            .orient("bottom")   // 눈금� 표시 위�를 아�쪽으로 지정
        )
});