모바일 애플리케이션 웹뷰에 사용되는 웹 콘텐츠의 터치 이벤트 사용과 소소한 팁
2019-03-09
D3.js 를 사용하여 데이터 시각화하기 #3 Pie Charts
2018-10-31
Explanation
오늘은 원 그래프 예제 코드를 보면서 D3.js와 API들을 알아보려 합니다.
설명 부분이 저번 글과 겹치는 부분은 생략하려 합니다, 이해가 안되시는 분은 이전 글을 먼저 살짝 보시고 오는게 좋을거 같아요.
[이전글]
D3.js 를 사용하여 데이터 시각화하기 #1 Line Charts
D3.js 를 사용하여 데이터 시각화하기 #2 Bar Charts
아직 초보이기 때문에 글에는 수많은 추측과 오류를 담고 있습니다.
예제 코드 출처
https://beta.observablehq.com/@mbostock/d3-pie-chart
아래의 코드는 위 예제 코드를 아주 조금 수정한 내용입니다.
이번 글도 역시 바로 코드에 주석으로 이야기를 적도록 하겠습니다.
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html lang="ko"> <head> <title>D3 bar chart example</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script src="pie-chart.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
// pie-chart.js const width = 500; const height = 500; const data = [ {name: 'A', value: 1000, color: '#efa86b'}, {name: 'B', value: 1500, color: '#c1484f'}, {name: 'C', value: 1300, color: '#d35d50'}, {name: 'D', value: 900, color: '#f4c17c'}, {name: 'E', value: 400, color: '#fae8a4'}, {name: 'F', value: 1200, color: '#df7454'}, {name: 'G', value: 1100, color: '#e88d5d'}, {name: 'H', value: 600, color: '#f8d690'} ]; const arc = d3.arc().innerRadius(150).outerRadius(Math.min(width, height) / 2); // .arc() 새로운 기본값의 아치(호) 생성 // .innerRadius() 안쪽 반지름 값, 0이면 완전한 원이되고 값이 있으면 도넛 형태가 됩니다. // .outerRadius() 바깥쪽 반지름값 const arcLabel = (() => { const radius = Math.min(width, height) / 2 * 0.8; return d3.arc().innerRadius(radius).outerRadius(radius); })(); // 라벨이 위치할 반지름 값을 설정합니다. const pie = d3.pie() // 새로운 기본값의 파이 모양의 생성 .sort((a, b) => b.value - a.value) // data의 value 큰값 > 작은값 순으로 정렬합니다. ex. 반대 순서는 a.value - b.value .value(d => d.value); const arcs = pie(data); const svg = d3.select('body').append('svg').style('width', width).style('height', height) .attr('text-anchor', 'middle') // text-anchor 텍스트의 정렬을 설정합니다 ( start | middle | end | inherit ) .style('font-size', '12px sans-serif'); const g = svg.append('g') .attr('transform', `translate(${width/2}, ${height/2})`); // 우선 차트를 그릴 그룹 엘리먼트를 추가합니다. // 위치값을 각각 2로 나누는건 반지름 값을 기준으로 한바퀴 돌며 path를 그리기 때문인거 같습니다. g.selectAll('path') .data(arcs) .enter().append('path') // 이전과 동일하게 가상 path 요소를 만들고 그래프 데이터와 매핑하여 엘리먼트를 추가합니다. .attr('fill', d => d.data.color) // 다른 그래프와 다르게 .data 라는 객체가 추가되어 있는데, 위에 arcs 변수를 선언할때 // .pie(data)가 {data, value, index, startAngle, endAngle, padAngle} 의 값을 가지고 있습니다. .attr('stroke', 'white') .attr('d', arc) .append('title') .text(d => `${d.data.name}: ${d.data.value}`); // 각각 페스의 자식으로 title의 엘리먼트에 텍스트로 출력합니다. // 실제로 뷰에 출력되지는 않지만 시멘틱하게 각각의 요소의 설명 문자열을 제공합니다. const text = g.selectAll('text') .data(arcs) .enter().append('text') .attr('transform', d => `translate(${arcLabel.centroid(d)})`) .attr('dy', '0.35em'); // 라벨을 취가하기 위한 text 엘리먼트를 만들고 위치를 지정합니다. text.append('tspan') .attr('x', 0) .attr('y', '-0.7em') .style('font-weight', 'bold') .text(d => d.data.name) // 해당 데이터 항목의 이름을 두꺼운 글씨로 출력합니다. ex. A text.filter(d => (d.endAngle - d.startAngle > 0.25)).append('tspan') .attr('x', 0) .attr('y', '0.7em') .attr('fill-opacity', 0.7) .text(d => d.data.value); // 해당 데이터의 수치값을 투명도를 주어 출력합니다. ex. 1000 svg.node(); |
이렇게 그래프 3대장의 예제를 모두 살펴보았습니다! 아직 이해하지 못한 부분도 많지만 마치 이젠 뭐든 만들 수 있을 것만 같은 자신감이 생긴 듯 합니다!
