오늘은 vue3-echarts를 이용하여 scatter 차트, 또는 dot 차트라고 하는 유형의 차트에 대해서 정리해 보려고 한다. scatter 차트는 데이터의 분포도를 나타낼 때에 유용한 데이터 시각화 차트다. 실제 업무에서는 scatter 차트를 사용했던 경험은 많이 없지만 최근 개발을 진행하면서 scatter 유형의 차트를 구현했던 경험이 있기 때문에 이렇게 글을 정리하게 되었다.
Scatter 차트의 개념
Scatter 차트는 데이터를 산점도 형태로 표현하는 차트다. 이 차트는 두 변수 간의 관계를 시각적으로 파악할 수 있도록 도와주며, 각각의 데이터 포인트는 데이터 집합에서 하나의 점으로 나타난다.
Scatter 차트는 일반적으로 X축과 Y축에 각각의 변수를 할당하고, 데이터 포인트를 해당 변수의 값에 따라 그래프 상에 위치시킨다. 이를 통해 데이터 간의 상관관계, 분포 및 패턴을 시각적으로 파악할 수 있다.
데이터 분포 시각화
Scatter 차트는 데이터의 분포를 시각적으로 파악할 수 있도록 도와주며, 데이터 포인트의 위치를 통해 데이터의 밀도, 분산, 군집 등을 파악할 수 있다.
상관 관계 분석
두 변수 간의 상관관계를 파악할 수 있다. 변수 간의 관계가 양의 상관관계인지, 음의 상관관계인지, 또는 상관관계가 없는지를 시각적으로 확인할 수 있다.
이상치 탐지
Scatter 차트를 통해서 이상치를 식별할 수 있으며, 데이터 포인트 중에서 다른 데이터 집합과 동떨어진 위치에 있는 이상치를 쉽게 식별할 수 있다.
추세 분석
Scatter 차트는 데이터의 추세를 시각적으로 확인할 수 있으며, 데이터 포인트가 선형적인 패턴을 따르는지, 비선형적인 패턴을 따르는지를 파악할 수 있다.
위의 정리한 내용과 같이 Scatter 차트는 주로 데이터 분석, 통계, 과학 연구, 경영 분석 등 다양한 분야에서 활용된다. 데이터 포인트의 위치와 패턴을 분석하여 인사이트를 도출하고 의사 결정에 활용하는 데에 유용하게 활용된다.
Scatter 차트 예제 소스 코드
vue3-echarts 라이브러리 install
> npm install vue3-echarts전체 소스 코드
<template>
<div>
<vue-echarts
:option="options"
style="width:70%;height:600px;"
/>
</div>
</template>
<script>
// install한 라이브러리 import
import { VueEcharts } from 'vue3-echarts'
import { reactive, toRefs, onMounted } from 'vue'
export default {
components : {
VueEcharts
},
setup() {
const state = reactive({
options : {}
})
onMounted(() => {
// legend 목록
const legendList = ['VUE']
// 데이터는 요일 기준으로 random하게 생성
const xData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
// series 데이터 목록
const series = []
// legend 기준 series 데이터 생성
legendList.map((x) => {
series.push({
name : x,
type : 'scatter',
data : xData.map(() => (Math.random() * 10).toFixed(3))
})
})
/**
* Chart options 정의
*
*/
state.options = {
// legend 정의
legend : {
data : legendList
},
// X축 정의
xAxis : {
type : 'category',
data : xData
},
// Y축 정의
yAxis: {
type: 'value'
},
// bar 유형 데이터 정의
series: series,
// tooltip 정의
tooltip : {
trigger: 'axis'
}
}
})
return {
...toRefs(state),
}
}
}
</script>위의 소스 코드는 vue3-echarts 라이브러리를 활용하여 작성한 Scatter 차트다.
template
- <vue-echarts> 컴포넌트를 템플릿 내에 설정.
- :option 속성을 통해서 차트의 옵션을 설정
- style 속성을 통해 차트의 크기를 지정
script
state.options에 차트의 옵션을 설정
- legendList 변수는 차트에 표시될 범례(legend)의 목록을 정의
- xData 변수는 X축에 표시될 데이터의 목록을 정의
- series 배열은 각각의 범례에 대한 데이터를 설정, 차트의 유형은 'scatter'로 설정
실행 결과
데이터는 Math.random() 함수를 이용하여 랜덤 하게 만들어서 세팅하였다.
실제 업무에서 운영 데이터로 구현하게 되면 위의 화면과 같이 랜덤 하게 여기저기 흩뿌려지지 않고 특정 부분으로 쏠리는 현상을 볼 수 있게 된다. 보통 scatter 유형의 차트를 이용해 구현해 보면 데이터가 어느 지점으로 몰리게 되는지 쉽게 파악할 수 있다.
Scatter multi 차트 예제 소스 코드
<template>
<div>
<vue-echarts
:option="options"
style="width:70%;height:600px;"
/>
</div>
</template>
<script>
// install한 라이브러리 import
import { VueEcharts } from 'vue3-echarts'
import { reactive, toRefs, onMounted } from 'vue'
export default {
components : {
VueEcharts
},
setup() {
const state = reactive({
options : {}
})
onMounted(() => {
// legend 목록
const legendList = ['VUE', 'REACT', 'ANGULAR', 'JQUERY', 'SVELTE', 'BACKBONE']
// 데이터는 요일 기준으로 random하게 생성
const xData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
// series 데이터 목록
const series = []
// legend 기준 series 데이터 생성
legendList.map((x, i) => {
series.push({
name : x,
type : 'scatter',
data : xData.map(() => (Math.random() * i * 2).toFixed(3))
})
})
/**
* Chart options 정의
*
*/
state.options = {
// legend 정의
legend : {
data : legendList
},
// X축 정의
xAxis : {
type : 'category',
data : xData
},
// Y축 정의
yAxis: {
type: 'value'
},
// bar 유형 데이터 정의
series: series,
// tooltip 정의
tooltip : {
trigger: 'axis'
}
}
})
return {
...toRefs(state),
}
}
}
</script>위의 예제 코드는 먼저 위에서 실행했던 소스 코드에서 legendList 배열에 항목을 추가하여 multi 형태의 scatter 차트로 구현한 예제 코드다.
나머지 코드는 모두 동일하기 때문에 생략하고 바로 실행 결과를 확인하면 된다.
실행 결과
위의 실행 결과는 legend 유형별로 다양하게 뿌려진 모습이다.
Scatter 차트 사용 시 주의사항
Scatter 차트를 구현할 때에는 몇 가지 주의사항을 고려하는 것이 좋다. 데이터를 시각화하는 것이기 때문에 데이터의 분석과 차트의 유형이 적절한지, 성능은 괜찮은지 고려해야 한다.
데이터 양과 밀도
Scatter 차트는 각각의 데이터 포인트를 개별적으로 표시하기 때문에 데이터의 양이 많을 경우 차트가 지나치게 밀집될 수 있다. 따라서 많은 양의 데이터를 표시해야 하는 경우에는 데이터를 축소하거나 집계하여 표현하는 등의 방법을 고려해야 한다.
축의 값 범위
Scatter 차트에서는 축의 값 범위를 적절하게 설정해야 한다. 값 범위가 적절하지 않으면 데이터가 차트에 적절하게 표시되지 않을 수 있다. 따라서 데이터의 범위에 맞게 축의 최솟값과 최댓값을 설정해야 한다.
상관관계 분석
Scatter 차트는 데이터 간의 상관관계를 시각화하기에 적합하다. 그러나 상관관계 분석을 위해서는 주의가 필요하다. 데이터의 상관관계를 정확히 해석하기 위해서는 추가적인 분석이 필요하며, 데이터의 특성과 함께 고려해야 한다.
범례
Scatter 차트에서는 각각의 데이터 포인트가 범례로 표시되지 않는다. 대신에 데이터 포인트의 색상이나 크기를 통해 구분되므로, 데이터의 구분이 필요한 경우 색상이나 크기를 적절히 설정해야 한다.
이상치 처리
Scatter 차트는 이상치를 시각적으로 식별하기에 용이하다. 이상치는 데이터 집합에서 일반적인 패턴과 벗어난 값을 의미한다. 이상치는 데이터 분석에 영향을 미칠 수 있으므로, 이를 식별하고 처리하는 것이 중요하다.
색상과 크기
Scatter 차트에서는 데이터 포인트의 색상과 크기를 활용하여 추가 정보를 전달할 수있다. 이를 통해 데이터 포인트의 중요도나 특성을 시각적으로 강조할 수 있다. 그러나 너무 많은 색상이나 크기의 변화는 차트의 가독성을 저하시킬 수 있으므로 주의해야 한다.
레이블
Scatter 차트에서는 데이터 포인트에 레이블을 추가하여 추가 정보를 제공할 수 있다. 그러나 너무 많은 레이블이 있는 경우 차트의 가독성을 저하시킬 수 있으므로, 필요한 경우에만 레이블을 표시해야 한다.
마무리
생각보다 vue3-echarts 라이브러리는 생산성이 좋다고 생각하며, Scatter 유형과 같은 차트 구현도 손쉽게 할 수 있다. 물론 요즘 사용되는 다양한 라이브러리들도 생산성이 좋고 구현도 비슷비슷하다. 그러나 나는 요즘 apache echarts를 주로 개발하다 보니 더 유심히 보게 되는 것 같다.
* Apache Echarts 공식 사이트
https://echarts.apache.org/en/index.html
Apache ECharts
ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations,
echarts.apache.org
'javascript > Vue' 카테고리의 다른 글
| Vue3 Component 예제를 통해 배워보기 (부모 자식간 연동하기) (0) | 2023.01.30 |
|---|---|
| Vue Options API와 CompositionAPI 비교하기! (0) | 2023.01.29 |
| [vue] Vue3 + Apache Echarts - Pie 차트 만들기! (0) | 2023.01.04 |
| [vue3] vue3-echarts multi bar 차트 만들기 (0) | 2022.12.21 |
| [Vue3] vue3-echarts - multi line 차트 만들기 (0) | 2022.12.21 |
