JS와 D3를 이용한 시각화(Visualization): d3-pie-chart

D3.js - Drawing Pie Charts

Pie Chart 예

Sales person Pie chart 예

D3 - Pie Chart 그리기

Pie Chart 생성에 사용하는 D3 Methods
SVG Path
d3.scaleOrdinal()
d3.pie()
d3.arc()
Donut chart

D3.js - Drawing Pie Charts 관련 페이지 보기

Pie Chart 예

Sales person Pie chart 예

아래 Chart는 비교적 간단한 Pie chart 프로그램으로 d3.js 프로그램 작성자에게 도움이 될 것으로 기대 되어 설명 페이지를 작성하였다.

Pie chart 예

이 페이지의 내용은 위 Pie chart를 이해하는데 필요한 설명이다.

Pie chart 프로그램 예

<!DOCTYPE html>
<html>
<head>
    <style>
        .sales_arc text {
            font: 12px sans-serif;
            text-anchor: middle;
        }

.sales_arc path {
            stroke: #fff;
        }
    </style>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h3>Pie chart 예: Sales person </h3>
    <svg width="250" height="200"></svg>
    <script>
	
	var svg = d3.select("svg"),
		width = svg.attr("width"),
		height = svg.attr("height"),
		radius = Math.min(width, height) / 2;
	// Pie chart 원점의 위치를 설정한다.
	var g = svg.append("g")
			.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
	
	// Ordinal scale로 Pie chart의 Color scale을 설정한다.
	var color = d3.scaleOrdinal(['#FFF0F5','#87CEEB','#E6E6FA','#6495ED','#FFC0CB']);
	// Pie chart의 StartAngle 및 EndAngle과 같은 파이 값을 생성한다.
	var pie = d3.pie().value(function(d) { 
			return d.percent; 
		});
	
	// Pie chart의 외경과 내경을 설정한다.
	var path = d3.arc()
				.outerRadius(radius - 10)
				.innerRadius(0);
	
	// Label의 위치를 설정한다.
	var label = d3.arc()
				.outerRadius(radius)
				.innerRadius(radius - 80);

// csv Format data file로 부터 pieChart를 그리는데 필요한 Data를 가져온다.
  // d3.csv("sales-person.csv", function(error, data) {
  //   if (error) {
  //      throw error;
  // }
  // Web server에 따라서는 해킹을 방지하기 위하여 별도의 외부 File을 가져오지 못하게 제한하는 경우가 있기 때문에
  // 이 예에서는 Data를 Arrary에 저장하여 사용한다.
  // pieChart를 그리는데 필요한 Data. csv Format data file을 사용하는 경우에는 아래 줄은 Comment 처리한다.
  var data = [{"person": "Kim","percent": 31.0}, {"person": "Park","percent": 24.0},{"person": "Hong","percent": 15.0},{"person": "Cha","percent": 13.0},{"person": "Youn","percent": 17.0}];
  
  //csv Format data file로 부터 Data를 가져오는 경우 아래 줄을 Comment 처리한다.
  function pieChart (data) {
  console.log('data: ', data);	
	// 각 데이터 값에 대한 그룹 요소(Arc)를 생성한다. 이 그룹 요소는 개별 경로 또는 Wedge(Arc)를 갖는다.
	var sales_arc = g.selectAll(".sales_arc")
		.data(pie(data))
		.enter().append("g")
			.attr("class", "sales_arc");

// 각 Arc에 Path 요소를 추가하고, 위에서 생성 된 Arc에 색상 스케일의 색상을 채운다.
	sales_arc.append("path")
		.attr("d", path)
		.attr("fill", function(d) { return color(d.data.person); });
        
		console.log("sales_arc: ", sales_arc)
    // Label text를 추가한다.
	sales_arc.append("text")
		.attr("transform", function(d) { 
			return "translate(" + label.centroid(d) + ")"; 
			})
		.text(function(d) { return d.data.person; });
  //csv Format data file로 부터 Data를 가져오는 경우 아래 줄을 Comment 처리한다.
  }
  //csv Format data file로 부터 Data를 가져오는 경우 아래 줄의 Comment 처리를 해제한다.
  //});
  // pieChart를 그리는 함수를 실행한다.
  //csv Format data file로 부터 Data를 가져오는 경우 아래 줄의 Comment 처리를 삭제한다.
  pieChart(data);

</script>
</body>
</html>

Pie chart 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-chart.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 위 "Pie chart 예"와 같이 "Pie chart 예: Sales person" 메세지가 출력되고 Pie chart가 출력된다.

D3 - Pie Chart 그리기

Pie Chart 생성에 사용하는 D3 Methods

Pie Chart 시각화를 위하여 이 예에서는 다음과 같은 D3 Methods을 사용한다.

D3 Method	설명
SVG Path	정의 된 명령으로 SVG에 경로를 만든다.
d3.scaleOrdinal()	Ordinal scale을 생성한다.
d3.pie()	pie Generator을 생성한다.
d3.arc()	arc Generator을 생성한다.

참고자료: Create Pie Chart using D3

SVG Path

Path element는 SVG에 Drawing 경로를 만드는 데 사용된다.

Path element를 이용하여 Drawing 하기

시작점 (100, 0)에서 점 (50, 100), (150, 100)과 마지막 점 (100, 0)을 연결하는 도형을 그리고 "lightskyblue" 색으로 채우는 예

Path element를 이용한 Drawing 프로그램 예

Path element를 이용한 Drawing 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-path.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 "Path element를 사용하는 예" 메세지가 출력되고 아래와 같은 도형이 출력된다.

d3.scaleOrdinal()

d3.scaleOrdinal()은 이산 데이터에서 새 서수 스케일을 생성한다. Ordinal scale에서 중요한 것은 데이터 값의 차이가 아니라 순서이다.

Path element를 이용하여 Drawing 하기

아래 프로그램을 실행하면 color(0): '#FFF0F5', color(1): '#87CEEB', color(2): '#E6E6FA', color(3): '#6495ED', color(4): '#FFC0CB'와 같이 color(i)에 입력 데이터의 순서에 따라 i번째 데이터가 매핑된다.

d3.scaleOrdinal()를 이해하기 위한 프로그램 예

d3.scaleOrdinal()를 이해하기 위한 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-scale-ordinal.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저(개발자 도구를 사용할 수 있는 Chrome 웹브라우저를 사용하여야함)에 "d3.scaleOrdinal Scale 예" 메세지가 출력된다.
Chrome 웹브라우저에서 "개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

d3.pie()

d3.pie() 함수는 데이터 세트를 가져 와서 SVG에서 원형 차트를 생성 할 수있는 데이터를 생성한다. 원형 차트의 각 쐐기(Wedge)에 대한 시작 각도와 끝 각도를 계산한다. 이 시작 각도와 끝 각도를 사용하여 SVG에서 Wedge의 실제 경로를 만들 수 있다.

d3.pie() 함수를 이해하기 위한 프로그램 예

d3.pie() 함수를 이해하기 위한 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-function.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저(개발자 도구를 사용할 수 있는 Chrome 웹브라우저를 사용하여야함)에 "d3.pie() 함수 예" 메세지가 출력된다.
Chrome 웹브라우저에서 "개발자 도구"를 실행하고 Console 창을 선택하여 console.log 출력을 확인한다.
Pie chart를 그리기 위한 데이터([2, 4, 7, 11])의 각 값은 전체에서 차지하는 비에 따라 Pie의 시작 값(rad)과 끝 값(rad)이 계산되어 생성(전체 Pie 값은 2π가 된다.)된 것을 확인할 수 있다.
Chrome 웹브라우저 "개발자 도구"의 Console 창 예

d3.arc()

d3.pie() 함수에서 생성한 Path를 사용하여 d3.arc() 함수는 호(Arc)를 생성한다. Arc는 내부 반경과 외부 반경이 필요하다. 내부 반경이 0이면 결과는 원형 차트(Piechart)가 되고, 그렇지 않으면 결과는 도넛 형 차트(Donut chart)가 된다. 생성 된 Arc를 SVG Path 요소로 사용한다.

d3.arc() 함수를 이용하여 Pie chart를 그리는 프로그램 예

<html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h3>Arc function: Pie chart 예 </h3>
  <svg width="250" height="150"></svg>
  <script>
    var data = [2, 4, 7, 11];

var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) / 2,
        // Pie chart 원점의 위치를 설정한다.
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Ordinal scale로 Pie chart의 Color scale을 설정한다.
    var color = d3.scaleOrdinal(['#E0FFFF','#AFEEEE','#B0E0E6','#87CEFA']);

// Pie를 생성한다.
    var pie = d3.pie();

// arcs 를 생성한다.
    var my_arc = d3.arc()
                .innerRadius(0)
                .outerRadius(radius);

// d3.pie() 함수를 이용하여 생성한 Pie chart를 그리기 위한 데이터 Groups을 생성한다.
    var arcs = g.selectAll("my_arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "my_arc")

// Pie chart를 그리기 위한 데이터 Groups을 Path로 사용하여 Arc를 그린다.
    arcs.append("path")
        .attr("fill", function(d, i) {
            return color(i);
        })
        .attr("d", my_arc);
  </script>
</body>
</html>

d3.arc() 함수를 이용하여 Pie chart를 그리는 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-arc-function.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 "Arc function: Arc drawing 예" 메세지가 출력되고 아래와 같은 Pie chart가 출력된다.

Donut chart

Donut chart는 Pie chart의 내경(innerRadius)이 0 보다 큰 경우에 해당되기 따문에 Pie chart의 내경 설정만 다르게 하여 쉽게 구현할 수 있다.

Pie chart를 이용하여 Donut chart를 그리는 프로그램 예

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h3>Pie chart를 이용한 Donut chart </h3>
  <svg width="250" height="150"></svg>
  <script>
    var data = [2, 4, 7, 11];

// Ordinal scale로 Pie chart의 Color scale을 설정한다.
    var color = d3.scaleOrdinal(['#E0FFFF','#AFEEEE','#B0E0E6','#87CEFA']);

// Pie를 생성한다.
    var pie = d3.pie();

// arcs 를 생성한다.
    var my_arc = d3.arc()
                // Pie chart의 내경(innerRadius)을 0 보다 크게 설정하면 Donut chart가 된다.
                .innerRadius(50)
                .outerRadius(radius);

Pie chart를 이용하여 Donut chart를 그리는 프로그램 실행하기

위 HTML 문서를 복사하여 d3-pie-donut-chart.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 "Pie chart를 이용g한 Donut chart 예" 메세지가 출력되고 아래와 같은 Donut chart가 출력된다.

D3.js - Drawing Pie Charts 관련 페이지 보기