www.attrs.co.kr www.facebook.com/datadesigner2015

1. Data Designer
D3.js
06 : D3.js Transition & Animation

2. 꿈꾸는데이터디자이너 시즌2오늘의 수업
이론 실습
1. transition( ) 원리
2. .on ( ) 이벤트
1. 각종 transition 효과 실습

3. 꿈꾸는데이터디자이너 시즌2
.transition( )
d3.transition
d3.js에서 변화를 주는 함수.
변화하기 전 코드
변화 후 코드
.transition( )

4. 꿈꾸는데이터디자이너 시즌2d3.transition
.transition( )
순서대로 코드를 읽어서
변화 전의 모습을 먼저 그리고
transition을 만나면
변화 후의 모습을 그린다
변화하기 전 코드
변화 후 코드
.transition( )
변화 전의 모습과 변화 후의 모습 사이의 값을 계산해 애니메이션으로 만들어준다.

5. 꿈꾸는데이터디자이너 시즌2d3.transition
.transition( )의 지속시간을 제어.
반드시 transition의 뒤에 사용해야 함
단위 : ms
기본값 : 250ms = 0.25s
.duration( )
.transition( )의 특징 설정
기본값 : cube
.ease( )
.transition( )의 지연시간 설정
단위 : ms
.delay( )

6. 꿈꾸는데이터디자이너 시즌2d3.transition
.transition 확인해보기
하단 사이트에서 실제로 어떻게 작동하는지 확인해보자
D3.js Transition & Animation D3.js Easing Checker
이미지
클릭

7. 꿈꾸는데이터디자이너 시즌2d3.transition
.on( )
[ 참고링크 ] http://bl.ocks.org/hunzy/9929724
옵션 내용
click 클릭했을때
mouseover 마우스를올렸을때
mouseout 마우스를밖으로이동했을때
마우스클릭, 마우스오버 등 요소 위에 마우스를 올렸을 때 활용되는 이벤트
.on(“이벤트종류”, 어떤 이벤트를 만들 것인지)

8. 꿈꾸는데이터디자이너 시즌2
실습

9. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
[ 설계 ]
.transition( )
r = 1
fill = #dddddd
r = d.generation
fill = #2933ff
.transition( )을 이용해 원이 점점 커지고 색상이 변하는 기능을 구현

10. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
[ 설계 ]
.on(“mouseover”)
원 위에 마우스를 올리면 색상과 크기가 변함
r = 1
fill = #dddddd
r = d.generation
fill = #2933ff

11. Neuro Associates
・ Portfolio : neuroassociates.co.kr/portfolio
・ Address : 서울특별시 마포구 상수동 145-1 6F
・ Site : neuroassociates.co.kr
・ Mail : neuro.associates.consulting@gmail.com or info@neuroassociates.co.kr
・ SNS : www.facebook.com/neuroassociatessns
・ Phone : 02-334-2013