꿈꾸는 데이터디자이너 d3.js 4주차 Scatter chart

1. d3.js Scatter chart
2015.4.18
www.attrs.co.kr

2. Songyi Lim www.attrs.co.kr
오늘의 수업
실습이론
• Scatter chart 그리기
• (복습) 막대그래프
• Scatter chart 이해하기

3. Songyi Lim www.attrs.co.kr
Scatter chart 이해하기
http://www.attrs.co.kr/d3/02scatter/index.html
2014년 3/4분기 서울시의 동별 전입・전출 현황
서로 다른 의미를 가진
두 개의 데이터 집합을 나타낸 시각화 유형

4. Songyi Lim www.attrs.co.kr
Scatter chart 이해하기
http://www.attrs.co.kr/d3/05bubble/index.html
2013년 OECD국가 세금 데이터
x,y축과 함께 원의 넓이에도 데이터를 엮어 의미를 부여할 수 있다

5. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js
실

6. 습

7. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도 결과물

8. Songyi Lim www.attrs.co.kr
[ 실습 ] 실습 데이터 설명
서울시 주민등록인구, 내국인 및 외국인 (2014)
출처 : 서울통계
x축 : 한국인
y축 : 외국인

9. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
d3.csv
d3.svg.axis()
.scale()
.orient();
d3.scale.()
.domain()
.range();
데이터
불러오기
축과 척도
설정
틀 그리기
d3.select()
.append()
.attr(“width”)
.attr(“height”)

10. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
svg.selectAll()
.data()
.enter()
.append()
.attr()
요소에
데이터 엮기
요소 속성
설정
축 그리기
svg.append(“g)
.attr(transform,
“translate()”)
.call()

11. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
01dataload.html

12. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
02scale.html

13. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
03svg.html

14. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
04axis.html

15. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
04axis.html

16. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
05circle.html

17. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 산포도
. 은 HTML의 Class를 뜻함.
겹치는 SVG 요소가 여러개일 경우
앞에 .을 붙여 구분한다
(동일한 요소가 여러개일 경우 코드 내에서 혼란이 발생해
요소가 제대로 나타나지 않음)
06text.html

18. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 막대그래프 복습하기
지난주 파일을 참고해
밑줄을 지우고 코드를 수정해보세요
07bartest.html

19. Songyi Lim www.attrs.co.kr
- 끝 -