jqPlot 버블 차트 — BubbleRenderer 완전 정리

 

 

Web Development · jQuery + jqPlot

jqPlot 버블 차트 —
BubbleRenderer 완전 정리

x · y 위치 + 크기 + 라벨, 4차원 데이터 한눈에

시작 오늘 분석할 코드

버블 차트는 한 점에 4가지 정보를 담는다 — x좌표, y좌표, 원의 크기, 라벨. 한국 도시 7개의 데이터를 한 차트에 다 보여준다.

var arr = [ [11, 123, 1236, "수원"], [45, 92, 1067, "인천"], [24, 104, 1176, "서울"], [50, 23, 610, "충청"], [18, 17, 539, "오산"], [7, 89, 864, "부천"], [2, 13, 1026, "동탄"] ]; $.jqplot('chartdiv', [arr], { title: '버블 그래프 예제', seriesDefaults: { renderer: $.jqplot.BubbleRenderer, rendererOptions: { bubbleAlpha: 0.6 }, shadow: true, shadowAlpha: 0.05 } });

실제 출력 미리보기

버블 그래프 예제

수원인천서울충청오산부천동탄

---

용어 핵심 키워드

BubbleRenderer버블(원) 그리는 렌더러

[x, y, r, label]하나의 버블 — 4개 값

bubbleAlpha원의 투명도 (0~1)

shadowAlpha그림자 투명도

자동 크기 조정차트 크기에 맞게 비율 조절

자동 색상버블마다 다른 색 자동 부여

---

1 데이터 형식 — 4개 값의 의미

각 점은 [x, y, r, label] 형식이다. 다른 차트와 다르게 한 점에 4가지를 한 번에 표현한다.

위치	역할	본 코드 예 (수원)
1번째	x좌표 (가로 위치)	11
2번째	y좌표 (세로 위치)	123
3번째	원의 크기 (반지름의 척도)	1236
4번째	라벨 (원 안의 텍스트)	"수원"

💡 실무 활용 — 매출(x) × 이익률(y) × 직원 수(r) 같이 3개 측정값을 한번에 비교할 때 강력하다.

---

2 bubbleAlpha — 겹침 처리

버블끼리 자주 겹친다. bubbleAlpha: 0.6은 각 원을 60% 투명하게 만들어 겹친 부분이 보이게 한다.

• 1.0 — 완전 불투명, 겹친 부분 안 보임
• 0.6 — 본 코드 — 겹친 곳이 진해짐 (좋은 기본값)
• 0.3 — 매우 투명, 거의 윤곽만

---

3 shadow + shadowAlpha — 그림자

shadow: true로 그림자를 켜고, shadowAlpha: 0.05로 매우 옅게 한다. 너무 진하면 차트가 지저분해진다.

그림자는 입체감을 더해 평면 원이 떠 있는 듯한 효과를 준다. 다만 데이터를 가리지 않게 옅게 두는 게 표준.

---

 

반응형

 

4 가장 단순한 셋업

본 코드는 다른 차트와 달리 axes나 legend 같은 옵션이 거의 없다. 버블의 좌표가 자동으로 축을 정하기 때문이다.

• x/y 좌표 범위는 데이터에서 자동 계산
• 각 버블 색은 첫 데이터부터 자동으로 다르게 부여
• 라벨은 원 안에 자동 배치

---

5 자주 하는 실수

실수	증상	해결
r 값이 너무 작음 (1, 2 등)	점처럼 보임	10~수백 단위로 스케일
r 값이 너무 큼 (10000+)	한 버블이 화면 가득 채움	적절히 스케일
label 누락	버블만 있고 무엇인지 모름	4번째 자리에 문자열
한 버블만 너무 크면 작은 게 안 보임	데이터 분포 왜곡	로그 스케일 또는 r 정규화
BubbleRenderer 플러그인 미로드	renderer is undefined	jqplot.bubbleRenderer.min.js 추가

---

6 언제 버블 차트를 쓰는가

• 3차원 데이터 비교 — 인구 × GDP × 면적 같은 다중 측정
• 제품 포지셔닝 — 가격 × 만족도 × 시장 점유율
• 지역 분포 — 위도 × 경도 × 인구
• 회사 비교 — 매출 × 수익 × 직원 수

⚠ 주의 — 버블 크기를 사람 눈으로 정확히 비교하긴 어렵다. 대략적인 비교용으로 적합하고, 정밀한 비교는 막대 차트가 더 좋다.

---

7 현대식 (Chart.js bubble)

new Chart(ctx, { type: 'bubble', data: { datasets: [{ data: [ { x: 11, y: 123, r: 25, label: '수원' }, { x: 45, y: 92, r: 22, label: '인천' }, ... ] }] } });

---

핵심 한 줄 요약

BubbleRenderer버블(원) 차트 렌더러

[x, y, r, label]한 버블 — 4개 값 묶음

bubbleAlpha 0.6투명도 — 겹침 시각화

shadow + shadowAlpha옅은 그림자 — 입체감

자동 처리축 / 색 / 라벨 위치

강점3차원 데이터 한눈 비교

Tags

#jqPlot #버블차트 #BubbleRenderer #bubbleAlpha #shadowAlpha #3차원데이터 #jQuery #차트 #데이터시각화 #JS #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jqPlot, 버블차트, BubbleRenderer, bubbleAlpha, shadowAlpha, 3차원데이터, jQuery, 차트, 데이터시각화, JS, CSS, HTML, 웹개발, 티스토리