데이터 시각화 (D3.js)

KHW·2021년 11월 15일

데이터분석

목록 보기

12/13

기본 문법

d3.select

d3.selectAll

selection.attr

selection.data

selection.enter

selection.append

selection.insert

selection.remove

selection.raise

selection.lower

selection.sort

selection.nodes

selection.call

1. d3.select

querySelector로 Dom element를 찾는다.

2. d3.selectAll

querySelectorAll로 Dom element를 찾는다.

3. selection.attr

Selection이 가리키는 element의 속성을 가져오거나 설정

SVG와 D3.js 다루기 예시

1. SVG로만 차트 만들기


 
<html>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
	.bar{
		fill:skyblue;
	}
	</style>
<body>
            <svg width="600px" height="500px">
            	<g transform="translate(150,30) scale(0.00002459270787,1)" class="bar">
            		<rect x="0" y="0" height="20" width="16264984"/>
            		<rect x="0" y="25" height="20" width="13264984"/>
            		<rect x="0" y="50" height="20" width="12264984"/>
            		<rect x="0" y="75" height="20" width="11264984"/>
            		</g>
            	<g>
            		<text x="0" y="45">극한직업</text>
            		<text x="0" y="70">어벤져스</text>
            		<text x="0" y="95">겨울왕국</text>
            		<text x="0" y="120">알라딘</text>
            	</g>
            </svg>     


</body>
</html>

2. D3.js 사용하여 차트 만들기


 
<html>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
	.bar{
		fill:skyblue;
	}
	</style>
<body>
</body>
<script>
const body = d3.select('body');
const svg = body.append('svg').attr('width','600px').attr('height','500px')
const barGroup = svg.append('g').attr('class','bar').attr('transform','translate(150,30) scale(0.00002459270787,1)')
const barLabel = svg.append("g")

barGroup.append('rect')
.attr('x', '0')
.attr('y', '0')
.attr('height', '20')
.attr('width', '16264984')
barGroup.append('rect')
.attr('x', '0')
.attr('y', '25')
.attr('height', '20')
.attr('width', '13264984')
barGroup.append('rect')
.attr('x', '0')
.attr('y', '50')
.attr('height', '20')
.attr('width', '12264984')
barGroup.append('rect')
.attr('x', '0')
.attr('y', '75')
.attr('height', '20')
.attr('width', '11264984')


barLabel.append("text")
.attr("x","0")
.attr("y","45")
.text("극한직업")
barLabel.append("text")
.attr("x","0")
.attr("y","70")
.text("어벤져스")
barLabel.append("text")
.attr("x","0")
.attr("y","95")
.text("겨울왕국")
barLabel.append("text")
.attr("x","0")
.attr("y","120")
.text("알라딘")
  </script>
</html>

3. D3.js 데이터 분리하여 차트 만들기


 
<html>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
	.bar{
		fill:skyblue;
	}
	</style>
<body>
</body>
<script>

const data = [
	{
		name : '극한직업',
		value : 16264984
	},
		{
		name : '어벤져스',
		value : 13264984
	},
		{
		name : '겨울왕국',
		value : 12264984
	},
		{
		name : '알라딘',
		value : 11264984
	}
]

const nameList = data.map(d=>d.name);
const valueList = data.map(d=>d.value);
const width = 400;
const scaleFactor = width / d3.max(valueList)
const scaleText = `scale(${scaleFactor},1)`;
const translateText = `translate(150,30)`;

const body = d3.select('body');
const svg = body.append('svg').attr('width','600').attr('height','500')
const barGroup = svg.append('g').attr('class','bar').attr('transform',`${translateText} ${scaleText}`)
console.log(barGroup)
const barLabel = svg.append("g")

const barHeight = 20, barGap = 5, barSpacing = barHeight + barGap;

valueList.forEach((val,idx)=>{
	barGroup.append('rect')
	.attr('x','0')
	.attr('y',barSpacing * idx)
	.attr('height',barHeight)
	.attr('width',val)
})

nameList.forEach((name,idx)=>{
	barLabel.append('text')
	.attr('x','0')
	.attr('y',barHeight * (idx +2) + barGap * (idx+ 1))
	.text(name);
})


</script>


</html>