티스토리 뷰

Visualization/시도

[d3.js] 데이터셋으로 막대그래프 만들기

yucalip 2015. 4. 15. 01:04



엑셀에서 범위 지정해서 차트 마법사를 누르면 뚝딱 만들 수 있는 흔하디 흔한 막대그래프이지만,

처음으로 dataset을 연동시켜서 코딩으로 막대그래프를 만들어보았다. 

아 뿌듯... ㅠㅠ





코드는


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://d3js.org/d3.v3.min.js"></script>

</head>

<body>

<script>

d3.csv("data.csv", function(error, dataset) {

//여러가지 입력


//svg캔버스 가로세로 설정

var width = 1000;

var height = 400;

var barPadding= 1; //막대사이의 간격 띄우기

//캔버스 생성 = 빈 svg요소를 d3로 생성해서 dom에 추가

var svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height);





//사각형을 그리는 rect를 생성해서 svg에 추가하기

svg.selectAll("rect")

.data(dataset)

.enter()

.append("rect")

.attr("x", function(d, i){ //겹쳐보이지 않도록 x축 간격 띄워준 것.

return i * (width/dataset.length);

})

.attr("y", function(d){

return height - d.value/4;

})

.attr("width", width / dataset.length - barPadding)

.attr("height",function(d){return d.value/4;})


//꾸미기

.attr("fill",function(d){return "rgb(100,23,234";})


//라벨붙이기 - place holder : 새 문서요소에 진입

svg.selectAll("text")

.data(dataset)

.enter()

.append("text")

.attr("x", function(d, i){

return i * ( width / dataset.length) + 19;

})

.attr("y", function(d){

return height - (d.value/4) + 20;

})

.attr("fill","white")

.attr("font-size","12px")

.attr("font-family","sans-serif")

.attr("text-anchor", "middle") //중앙정렬

.text(function(d){

return d.value;

});


//축생성하기


});

</script>


</body>

</html> 



저작자표시 비영리 변경금지

'Visualization > 시도' 카테고리의 다른 글

꿈데디 미니콘테스트! scatter plot 그려서 숨겨진 글자 알아내기  (0) 2015.04.26
공유하기 링크
댓글