www.attrs.co.kr

1. Data Designer
D3.js
07: D3.js Interative - Tooltip

2. 꿈꾸는데이터디자이너 시즌2오늘의 수업
이론 실습
1. 툴팁을 배우기 위한 각종 원리 1. 툴팁 실습

3. 꿈꾸는데이터디자이너 시즌2d3 Tooltip
Tooltip?
요소에 커서를 올리면 세부 데이터값을 보여주는 기능.

4. 꿈꾸는데이터디자이너 시즌2d3 Tooltip
Tooltip을 만드는 방법은 여러가지가 있다

5. 꿈꾸는데이터디자이너 시즌2d3 Tooltip
툴팁을 비롯한 다양한 인터랙티브 효과는 D3.js 뿐만 아니라
HTML/CSS/다양한 JavaScript 라이브러리를
엮어서 만들어낸다

6. 꿈꾸는데이터디자이너 시즌2
1. Tooltip을 그리기 위한 영역 그리는 법
2. 위치 정하기
3. HTML의 ‘Class’ 개념
4. 데이터값 연동하는 법
d3 Tooltip
Tooltip을 만들기 위해 알아야 할 것들

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

8. 꿈꾸는데이터디자이너 시즌2d3 Tooltip
오늘의 결과물

9. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
[ 설계 ]
1단계 : 각 원 위에 마우스를 올리면 색상이 변한다
.on(“mouseover”)
fill = #dddddd fill = red

10. 꿈꾸는데이터디자이너 시즌2[실습 ] 오늘의 결과물
[ 설계 ]
2단계 : 툴팁이 나타난다
1
2
3
4
5
툴팁 영역 만들기
툴팁 위치 설정
데이터 삽입 공간 만들기
데이터 연동
데이터를 텍스트에 삽입

11. 꿈꾸는데이터디자이너 시즌2
웹페이지 내에서 영역을 구분하는 태그. 영역의 크기, 위치 등은 CSS에서 설정해야 한다.
<div>
d3 Tooltip
<div>
</div>
div를 이용해 툴팁의 영역을 만듭니다
텍스트에서 줄바꿈없이 일부만 스타일을 적용할 때 사용
<span>
<p> 지역명 : <span></span> </p>
이 부분에 데이터 값을 추가합니다

12. 꿈꾸는데이터디자이너 시즌2
HTML요소에 특정한 이름을 붙이는 것.
같은 CSS 속성을 적용할 때 많이 쓰인다.
Class
d3 Tooltip
<div class=“a”></div> <div class=“b”></div>
.a {
border : white;
background-color : red;
}
.b {
border : yellow;
background-color :gray;
}

13. 꿈꾸는데이터디자이너 시즌2
display
[ 참고링크 ] http://www.w3schools.com/cssref/pr_class_display.asp
d3 Tooltip
요소를 어떻게 보여줄 지 설정. 태그마다 기본 속성값이 다르다.
유형 설명
none 보이지 않음
block 기본값이 가로 100%. width / height을 지정할 수 있음. 줄바꿈 O
inline 한 줄에 여러개가 붙는다. width/height을 지정할 수 없음. 줄바꿈 X
inline-block inline요소와 block요소의 혼합. 줄바꿈이 되지 않지만 크기를 지정할 수 있음.
inline
block
block
inline
툴팁(div)을 보이거나 숨길 때 사용

14. 꿈꾸는데이터디자이너 시즌2
position
d3 Tooltip
태그의 위치를 지정하는 스타일 속성.
top
left
Tip position의 속성
유형 설명
static 기본값. 일반적인 흐름(상→하)으로 요소를 배치
relative 원래 위치에서 지정된 값만큼 떨어진 곳에 요소를 배치
absolute 가장 가까운 상위 요소를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치
fixed 웹 브라우저 전체 화면을 기준으로 요소를 고정시킴
툴팁(div)의 위치를 지정할 때 사용
[ 참고링크 ] http://www.w3schools.com/cssref/pr_class_position.asp

15. 꿈꾸는데이터디자이너 시즌2
d3.event.pageX & pageY
[ 참고링크 ] https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX
d3 Tooltip
툴팁의 위치를 계산하기 위해서는
1) 마우스가 올려져 있는 요소를 찾아서
2) 요소의 위치를 인식한 다음
3) 요소의 위치값을 툴팁의 위치값에 전달해야 함
pageX
pageY
선택된 요소의 X좌표와 Y좌표를 인식해 반환하는 함수
툴팁(div)의 위치를 계산할 때 사용

16. 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