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

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
	<meta name='viewport' content='width=320' />
	<meta name='apple-mobile-web-app-capable' content='yes' />
	<title>Gauge panel basic</title>
<script src='https://d3js.org/d3.v6.min.js'></script>

</head>
<body>

<div id='power-gauge'></div>
	
<script>
// Gauge에 필요한 설정과 함수를 정의한다.
// container: Gauge가 출력되는 <div> id
var gauge = function(container) {
	// 여기서 정의된 함수의 포인터를 저장하기 위한 객체.
	// gauge 함수는 이 객체를 Return 한다.
	// 외부에서 이 개체 내의 함수 포인터를 이용하여 gauge 함수에서 정의된 함수에 접근한다.
	var that = {};
	// Gauge의 중요 파라메터 값
	var config = {
		size						: 300,
		clipWidth					: 300,
		clipHeight					: 300,
		ringInset					: 20,
		ringWidth					: 60,
		minAngle					: -90,
		maxAngle					: 90,
	};
	var range = undefined;
	var r = undefined;
	var svg = undefined;
	var arc = undefined;
	// arc Sector의 시작과 종료 각도를 구하는데 사용한다.
	var tickData = [0.2, 0.2, 0.2, 0.2, 0.2];
	// arc Sector의 Color
	var arcColor = ['#FFFACD', '#FFEFD5', '#FFDAB9', '#F0E68C', '#FFFF00'];

// Degrees를 Radians로 변환하는 함수 
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}

// Gauge 구성을 초기화한다. 
	function configure() {	
		// Pie chart의 범위를 구한다. 이 예에서는 180도
		range = config.maxAngle - config.minAngle;
		// Pie chart의 반경를 구한다.
		r = config.size / 2;

// arc 객체를 생성한다.
		arc = d3.arc()
			// Pie chart의 내부 호 반경를 설정한다.
			.innerRadius(r - config.ringWidth - config.ringInset)
			// Pie chart의 외부 호 반경를 설정한다.
			.outerRadius(r - config.ringInset)
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 시작 각도를 구한다.
			.startAngle(function(d, i) {
				var ratio = d * i;
				return deg2rad(config.minAngle + (ratio * range));
			})
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 종료 각도를 구한다.
			.endAngle(function(d, i) {
				var ratio = d * (i+1);
				return deg2rad(config.minAngle + (ratio * range));
			});
	}
	
	// Gauge의 Center를 설정하기 위한 translate() 함수를 생성한다.
	// 'translate(tx, ty)' 는 x 방향으로 tx, y 방향으로 ty 만큼 위치를 변경한다.
	function centerTranslation() {
		return 'translate('+r +','+ r +')';
	}
		
	// Gauge 도형의 초기화 
	function render(newValue) {
		// container(id) 위치에 svg 창을 생성한다.
		svg = d3.select(container)
			.append('svg:svg')
				.attr('class', 'gauge')
				.attr('width', config.clipWidth)
				.attr('height', config.clipHeight);
		
		var centerTx = centerTranslation();
		//console.log('centerTx: ', centerTx);		
		var arcs = svg.append('g')
				.attr('class', 'arc')
				.attr('transform', centerTx);

// arc를 Drawing하고 Color를 채운다.
		arcs.selectAll('path')
				.data(tickData)
			.enter().append('path')
				.attr('fill', function(d, i) {
					return arcColor[i];
				})
				// arc를 Drawing 한다.
				.attr('d', arc);	
	}
	// render 함수의 Ponter를 that 객체에 추가한다.
	that.render = render;
	// Gauge 구성을 초기화한다.
	configure();
	// gauge 함수에서 정의된 함수를 외부에서 사용할 수 있게 return 한다.
	return that;
};
</script>

}

if ( !window.isLoaded ) {
	// HTML Page가 처음 Load될 때 실행된다.
	window.addEventListener('load', function() {
		onDocumentReady();
	}, false);
} else {
	onDocumentReady();
}
</script>
</body>
</html>

위 HTML 문서를 복사하여 d3-gauge-basic-arc.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 위 'arc 함수를 이용한 Gauge 패널 예'와 같은 Gauge 패널이 출력된다.

개선된 Gauge 패널(Pie chart) 프로그램 예

이 예는 위 'arc 함수를 이용하여 Gauge 패널(Pie chart) 그리기' 프로그램을 보다 일반화(Gauge의 구성을 프로그램에서 쉽게 설정할 수 있도록 프로그램을 일반화 함)한 프로그램이다.

arc 함수를 이용하여 Pie chart를 그리는 프로그램 예 2

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
	<meta name='viewport' content='width=320' />
	<meta name='apple-mobile-web-app-capable' content='yes' />
	<title>Gauge</title>
<script src='https://d3js.org/d3.v6.min.js'></script>
	<style>
	body {
		font-family:  Helvetica, Arial, sans-serif;
		margin: 32px;
	}

#power-gauge g.arc {
		fill: steelblue;
	}

#power-gauge g.pointer {
		fill: #e85116;
		stroke: #b64011;
	}
	
	#power-gauge g.label text {
		text-anchor: middle;
		font-size: 14px;
		font-weight: bold;
		fill: #666;
	}
	</style>
</head>
<body>

<div id='power-gauge'></div>
	
<script>
// Gauge에 필요한 설정과 함수를 정의한다.
// container: Gauge가 출력되는 <div> id
// configuration: Gauge 설정에 필요한 파라메터 값
var gauge = function(container, configuration) {
	// 여기서 정의된 함수의 포인터를 저장하기 위한 객체. 이 gauge 함수는 이 객체를 Return 한다.
	// 외부에서 이 개체 내의 함수 포인터를 이용하여 gauge 함수에서 정의된 함수에 접근한다.
	var that = {};
	// Gauge의 중요 파라메터 값을 설정한다.
	// 아래 config에서 Default로 설정된 값은 gauge 함수에 전달되는
	// Gauge 설정에 필요한 파라메터 값(configuration)으로 대치된다.
	var config = {
		size						: 710,
		clipWidth					: 200,
		clipHeight					: 110,
		ringInset					: 20,
		ringWidth					: 20,
				
		minValue					: 0,
		maxValue					: 10,
		
		minAngle					: -90,
		maxAngle					: 90,
		
		transitionMs				: 750,
		
		majorTicks					: 5,
		// d3.interpolateHsl() : 두 Hsl 색상 사이의 값을 보간법(interpolation)으로 구하는 함수 
		arcColorFn					: d3.interpolateHsl(d3.rgb('#e8e2ca'), d3.rgb('#3e6c0a'))
	};
	var range = undefined;
	var r = undefined;
	
	var svg = undefined;
	var arc = undefined;
	var scale = undefined;
	var ticks = undefined;
	var tickData = undefined;

// Degrees를 Radians로 변환하는 함수 
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}

// Gauge 구성을 초기화한다.
	function configure(configuration) {
		// var config에서 Default로 설정된 값을 gauge 함수에 전달되는
		// Gauge 설정에 필요한 파라메터 값(configuration)으로 대치한다.
		var prop = undefined;
		for ( prop in configuration ) {
			config[prop] = configuration[prop];
		}
		
		// Pie chart의 범위를 구한다. 이 예에서는 180도
		range = config.maxAngle - config.minAngle;
		// Pie chart의 반경를 구한다.
		r = config.size / 2;

// a linear scale that maps domain values to a percent from 0..1
		scale = d3.scaleLinear()
			.range([0,1])
			.domain([config.minValue, config.maxValue]);
			
		// tick No Array를 생성한다. 예: [0, 2, 4, 6, 8, 10]
		ticks = scale.ticks(config.majorTicks);
		//console.log('ticks: ', ticks);		
		// tickData를 생성한다. tickData는 보간법으로 arc의 색상을 계산하는 기본 데이터 또는 
		// arc의 Sector의 시작과 종료 각도를 구하는데 사용한다.
		// 1/config.majorTicks 값을 갖는 길이 majorTicks인 Array를 생성한다.
		// 예: [0.2, 0.2, 0.2, 0.2, 0.2]
		tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});
		//console.log('tickData: ', tickData);		
		// arc를 객체를 생성한다.
		arc = d3.arc()
			.innerRadius(r - config.ringWidth - config.ringInset)
			.outerRadius(r - config.ringInset)
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 시작 각도를 구한다.
			.startAngle(function(d, i) {
				var ratio = d * i;
				return deg2rad(config.minAngle + (ratio * range));
			})
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 종료 각도를 구한다.
			.endAngle(function(d, i) {
				var ratio = d * (i+1);
				return deg2rad(config.minAngle + (ratio * range));
			});
	}
	// configure 함수의 Ponter를 that 객체에 추가한다.
	that.configure = configure;
	
	// Gauge의 Center를 설정하기 위하여 translate() 함수를 생성한다.
	// 'translate(tx, ty)' 는 x 방향으로 tx, y 방향으로 ty 만큼 위치를 변경한다.
	function centerTranslation() {
		return 'translate('+r +','+ r +')';
	}
		
	// Gauge 도형의 초기화 
	function render(newValue) {
		// container(id) 위치에 svg 창을 생성한다.
		svg = d3.select(container)
			.append('svg:svg')
				.attr('class', 'gauge')
				.attr('width', config.clipWidth)
				.attr('height', config.clipHeight);
		
		var centerTx = centerTranslation();
		//console.log('centerTx: ', centerTx);		
		var arcs = svg.append('g')
				.attr('class', 'arc')
				.attr('transform', centerTx);
		// arc를 Drawing하고 Color를 채운다.
		arcs.selectAll('path')
				.data(tickData)
			.enter().append('path')
				.attr('fill', function(d, i) {
					// d3.interpolateHsl() 함수를 사용하여 보간법으로 arc의 색상을 구 한다.
					return config.arcColorFn(d * i);
				})
				// arc를 Drawing 한다.
				.attr('d', arc);	
	}
	// render 함수의 Ponter를 that 객체에 추가한다.
	that.render = render;
	// Gauge 구성을 초기화한다.
	configure(configuration);
	// gauge 함수에서 정의된 함수를 외부에서 사용할 수 있게 return 한다.
	return that;
};
</script>

}

위 HTML 문서를 복사하여 d3-gauge-arc.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 위 'arc 함수를 이용하여 Gauge 패널 예'와 같은 Gauge 패널이 출력된다.