꿈꾸는 데이터 디자이너 d3.js 실무강의 2주차

1. d3.js 외부 데이터 불러오기 & 막대그래프
2015.4.4

2. Songyi Lim
오늘의 수업
실습이론
• D3.js의 데이터 종류
• CSV 형식
• JSON 형식
• 자바스크립트 ‘변수’ 개념
• 자바스크립트 ‘함수’ 개념
• D3.js의 데이터 매칭 원리
• 데이터 문장 만들기
• 외부 데이터 연동
• 막대그래프 그리기
• bl.ocks.org 만들기

3. Songyi Lim
D3.js에서 활용할 수 있는 데이터들
내부 외부
단순배열 데이터 TSV
CSV
JSON
HTML
XML
TEXT

4. Songyi Lim
종류 설명
TSV 데이터가 탭으로 구분된 형식. 헤더있음.
CSV 반점으로 구분한 텍스트. 헤더있음.
JSON JavaScript Object Notation’의 약자. XML과 비교해 간단하고 데이터 용량도 적음. 헤더없음.
HTML 브라우저로 표시했을 때 데이터를 보기 좋게 표시해줌. 다른 데이터와 달리 레이아웃이 있다.
XML 태그를 이용해서 데이터 표현. 범용적인 데이터 포맷. SVG도 XML의 종류 중 하나.
TEXT 순수한 문자로만 구성된 데이터 파일.
D3.js 외부 데이터 종류별 특징 요약

5. Songyi Lim
CSV
반점으로 구분한 텍스트
d3.csv()
D3.js 데이터 종류 - CSV
item1, item2, item3,
120, 60, 300,
60, 50, 80,
300, 30, 90,
80, 10, 150,
헤더
• 그래프 요소에 연동할 때 속성 이름으로 다뤄짐.
• CSV 형식에 헤더가 없으면 별도 처리가 필요하다
• D3.js에서는 첫 줄이 헤더라는 것을 전제

6. Songyi Lim
• JavaScript Object Notation. 자바스크립트 문법을 바탕으로 하는 자료형식
• TSV나 CSV와 달리 헤더는 없다.
• 여러개의 데이터는 []로 감싼다
• 데이터에 레이블을 붙일 때는 { } 사이에 ‘키 이름 : 값’의 쌍을 필요한 데이터 개수만큼 반점으로 구분.
• 계층구조를 가진 데이터에서 많이 사용.
[
{“item”
:
“상품A”,
“sales”
:
[150,90,300]},
{“item”
:
“상품B”,
“sales”
:
[70,920,320]},
{“item”
:
“상품C”,
“sales”
:
[20,40,360]},
{“item”
:
“상품D”,
“sales”
:
[50,210,200]},
{“item”
:
“상품E”,
“sales”
:
[400,610,100]},
]
d3.json()
ex)
D3.js 데이터 종류 - json
JSON

7. Songyi Lim
[ 실습 ] D3.js
실

8. 습

9. Songyi Lim
[ 실습 ] 실습 데이터 설명
서울시 구별 방범용 CCTV 현황
출처 : 공공데이터포털, http://goo.gl/gB9NhA

10. Songyi Lim
[ 실습 ] html 파일 준비하기

11. Songyi Lim
[ 실습 ] 자바스크립트 기본 개념 : 변수 선언하기
var
name
=
3
;
선언 키워드
변수명
변수값
대입연산자
‘변수’
값을 저장하기 위한 공간. 각 변수는 하나의 값을 갖는다.

12. Songyi Lim
[ 실습 ] D3.js 데이터 파일 연동하기
파일 경로
파일을 불러올 때
오류가 날 경우
데이터가 전달된 부분

13. Songyi Lim
[ 실습 ] D3.js 데이터 파일 연동하기

14. Songyi Lim
[ 실습 ] 자바스크립트 기본 개념 : 함수
function
name()
{
console.log(data);
};
함수 키워드
코드
함수 이름
‘함수’
특정한 작업을 수행하기 위해 필요한 일련의 구문

15. Songyi Lim
[ 실습 ] SVG 그리기
바탕 설정
그래픽 요소에
데이터 연동

16. Songyi Lim
[ 실습 ] SVG 그리기
모든 문서 요소 선택. 하지만 아직 생성되지 않았기 때문에
빈 공간과 동일.
데이터 값을 불러옴
문서요소와 데이터 값을 연동시킴.
만약 요소가 없다면 정의되지 않은 요소를 생성함.
문서 요소의 정의를 추가함.

17. Songyi Lim
[ 실습 ] D3.js 데이터 매칭 원리
body 선택
svg 추가
.data( )
데이터 불러옴
빈 그래픽 요소
빈 그래픽 요소
빈 그래픽 요소
빈 그래픽 요소
빈 그래픽 요소
데이터값
데이터값
데이터값
데이터값
데이터값
요소정의
요소정의
요소정의
요소정의
요소정의
.enter( )
데이터와 문서요소연동
.append( )
문서요소 정의

18. Songyi Lim
[ 실습 ] D3.js - 데이터 문장 만들기

19. Songyi Lim
[ 실습 ] D3.js - 데이터 문장 만들기

20. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 바탕 설정하기

21. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 기본 설정

22. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - x좌표 설정

23. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 높이 설정

24. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - y좌표 설정

25. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - y좌표 설정
보통 척도를 활용해
크기에 맞춰 데이터 비율을 자동 설정하지만
오늘 수업에서는
임의로 값을 나눠
비율을 맞춥니다.

26. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 색상 바꾸기

27. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 데이터값 붙이기

28. Songyi Lim
[ 실습 ] D3.js 막대그래프 그리기 - 데이터값 꾸미기

29. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기

30. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기

31. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기

32. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기

33. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기

34. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기
bl.ocks.org

35. Songyi Lim
[ 실습 ] 팁 - bl.ocks.org 만들기